使用hugo与coding部署静态博客
今年过年期间将几乎荒废的站点迁移至 hugo,没写几篇,上个月再把站点迁移至国内,然后备了个案,选了个新主题–DoIt,准备重新开张,故有此文。
名词解释
-
静态博客: 利用静态网站生成器(如 hexo,hugo 等)将文章编译成 html、css、js 等静态文件,可利用 GitHub Pages、OSS 等托管,好处是不需要另外购买服务器。
-
hugo: Go 编写的一款高性能静态网站生成器。
-
coding: 腾讯旗下代码托管平台,类似于 GitHub、GitLab、Gitee 等。
-
Markdown:一种轻量级标记语言,可理解为简化版 html,常被程序员用于编写文档,实际上写文章用 markdown 最爽,专注于内容,无需纠结格式(珍爱生命,远离 Word)。
-
Git:一款开源的代码版本管理工具,常为程序员所用,实际上可以管理一切纯文本,写文章时佐以 markdown,甚佳。
-
cos: 腾讯旗下对象存储产品,相当于阿里的 OSS,可存储图片、视频、pdf 等文件,也可托管站点。
思路
- 利用 markdown 编写文章
- 利用 hugo 将文章编译成静态文件
- 将静态文件推送至 coding 端远程 git仓库
- coding 端将静态文件推送至 COS 端
- 利用 CNAME 将 COS 相应域名映射至自己的域名
实现
利用hugo 生成站点
下载 hugo,示例为 Mac 端,其他端见下载 hugo
|
|
查看 hugo版本
|
|
新建站点
|
|
生成目录结构如下
|
|
- archetypes: 文章模板存储目录
- config.toml:站点配置文件
- content:文章、标签、分类等存放目录
- static:静态文件存储目录,如图片
- themes:博客主题存储目录
配置 DoIt 主题
下载主题
|
|
开启主题
|
|
其他配置见:https://hugodoit.pages.dev/zh-cn/theme-documentation-basics/
新增文章
使用 hugo 命令新增文章
|
|
默认情况下生成于./content/posts/
目录下,会使用archetypes
下的模板生成文章
本地查看
|
|
在浏览器直接访问http://localhost:1313即可访问站点,修改文章后也会实时更新,这样我们就能边写文章,边在本地浏览器上预览最终效果了。
静态文件生成
|
|
直接使用 hugo 命令即可,该命令会在 public 目录下生成网站最终的静态文件,如果希望其他人也能通过浏览器访问到,就需要一个公共服务来托管我们的静态文件,本次使用腾讯云的 COS。
静态文件托管
将你本地项目的远程仓库指向 coding 新建的仓库
|
|
接下来,开启网站托管
部署成功后,可自定义域名,并开启 https
接下来每次推送静态文件都会触发自动部署