把这次搭建过程记下来,以后重装环境或换电脑时,可以照着重新配置。

这次使用 Hugo(静态站点生成器)和 PaperMod(极简博客主题)。在本地写文章、生成网页,服务器只负责提供静态文件访问。

安装工具

本地使用扩展版,方便以后更换主题:

winget install --id Hugo.Hugo.Extended -e

还需要 Git(版本管理工具),用来管理博客和主题。安装后可以检查版本:

hugo version
git --version

这个主题不需要额外安装语言运行环境。

创建站点

在准备存放博客的目录里执行:

hugo new site ABlog
cd ABlog
git init

ABlog(博客项目目录)保存文章、站点配置和自定义内容,主题通过子模块引用官方仓库。

设置忽略规则

在站点根目录创建 .gitignore(忽略规则文件):

/public/
/resources/_gen/
/assets/jsconfig.json
/hugo_stats.json
/.hugo_build.lock
.env
.env.*
!.env.example

生成的网页、构建缓存和真实环境变量不提交到仓库。文章、站点配置、主题引用和环境变量示例需要保留。

引入主题

在博客项目里引入官方主题,使用 submodule(子模块)记录版本:

git submodule add git@github.com:adityatelange/hugo-PaperMod.git themes/PaperMod

博客仓库会记录所用主题的版本。以后重新拉取博客仓库时,还需要初始化主题:

git submodule update --init --recursive

更新主题时,在主题目录中同步到需要的版本,再回到博客仓库提交新的主题引用。

设置站点信息

在根目录的 hugo.yaml(站点配置文件)中填写:

baseURL: https://example.org/
locale: zh-CN
defaultContentLanguage: zh
hasCJKLanguage: true

title: Another Bypass log
theme: ["PaperMod"]

params:
  description: 记录技术实践和折腾过程。

Another Bypass log(博客名称)是站点标题;每篇文章还有自己的标题。中文语言和中文内容统计也在这里设置。

这里仍是示例域名,正式发布前要把 baseURL(站点完整地址)替换为真实地址,并保留末尾的斜杠。

设置字体

站点使用 Maple Mono NF CN(枫叶等宽中文图标字体),正文和代码使用同一款字体。

把本机安装的常规字重转成 WOFF2(网页压缩字体格式),保存在 static/fonts(字体目录),并附上原字体的授权文件。字体随站点一起发布,访客无需提前安装;本机已有这款字体时,浏览器会优先使用本机版本。

样式放在 assets/css/extended/fonts.css(字体样式文件),由主题自动加载。这里只添加站点自己的样式,直接使用官方主题。

字体转换只在准备文件时做一次,后续正常构建即可。

写文章并预览

创建第一篇文章:

hugo new content posts/first.md

文章保存在 content/posts(文章目录)中,使用 Markdown(轻量标记语言)编写。文件顶部的配置记录标题、日期和草稿状态,下方填写正文。

本地预览时执行:

hugo server -D

其中 -D(包含草稿)让尚未发布的文章也能显示。启动后打开终端给出的本地地址,修改文章后会自动更新预览。

后续发布

确认文章内容后,将文章顶部的 draft(草稿开关)改为 false(关闭),再生成发布文件:

hugo --minify

这里的 –minify(压缩输出)会减小生成文件的体积,成品保存在 public(静态网页目录)中。

服务器已经准备了 Traefik(反向代理)和 Nginx(静态网页服务)的容器配置,实际启动还需要填写域名和证书邮箱。正式发布时,把生成目录中的全部文件复制到服务器的 blog/public(网页挂载目录)。

文章和站点配置在本地维护,服务器使用生成好的静态文件。这部分部署完成后,再补充实际操作记录。