下面是我实际使用的流程，供同样想搭个人站点的朋友参考。

为什么选这套组合

• 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，选中刚才的仓库，构建配置填：

保存后，每次 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. 自动部署

就这三步。工具越简单，越容易坚持下去。

从今天起，我会把那些散落在笔记软件、代码注释和聊天记录里的想法，慢慢搬到这里来。

为什么要写

写下来的过程，本身就是一次整理。很多时候我以为自己想明白了，直到要把它写成一段别人能读懂的文字，才发现还有不少含混的地方。

这个博客对我有三重意义：

1. 存档：把解决过的问题、踩过的坑记下来，下次不用重新来过；
2. 表达：把技术之外的观察和感受，放在一个自己完全掌控的地方；
3. 连接：如果某篇文章恰好帮到了你，那它就是有价值的。

这里会有什么

大致是三块内容：

• 技术笔记：前端工程、构建工具、云原生与一些折腾过程的记录；
• 独立开发：做小产品时的设计取舍、成本与踩坑；
• 随笔：读书、生活，以及一些还没想清楚的问题。

更新频率不设目标。写得动就多写一点，写不动就少写一点，但尽量每一篇都对得起你花的时间。

如何订阅

如果你不想错过更新，可以用任意 RSS 阅读器订阅本站，地址是：

/index.xml

在前面加上你的博客域名即可。也可以直接收藏本页，或者在右上角切换你喜欢的深色 / 浅色主题。

下一篇，我们来聊聊这个博客是用什么搭起来的。

白天写代码，晚上也偶尔写代码。日常关注前端工程化、Node.js 与云服务，喜欢把重复的事情交给工具，把省下来的时间留给阅读和散步。

关于本站

这里是我想法的一个长期存放处。相比社交平台上的即时表达，我更喜欢博客这种节奏：写的时候慢一点，但留下来可以很久。

站点用 Hugo 生成，主题是 PaperMod，托管在 Cloudflare Workers 上（静态资源 + 全球 CDN）。没有数据库，没有后端，全站都是静态文件，所以打开很快，也不容易坏。

现在

• 在做一个还没想好名字的小工具
• 重读《黑客与画家》
• 学习把想法更快地变成可以运行的东西

关于内容

文章按主题分为技术笔记、独立开发与随笔三类，你可以在归档页按时间浏览，也可以使用搜索直接找关键词。

如果某篇文章对你有帮助，那是我最开心的事。

标题层级

文章内标题从 ## 开始，右侧会自动生成锚点，正文上方会显示目录。

三级标题

四级标题

强调与链接

加粗、斜体、删除线、行内代码，以及一个链接。

列表

无序列表：

• 第一项
• 第二项
  • 嵌套项
  • 另一个嵌套项
• 第三项

有序列表：

1. 先做这件事
2. 再做那件事
3. 最后收尾

任务列表：

• 搭建站点
• 写第一篇文章
• 绑定自定义域名

引用

好的文字，是把复杂的事情说简单，而不是把简单的事情说复杂。

—— 某位记不清名字的作者

代码

行内代码写作 `const a = 1`。

代码块支持语法高亮与右上角复制按钮：

export async function getPosts(tag) {
  const res = await fetch(`/index.json`);
  if (!res.ok) throw new Error("加载失败");

  const posts = await res.json();
  return posts.filter((p) => p.title.includes(tag));
}

hugo new content posts/new-post.md
hugo server -D

表格

图片

![图片说明](/images/example.png "可选标题")

图片建议放在 static/images/ 目录下，引用时以 /images/ 开头，构建时会原样复制。

分隔线

小提示

• 每篇文章的 summary 会显示在列表页，写一两句话概括即可；
• 太长的文章记得多用二级标题，方便生成目录；
• 草稿保持 draft: true，加 -D 本地预览时才会出现。