第49课 · 零成本搭建并上线个人博客
前面数据驾驶舱那几节课，我们把系统部署到了自己购买的服务器上。但如果你只是想搭一个博客、文档站之类的小网站，其实一分钱都不用花。
这节课我们从零开始：用 Hugo 搭一个博客 → 免费部署到 Cloudflare → 绑一个免费域名，全部走通。整个方案零成本——写作工具免费、托管免费、连域名都能白嫖。
为什么要搭博客？
你可能会想：我又不想当博主，这跟我工作有什么关系？
实际上，审计/财务人员搭博客有几个很实在的好处：
- 逼自己学习：能写清楚，才算真懂。分享是最好的学习方法
- 专业知识沉淀：审计心得、实操经验写成文章，比 Word 文档更好检索和分享
- 打造个人 IP：不管是公众号还是博客，持续输出会有更多机遇找上门
- 求职加分项：跳槽时甩一个链接给 HR，比简历上写"精通 Excel"有说服力得多
- 甚至能赚钱：做得好了，付费咨询、培训、合作都会来
这节课教的静态网站部署技能也不只用于博客——你做的任何工具、文档站、作品集，都能用同样的方式免费上线。
本节要点
- 静态网站 vs 动态网站：搞清楚博客该用哪种，为什么不用买服务器
- Hugo：最快的静态网站生成器，你写 Markdown，它帮你生成一整套网页
- Cloudflare Pages：免费托管平台，把网站放到全球服务器上，自带 HTTPS
- 让 AI 全自动搭建+部署：一句话需求，AI 帮你装环境、建站、上线
- 免费域名：用 DNSHE 注册免费域名，绑定到博客，地址更好记、国内访问更稳
- 几个关键概念：域名、DNS、名称服务器（NS）、CNAME——一次讲明白
1. 静态网站 vs 动态网站
先搞清楚一个最基础的概念。
还记得第28课部署数据驾驶舱时，要连服务器、配 Nginx 吗？因为数据驾驶舱是个动态网站——每次点击、查询，都要去请求服务器上的数据库。
博客不一样。你写完一篇文章，内容就固定了，不需要每次访问都查数据库。这种场景适合静态网站。
| 动态网站 | 静态网站 | |
|---|---|---|
| 打个比方 | 餐厅点菜，厨师现做 | 便利店买便当，做好放着 |
| 内容来源 | 每次从数据库读取 | 提前生成好的 HTML 文件 |
| 需要数据库 | ✅ 需要 | ❌ 不需要 |
| 需要服务器 | ✅ 需要（一直跑着） | ❌ 不需要（文件放哪都行） |
| 速度 | 中等 | 极快（直接返回文件） |
| 适合场景 | 数据驾驶舱、审批系统、ERP | 博客、文档站、作品集 |
你现在看的这个课程网站，本身就是一个静态网站。
静态网站的好处很明显：不需要买服务器、不需要配数据库、速度还快。所以搭博客，我们用静态网站的方案。
动态网站也能免费搭
Cloudflare 其实连动态网站也支持，它甚至提供免费的数据库（比如 Dune、第三方的 Supabase）。比如这个课程网站的「许愿墙」功能，背后就是用免费的 Supabase 存数据。这些后续可以慢慢探索，这节课先从最简单的静态博客开始。
2. 三个核心工具
整个方案就三个工具，全是免费的：
| 工具 | 作用 | 类比 |
|---|---|---|
| Hugo | 生成网站 | 把你写的 Markdown「排版」成一整套网页 |
| Cloudflare Pages | 托管网站 | 把网页放到互联网上，别人能访问 |
| 域名 | 网站地址 | 门牌号，比如 nigo.cc.cd |
2.1 Hugo：静态网站生成器
Hugo 是最快的静态网站生成器。你只管写 Markdown 文章，它帮你：
- 把 Markdown 转成 HTML
- 套上主题模板（布局、配色、字体）
- 生成首页（文章列表）、归档页、标签页、搜索页
- 生成 RSS 订阅源、站点地图
你得到一整套可以直接部署的网页文件。 几千篇文章也是毫秒级生成。
选 Hugo 的理由：
- 快：毫秒级生成，几千篇文章一眨眼
- 单文件安装：装一个程序就够，不依赖一堆环境
- 主题多：几百套免费主题随便挑
- 跨平台：Mac、Windows、Linux 都支持
2.2 Cloudflare Pages：免费托管
Cloudflare 是全球最大的网络基础设施公司之一。你可能没用过它，但你平时访问的网站里，很多的安全验证、加速服务都是它家提供的。
Cloudflare Pages 是它的免费静态网站托管服务：
- 免费：个人博客的流量完全够用，一分钱不花
- 自带 HTTPS：自动配好安全证书，不用自己申请
- 全球 CDN：网页放在全球服务器上，访问快
- 不用配服务器：文件传上去就能访问，不用装系统、配 Nginx
2.3 域名：你的网站地址
部署成功后，Cloudflare 会送你一个免费地址，长这样：你的项目名.pages.dev。能用，但有点长，而且 .pages.dev 这个后缀国内访问有时不稳定。
解决办法是绑定一个自己的域名（比如 nigo.cc.cd），地址更好记，国内访问也通常更稳。这节课后面会讲怎么免费注册域名并绑定。
3. 选一个喜欢的主题
博客的外观由「主题」决定。Hugo 有几百套免费主题，先挑一个你喜欢的。
打开 Hugo 主题站（国内镜像，打开快）：
为什么用这个地址
Hugo 官方主题站是 https://themes.gohugo.io ，但它在国外，国内有时打不开或很慢。themes.gohugo.io.cn 是国内镜像，内容一样，打开快得多。
在主题站里逛逛，看哪个顺眼。这节课我们用 PaperMod 这个主题演示——它轻量、干净、功能全，很适合做博客。你也可以选别的（比如 LoveIt、Stack 等），流程都一样。
主题怎么选？
- PaperMod：简洁现代，加载快，功能够用（本课演示用这个）
- LoveIt：功能丰富，自带评论、搜索，适合内容多的博客
- Stack：卡片式布局，适合图文并茂
没有最好的主题，只有最适合你的。先随便选一个开始，以后随时能换——换主题不用改文章内容。
4. 让 AI 帮你搭建博客（推荐方式）
既然你在学 AI 编程，最省事的方式是直接让 AI 帮你从头搭好。手工步骤我们放在后面讲，先体验 AI 全自动的爽感。
4.1 新建一个博客文件夹
随便找个地方，新建一个文件夹，将来它就是你的博客项目。比如在桌面建一个 我的博客 文件夹。
4.2 打开 OpenCode，提需求
在这个文件夹里打开 OpenCode（第1课装过的），直接用大白话说你的需求：
我想用 Hugo 来制作一个自己的博客网站，然后使用 PaperMod 的主题。做好了之后，我想部署到 Cloudflare 这个网站里面，免费的。
怎么说都行
不用记什么固定格式。把你的需求说清楚就行——用什么工具、什么主题、部署到哪里、要不要免费。AI 会自己理解、查文档、规划步骤。
4.3 AI 会做什么
把需求发给它后，AI 会：
- 探索环境：检查你电脑上 Hugo、Git、Node.js 这些装了没有，没装就帮你装
- 查文档：搜索 Hugo 和 Cloudflare 的最新用法（确保步骤不过时）
- 问你几个问题：比如部署方式、站点基本信息
4.4 两个关键选择
AI 会问你两件事，提前想好答案：
① 部署方式：选哪个？
| 方式 | 说明 | 适合谁 |
|---|---|---|
| Wrangler 直接上传（本课演示） | AI 用命令行工具直接把网站传上去 | 想快速上线、没用 Git 管理的 |
| Git 集成自动部署 | 你把博客 push 到 GitHub，Cloudflare 自动部署 | 博客用 Git 管理的人 |
平时更推荐 Git 集成
如果你已经把博客用 Git 管理起来了（第20课），更推荐 Git 集成方式——以后写完文章 push 到 GitHub，Cloudflare 自动部署，文章不会丢，还有版本历史。
不过 GitHub 在国内有时连不上，需要用国内镜像。这节课为了演示完整流程，先用 Wrangler 直接上传。
② 站点基本信息：填你自己的
AI 会问博客名、副标题、作者名。比如：
- 博客名：逆行的狗
- 副标题：一条狗的逆行
- 作者：nigo
填你自己的就行，以后随时能改。
顺便说一下：思考过程（thinking）能开关
你可能会看到 AI 输出一长串「思考过程」。这是它的推理过程，不影响结果。嫌长可以用命令关掉，需要时再打开——这是 OpenCode 的一个设置，问 AI 怎么开关即可。
4.5 AI 自动执行
回答完问题，AI 就开始干活了。它会：
- 创建 Hugo 站点骨架
- 用国内镜像下载 PaperMod 主题（GitHub 直连不通时自动用镜像）
- 配置
hugo.toml（博客名、作者、菜单等） - 写一篇示例文章
- 本地构建验证（生成 20 来个页面）
GitHub 在国内经常连不上
AI 去下载 Hugo 主题时，如果卡在 GitHub（直连不通），告诉它：「GitHub 你可以使用国内镜像源」。它会换成国内镜像（如 ghfast.top）重新下载，很快就能成功。
4.6 环境检查清单
AI 在搭的过程中，会帮你确认这些工具都装好了。如果某个没装，它会帮你装：
| 工具 | 作用 | 安装命令（Mac） |
|---|---|---|
| Hugo | 生成网站 | brew install hugo |
| Git | 版本管理（下载主题要用） | brew install git |
| Node.js | 运行 Wrangler | 见第4课 |
| Wrangler | 部署到 Cloudflare | npm install -g wrangler |
Windows 用户：Hugo 用 choco install hugo-extended，Git 去 https://git-scm.com 下载。
5. 注册 Cloudflare 账号
部署前，你需要一个 Cloudflare 账号。
- 打开 https://dash.cloudflare.com/sign-up
- 用邮箱注册，或者用 GitHub / Google 账号快捷登录（更方便）
别用百度搜
要注册 Cloudflare，直接在浏览器地址栏输入上面的网址。别在百度里搜「Cloudflare」——搜出来一堆广告，容易点错。地址栏直接输入网址最靠谱。
注册完，你就有 Cloudflare 账号了。后面部署时 AI 会让你授权一次（点一下 Allow 就行）。
6. 部署上线
账号有了，让 AI 继续部署。它会执行这几步（你也可以让 AI 一步步教你手工操作，效果一样）：
6.1 让 AI 部署
直接对 AI 说：
帮我把博客部署到 Cloudflare Pages
AI 会：
- 用
hugo命令重新构建网站 - 用
wrangler pages deploy把public/目录传到 Cloudflare - 首次会弹出浏览器让你授权登录——点 Authorize / Allow 就行
- 上传完成，给你一个网址
整个过程你只点了一下授权，剩下全是 AI 自动完成。
6.2 访问你的博客
部署成功后，AI 会给你一个地址，类似：
https://你的项目名.pages.dev浏览器打开，你的博客就上线了！把链接发给别人，全世界都能访问。
6.3 想手工部署？命令长这样
了解原理的话，手工部署就四步：
npm install -g wrangler # ① 安装部署工具（只需一次）
wrangler login # ② 登录授权（只需一次，会弹浏览器）
hugo # ③ 构建网站
wrangler pages deploy public --project-name 你的项目名 # ④ 部署上线以后每次写完新文章，只需要重复第 ③④ 步：
hugo
wrangler pages deploy public --project-name 你的项目名Hugo 生成是毫秒级，上传也就几秒，整个流程不到一分钟。
6.4 几个能继续优化的地方
博客上线后，你会发现有些地方还不完美，都可以让 AI 帮你改：
- 搜索功能用不了：问 AI「搜索怎么才能用」
- 社交媒体链接：在
hugo.toml里配上你的 GitHub、公众号等 - 菜单、配色、字体：告诉 AI 你想要什么样的，它帮你调
这些都是小调整，不用重新走整个流程。
7. 注册免费域名并绑定
你的博客现在能访问了，但地址是 xxx.pages.dev，又长，国内访问还可能不稳。下面我们绑定一个免费的自有域名。
先讲清楚几个概念，不然后面的操作会懵。
7.1 几个必须懂的概念
| 概念 | 通俗解释 |
|---|---|
| 域名 | 网站地址，比如 nigo.cc.cd。就像你家的门牌号 |
| 子域名 | 域名前面加前缀，比如 bbs.auditdog.cn、music.auditdog.cn。一个主域名能配出无数个子域名 |
| DNS 解析 | 把域名翻译成服务器 IP 地址的过程，相当于「查通讯录」 |
| 名称服务器（NS） | 告诉互联网「这个域名归谁管」。把 NS 指向 Cloudflare，就是让 Cloudflare 帮你管这个域名的所有解析 |
| CNAME 记录 | DNS 里的一种记录，作用是「把一个域名指向另一个域名」，比如把 nigo.cc.cd 指向 你的博客.pages.dev |
理解了这些，后面的操作就顺理成章了。
7.2 域名从哪来？三种方案
| 方案 | 费用 | 特点 |
|---|---|---|
| DNSHE 免费域名（本课演示） | 免费 | 国内能访问、注册快；到期前需续期，可找自动续签工具 |
| 国内厂商付费域名（腾讯云/阿里云） | 首年 1 元起，续费几十/年 | 稳定、好名字多、需实名认证 |
| 直接用 Cloudflare 默认域名 | 免费 | 不用折腾，但 .pages.dev 国内访问不稳 |
之前教程里的免费域名网站打不开？
旧的文字版教程推荐过 DigitalPlat（register.dpdsn.org）注册 .dpdns.org 域名，但这个网站在国内打不开。所以本课改用 DNSHE，国内能正常访问。
7.3 方案一：DNSHE 注册免费域名
DNSHE 是一个国内能访问的免费域名平台。注册流程：
- 注册账号：打开 https://my.dnshe.com/ ，用邮箱注册（支持谷歌、微软、腾讯、网易等邮箱）
- 邮箱验证：填验证码完成验证
- 注册前验证：免费域名需要先验证身份——用 GitHub 快捷认证（没邀请码的话选这个）
- 选根域名后缀：有
cc.cd、ddns.net、bot.cd等可选。这些后缀都不算「好域名」，但白嫖嘛，够用 - 输入你想要的前缀：比如
nigo，组合起来就是nigo.cc.cd - 完成注册
注册额度不够？用专属兑换码 AUDITDOG 额外领 +2
DNSHE 免费域名的注册额度有限。我（狗哥）已经和官方联网申请了课程专属额度，你在「域名管理 → 奖励中心 → 额度兑换」里输入兑换码，每人可额外获得 +2 注册额度：
兑换码：AUDITDOG
输入位置：域名页面 → 奖励中心 → 额度兑换
每位用户可使用一次。
除了兑换码，奖励中心里还有几个任务（绑定 TOTP、完善资料、分享 X.com、Star GitHub 仓库等），完成都能领注册额度，多多益善。
免费域名要记得续期
DNSHE 的免费域名不是永久有效——到期前一段时间（约 180 天）需要手动续期。忘了续就失效了。
解决办法：在 GitHub 上搜「DNSHE 自动续签」，有现成的自动续签助手项目，配置好后能自动帮你续，省得记日子。
7.4 方案二：国内厂商买付费域名（更稳）
如果你不想折腾免费域名的续期，花点小钱买个付费域名更省心：
价格不贵，几十到一百多一年。买完在「DNS 解析」里，可以把主域名配出各种子域名，比如 bbs.你的域名 给论坛、music.你的域名 给音乐站——一个域名的钱，配出无数个地址。
买完域名后，告诉 AI：「我在腾讯云买了域名 XXX，要绑定到我部署在 Cloudflare 的博客，怎么做？」AI 会一步步教你。
8. 把域名绑定到博客
注册好域名后，分三步把它接到博客上。这步可以手工操作，也可以让 AI 代劳——先讲手工，原理清楚了让 AI 做更放心。
8.1 第一步：把域名添加到 Cloudflare
- 登录 Cloudflare：https://dash.cloudflare.com
- 点 添加站点 / Add a site（或「连接域名」）
- 输入你的域名（比如
nigo.cc.cd） - 选 Free 免费计划
- 一路继续，到「继续前往激活」
- Cloudflare 会给你两个名称服务器（NS），长这样：
aida.ns.cloudflare.com devin.ns.cloudflare.com
这两个 NS 是什么
这是 Cloudflare 分配给你域名的「管家」。下一步你要去域名注册商那里，把域名的管家改成这两个，Cloudflare 才能接管你的域名。
8.2 第二步：去注册商改名称服务器
回到 DNSHE（或你买域名的平台），找到域名的 NS / 名称服务器设置（注意：是改「名称服务器」，不是「DNS 记录/解析记录」）：
- 把原有的 NS 替换成 Cloudflare 给的那两个
- 保存
别改错了地方
要改的是**「名称服务器 / Nameservers」**，不是「DNS 记录」「解析记录」。这两个是不同的东西：
- 名称服务器：决定「整个域名归谁管」——这个要改成 Cloudflare 的
- DNS 记录：具体的解析规则——这个不用你管，Cloudflare 接管后会自动配
8.3 第三步：回 Cloudflare 激活
- 回 Cloudflare，点 「我已更新名称服务器」 → 「立即检查名称服务器」
- 等几分钟（可能显示「名称服务器无效」，刷新几次就好）
- 状态变成 Active（活跃）就成功了
8.4 第四步：绑定到 Pages 项目
域名托管到 Cloudflare 后，把它连到博客：
- Cloudflare 左侧菜单 → Workers 和 Pages
- 点进你的博客项目（比如
nigo-blog） - 顶部 自定义域 / Custom domains → 设置自定义域
- 输入你的域名（比如
nigo.cc.cd）→ 继续
Cloudflare 会自动添加所需的 CNAME 记录，并自动签发 HTTPS 证书（几分钟）。
不想手工？让 AI 做
绑定这步，直接告诉 AI：「我在 Cloudflare 已经添加了 nigo.cc.cd，帮我绑定到博客」。AI 能用它的工具自动完成域名绑定、加 CNAME 记录，你只需要去注册商改 NS（这一步 AI 没权限，必须你手工）。
8.5 最后：更新 baseURL 并重新部署
绑定成功后，把 hugo.toml 里的 baseURL 改成你的新域名：
baseURL = "https://nigo.cc.cd/"然后让 AI 重新构建部署（或手工 hugo + wrangler pages deploy）。等证书签发完，打开 https://你的域名，博客就用上了你自己的专属地址。
baseURL 是什么？为什么重要
baseURL 是你博客上线后的网址。Hugo 生成的所有链接（文章页、CSS、字体）都基于它。写错了网站会显示空白或样式乱掉。换域名后一定要同步改这里。
9. 后续：把博客变成日常工具
博客搭好上线，只是开始。接下来你可以让它更好用：
9.1 用 Skill 把写作流程自动化
以后写博客，手动复制粘贴很烦。你可以让 AI 做一个 Skill 工作流：
我以后要写这个博客，文章文件怎么放？帮我做一个 Skill 工作流。
这样你用 Markdown 编辑器（Typora、Obsidian 等）写完，调用这个 Skill，它自动把文章放到正确位置、构建、部署到 Cloudflare，全自动。
9.2 在 Obsidian 里直接写
如果你用 Obsidian 记笔记（比如我平时把微信公众号文章写在 Obsidian 里），配合 AI 插件，可以直接在 Obsidian 里调用 AI 帮你写、写完一键发布到博客或公众号，全程不用切换工具。
9.3 这套技能还能干什么
这节课的方案不只能搭博客：
- 文档站：项目交付文档、操作手册，放一个链接比发一堆 PDF 方便
- 作品集：求职时展示自己的项目
- 小型系统：配合免费数据库，也能搭需要交互的小工具
核心都是「静态网站 + Cloudflare 免费托管」这套组合拳。
常见问题
部署后网站显示空白 / 样式乱了
原因：baseURL 配置错误——这是最常见的问题。
解决：检查 hugo.toml 里的 baseURL，确保和你的实际地址完全一致（含 https://）。改完重新 hugo 构建并部署。
GitHub 连不上，主题下载失败
原因：GitHub 在国内经常连不上。
解决：告诉 AI「GitHub 用国内镜像源」，它会换镜像（如 ghfast.top）重新下载。
.pages.dev 国内打不开 / 很慢
原因：Cloudflare 默认域名在国内访问不稳定。
解决：按第7、8节绑定一个自己的域名，通常能明显改善。
自定义域名显示错误 / 打不开
原因：DNS 还没生效，或证书还在签发。
解决：
- 确认 Cloudflare 里域名状态是 Active
- 确认 NS 已经在注册商改好
- 等待 DNS 传播和证书签发（通常几分钟到几十分钟）
- 在 Pages 的「自定义域」页面看域名状态
免费域名过期了
原因：DNSHE 免费域名需要定期续期，忘了就失效。
解决：到期前去 DNSHE 手动续期，或配置 GitHub 上的「DNSHE 自动续签」工具。
小结
这节课你完成了从零到上线的完整闭环：
- 搞懂了静态网站：博客用静态网站，不用买服务器、不用数据库
- 认识了三个工具：Hugo（生成网站）、Cloudflare Pages（免费托管）、域名（地址）
- 让 AI 全自动搭建：一句话需求，AI 帮你建站、配置、部署
- 博客上线：访问
xxx.pages.dev就能看到你的博客 - 绑定免费域名：DNSHE 注册免费域名 → 改 NS 托管到 Cloudflare → 绑定 Pages 项目
- 零成本闭环：Hugo（免费）+ Cloudflare Pages（免费）+ DNSHE 域名（免费）
整个流程不花一分钱，你就拥有了一个专属的、全世界都能访问的个人博客。更重要的是，你掌握了「静态网站 + 免费托管」这套技能——以后任何文档站、作品集、小工具，都能用同样的方式免费上线。