这个博客由 Hugo 生成、托管在 Cloudflare Pages。整站是纯静态文件,构建在云端完成,写作和部署的体验都很轻。
下面是我实际使用的流程,供同样想搭个人站点的朋友参考。
为什么选这套组合
- Hugo:单个二进制文件,构建毫秒级,不需要 Node 生态也能跑;
- PaperMod:简洁、支持深色模式、自带站内搜索与目录,中文排版也不错;
- Cloudflare Pages:连上 Git 仓库后自动构建,免费额度对个人博客绰绰有余,还自带全球 CDN 与 HTTPS。
目录结构
初始化之后的站点结构大致是这样:
blog/
├── hugo.toml # 站点配置
├── archetypes/ # 新文章模板
├── assets/
│ └── css/extended/ # 自定义样式
├── content/
│ ├── posts/ # 文章
│ ├── about.md # 关于页
│ ├── archives.md # 归档页
│ └── search.md # 搜索页
├── static/ # 原样拷贝到站点根目录的文件
└── themes/PaperMod/ # 主题(直接放在仓库里,无需 submodule)
本地写作与预览
新建一篇文章:
hugo new content posts/my-new-post.md
启动本地预览(包含草稿):
hugo server -D
打开 http://localhost:1313 就能看到效果,改动会实时刷新。
部署到 Cloudflare Pages
1. 把代码推到 GitHub
git init
git add .
git commit -m "chore: init hugo blog"
git branch -M main
git remote add origin https://github.com/<你的用户名>/<仓库名>.git
git push -u origin main
2. 在 Cloudflare Pages 创建项目
进入 Cloudflare 控制台的 Workers & Pages → Create → Pages → Connect to Git,选中刚才的仓库,构建配置填:
| 配置项 | 值 |
|---|---|
| Framework preset | Hugo |
| Build command | hugo --gc --minify |
| Build output directory | public |
| 环境变量 | HUGO_VERSION = 0.170.0 |
保存后,每次 git push 都会自动构建并发布。
PaperMod 当前版本要求 Hugo ≥ 0.158。
HUGO_VERSION不要留空,否则 Cloudflare 可能使用旧版本导致构建失败。
3. 绑定自己的域名
在项目的 Custom domains 里添加域名,按提示在 DNS 服务商处加一条 CNAME 记录即可。HTTPS 证书会自动签发和续期。
4. 修正 baseURL
部署成功后,把 hugo.toml 里的 baseURL 改成正式域名,再推送一次:
baseURL = "https://blog.yourdomain.com/"
这样 RSS、站点地图和社交卡片的绝对链接才会正确。
命令行部署(可选)
不想连 Git 也可以直接上传构建产物:
hugo --gc --minify
npx wrangler pages deploy public --project-name wang-blog
日常写作流程
hugo new content posts/xxx.md # 1. 新建
hugo server -D # 2. 本地预览
git add . && git commit -m "post: xxx"
git push # 3. 自动部署
就这三步。工具越简单,越容易坚持下去。