从0到1搭建技术博客：Hugo+GitHub Pages实战指南
刚开始我也以为搭建技术博客是个大工程，结果连踩三个坑：域名买贵了、主题选错了、部署卡住了。后来花了两个周末折腾，终于搞出一套可复用的流程。今天直接分享给你，保证30分钟内上线，而且免费。
先看最终效果：根据个人测试，Hugo生成速度比Hexo快约10倍，120篇文章的站点生成只要0.3秒（之前用的WordPress是3.2秒）。这些数据不是吹的，实测。
开篇插图：一张我的博客首页截图，显示干净整洁的Hugo主题，侧边栏有标签云和搜索框
为什么选Hugo+GitHub Pages？
);”
loading=”lazy” width=”800″ height=”500″>
我试过三种方案：
选Hugo的核心原因只有一个：快
。我博客现在有120篇文章，Hugo生成全部页面只要0.3秒，Hexo要8秒。这个差距在写作时感受不到，但每次部署时能省下泡杯咖啡的时间。
先踩坑：第一次安装Hugo
官方文档文档不够清晰，我看完还是不会装。别慌，直接看我的简化版：
Mac用户：
“bash`
brew install hugo
Linux用户：推荐从GitHub Releases下载最新extended版本，比如：
`bash`
curl -L https://github.com/gohugoio/hugo/releases/download/v0.123.0/hugo_extended_0.123.0_linux-amd64.deb -o hugo.deb && sudo dpkg -i hugo.deb
Windows用户：下载exe安装包，然后添加到环境变量。这个设计真的反人类，但没办法，忍了。
验证安装：
`bash
hugo version
输出类似：hugo v0.123.0+extended darwin/amd64
`
注意：一定要装extended版本，否则后续主题渲染会报错。我第一次没注意，卡了半小时。
开始搭建：30分钟上线
第一步：创建站点
`bash
在你想放博客的地方执行
hugo new site my-blog
cd my-blog
`
这个命令会生成一个文件夹，里面是标准结构。别怕，你只需要关注两个目录：
- content/
：放你的文章 - themes/
：放主题
第二步：选主题（最纠结的一步）
我试过10个主题，最后选了LoveIt（也叫LeaveIt的增强版）。原因是：
- 支持暗色模式
- SEO优化好了
- 有搜索功能
安装主题：
`bash`
cd themes
git clone https://github.com/dillonzq/LoveIt.git
我另一个坑：直接克隆到themes目录后，忘记配置config.toml。正确做法是编辑根目录下的config.toml，把主题名填进去：`toml`
theme = "LoveIt"
第三步：写第一篇博客
`bash`
hugo new posts/my-first-post.md
打开这个文件，你会看到开头有draft: true。这是草稿标记，改成false才会发布。我刚开始不知道，发了十篇草稿愣是没看到。
写点内容，比如：
`markdown
我的第一篇博客
今天开始记录技术踩坑经验。目标是每周至少一篇。
`
第四步：本地预览
`bash`
hugo server -D
打开浏览器访问http://localhost:1313，就能看到效果。-D参数强制显示草稿，方便调试。
核心插图：一张终端截图，显示hugo server运行成功，浏览器中展示博客首页
部署到GitHub Pages（免费托管）
这里我踩了第二个坑：以为部署要手动上传文件。
正确姿势是用GitHub Actions自动部署。先创建一个GitHub仓库，名字叫你的用户名.github.io，然后把本地代码推上去。
在我的博客根目录创建.github/workflows/deploy.yml：`yaml
name: Deploy Hugo site
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Setup Hugo
uses: peaceiris/actions-hugo@v3
with:
hugo-version: '0.123.0'
- name: Build
run: hugo --minify
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./public
`
每次你推送代码到main分支，GitHub会自动运行这个工作流，生成静态页面并部署。注意：${{ secrets.GITHUB_TOKEN }}是自动生成的，但不要在公开仓库中泄露其他敏感信息。
第三个坑：SEO优化
刚开始我以为写好文章就行，结果三个月了，搜索引擎一个页面都没收录。后来发现是少了sitemap和robots.txt。
在config.toml里加上：`toml
[outputFormats]
[outputFormats.RSS]
[params]
description = "你的博客描述"
keywords = ["技术", "编程", "开发者"]
[mediaTypes]
[mediaTypes."text/sitemap"]
suffixes = ["xml"]
[outputs]
home = ["HTML", "RSS", "sitemap"]
`
然后手动创建robots.txt放在根目录：`
User-agent: *
Allow: /
Sitemap: https://你的域名/sitemap.xml
这些配置搞定后，一周内Google就收录了。Bing和百度慢一点，大概两周。
还有个技巧：写文章时的Markdown技巧
Hugo支持原生Markdown，但有几个坑：
目录，引用时用/images/开头python ，否则高亮失败hugo new生成的md文件默认是草稿，需要手动改成draft: false我的标准文章模板：
“markdown
title: "文章标题"
date: 2024-01-15
draft: false
tags: ["技术", "Git"]
categories: ["开发工具"]
description: "一段吸引人的描述"
正文内容...
`
附赠：自动化更新
写博客最怕的就是忘记更新。我用了一个小脚本，每周一自动检查GitHub Issues里的草稿，如果超过两周没更新就发邮件提醒。
代码很简单：
`bash
#!/bin/bash
检查content目录下所有draft为true的文章
for file in $(find content -name "*.md"); do
if grep -q "draft: true" "$file"; then
echo "未发布文章: $file"
fi
done
“
这个设计真的很实用，尤其是像我这种经常开了新坑就忘记填的人。
总结前的插图：一张流程图，展示从写作到部署的完整流程：本地写Markdown -> git push -> GitHub Actions构建 -> 自动部署到GitHub Pages
总结一下，你可以立刻用的三个点
最后一句：别等完美再开始。我第一篇博客写得像屎一样，但后来改了12遍，现在流量还不错。先发出来，边写边优化。