把这次搭建过程记下来,以后重装环境或换电脑时,可以照着重新配置。
这次使用 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(网页挂载目录)。
文章和站点配置在本地维护,服务器使用生成好的静态文件。这部分部署完成后,再补充实际操作记录。