Hugo 快速入门
本文目录
Hugo 是世界上最快的静态网站生成器之一。它使用 Go 语言编写,可以在毫秒级完成整个网站的构建,并且原生支持 Markdown 内容格式。
为什么选择 Hugo?
- 构建速度快 —— 数百篇文章也能在一秒内完成编译。
- 原生 Markdown —— 内容永远可以迁移,不被平台绑定。
- 内置多语言支持 —— 非常适合像本站这样的双语网站。
- 无需数据库和运行时服务器 —— 产物是纯静态 HTML,完美契合 Cloudflare Pages。
安装 Hugo
在 macOS 上可以通过 Homebrew 安装 Hugo Extended:
brew install hugo
hugo version创建新站点
hugo new site jeiii-codes
cd jeiii-codes
hugo server打开 http://localhost:1313 即可本地预览网站。
撰写第一篇文章
hugo new content posts/my-first-post.zh-cn.md然后编辑 Markdown 文件,将 draft 设为 false 并保存,Hugo 会自动刷新页面。
构建生产版本
hugo --minify生成的网站位于 public/ 目录,可以直接部署到 Cloudflare Pages。
部署到 Cloudflare Pages
Cloudflare Pages 可以连接 Git 仓库,在每次推送时自动运行 Hugo 构建,并将生成的静态文件发布到全球网络。
1. 将项目推送到 GitHub
如果项目还没有纳入 Git 仓库:
git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/<你的账号>/<你的仓库>.git
git push -u origin main2. 创建 Pages 项目
- 登录 Cloudflare 控制台,进入 Workers & Pages。
- 选择 Create → Pages → Connect to Git。
- 选择你的仓库和
main分支。 - 按下表填写构建配置:
| 配置项 | 值 |
|---|---|
| Framework preset | Hugo |
| Production branch | main |
| Build command | hugo --minify |
| Build output directory | public |
| Root directory | /(或 hugo.yaml 所在目录) |
3. 固定 Hugo 版本
Cloudflare 构建环境自带的 Hugo 版本可能与本机不同。通过环境变量显式固定版本,才能保证本地与线上构建结果一致。
进入 Pages 项目的 Settings → Environment variables,在 Production(如果使用预览部署,也建议添加到 Preview)中新增以下变量并保存:
| 变量名 | 值 |
|---|---|
HUGO_VERSION |
0.169.0 |
本项目使用 Hugo Extended v0.169.0 开发,因此 Cloudflare Pages 也固定使用同一版本。可以在本地通过以下命令确认版本:
hugo version如果 Cloudflare 暂不支持该精确版本,可以选择最接近的可用版本,或在自定义构建步骤中安装所需的 Hugo 二进制文件。
4. 部署
点击 Save and Deploy。Cloudflare 会执行 hugo --minify 并发布 public/ 目录。此后每次推送到 main 都会触发新的生产部署,Pull Request 则会生成独立的预览地址。
5. 绑定自定义域名
- 进入 Pages 项目的 Custom domains → Set up a custom domain。
- 输入域名,例如
code.example.com,按提示完成 DNS 配置。 - 将
hugo.yaml中的baseURL修改为最终域名:
baseURL: "https://code.example.com/"- 提交并推送修改。这样可以保证 canonical、
sitemap.xml、RSS 与 Open Graph 链接全部指向正式域名。
本站即采用
HUGO_VERSION=0.169.0构建,正式域名为 https://code.jeiii.us/。