本文将详细记录我在Windows环境下使用Hugo静态网站生成器和GitHub Pages搭建个人博客的全过程，包含多分支管理策略和自动化部署方案。
环境准备
1. 安装Hugo Extended
推荐使用扩展版Hugo以获得完整的SCSS支持：
1
2
| # 验证安装（需≥0.83.0）
hugo version
|
2. 初始化Git仓库
1
2
3
| hugo new site myblog
cd myblog
git init
|
主题配置
使用Stack主题（子模块方式）
1
2
| git submodule add https://github.com/CaiJimmy/hugo-theme-stack/ themes/stack
Copy-Item themes/stack/exampleSite/config.yaml ./config.yaml -Recurse
|
关键配置项：
1
2
3
4
5
6
7
| baseURL: "https://n10dz.github.io/"
theme: stack
params:
sidebar:
enabled: true
social:
GitHub: "https://github.com/n10dz/n10dz.github.io"
|
分支策略
采用双分支管理：
main 分支：存放Hugo源文件gh-blog 分支：存放生成的静态页面
1
2
3
4
5
6
| # 创建干净的分支
git checkout --orphan gh-blog
git rm -rf .
echo "# Blog Pages" > README.md
git add . && git commit -m "Init pages branch"
git checkout -b main
|
部署流程
1. 推送源码到main分支
1
2
3
4
| git remote add origin https://github.com/n10dz/n10dz.github.io.git
git add .
git commit -m "Initial commit"
git push -u origin main
|
2. 生成并部署静态页面
1
2
3
4
5
6
7
8
| hugo -D # 生成到public目录
cd public
git init
git checkout -b gh-blog
git add .
git commit -m "Deploy: $(date "+%Y-%m-%d %H:%M")"
git push origin gh-blog --force
|
自动化部署（可选）
在.github/workflows/deploy.yml添加GitHub Actions：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| name: Auto Deploy
on: [push]
jobs:
build-deploy:
runs-on: windows-latest
steps:
- uses: actions/checkout@v4
with:
submodules: true
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: 'latest'
extended: true
- name: Build
run: hugo --minify
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_branch: gh-blog
|
注意事项
- 必须使用Hugo Extended版本
- 主题建议通过submodule方式引入
- GitHub Pages的发布分支需要设置为
gh-blog - 每次更新内容后需要：
- 提交源码到main分支
- 重新生成并提交public目录到gh-blog分支
成果预览
访问你的GitHub Pages地址：
https://n10dz.github.io
至此，你已经拥有了一个完全免费、可自定义且支持自动化部署的现代博客系统。接下来可以开始创作你的技术文章啦！
