[{"content":"这个博客由 Hugo 生成、托管在 Cloudflare Pages。整站是纯静态文件，构建在云端完成，写作和部署的体验都很轻。\n下面是我实际使用的流程，供同样想搭个人站点的朋友参考。\n为什么选这套组合 Hugo：单个二进制文件，构建毫秒级，不需要 Node 生态也能跑； PaperMod：简洁、支持深色模式、自带站内搜索与目录，中文排版也不错； Cloudflare Pages：连上 Git 仓库后自动构建，免费额度对个人博客绰绰有余，还自带全球 CDN 与 HTTPS。 目录结构 初始化之后的站点结构大致是这样：\nblog/ ├── hugo.toml # 站点配置 ├── archetypes/ # 新文章模板 ├── assets/ │ └── css/extended/ # 自定义样式 ├── content/ │ ├── posts/ # 文章 │ ├── about.md # 关于页 │ ├── archives.md # 归档页 │ └── search.md # 搜索页 ├── static/ # 原样拷贝到站点根目录的文件 └── themes/PaperMod/ # 主题（直接放在仓库里，无需 submodule） 本地写作与预览 新建一篇文章：\nhugo new content posts/my-new-post.md 启动本地预览（包含草稿）：\nhugo server -D 打开 http://localhost:1313 就能看到效果，改动会实时刷新。\n部署到 Cloudflare Pages 1. 把代码推到 GitHub git init git add . git commit -m \u0026#34;chore: init hugo blog\u0026#34; git branch -M main git remote add origin https://github.com/\u0026lt;你的用户名\u0026gt;/\u0026lt;仓库名\u0026gt;.git git push -u origin main 2. 在 Cloudflare Pages 创建项目 进入 Cloudflare 控制台的 Workers \u0026amp; Pages → Create → Pages → Connect to Git，选中刚才的仓库，构建配置填：\n配置项 值 Framework preset Hugo Build command hugo --gc --minify Build output directory public 环境变量 HUGO_VERSION = 0.170.0 保存后，每次 git push 都会自动构建并发布。\nPaperMod 当前版本要求 Hugo ≥ 0.158。HUGO_VERSION 不要留空，否则 Cloudflare 可能使用旧版本导致构建失败。\n3. 绑定自己的域名 在项目的 Custom domains 里添加域名，按提示在 DNS 服务商处加一条 CNAME 记录即可。HTTPS 证书会自动签发和续期。\n4. 修正 baseURL 部署成功后，把 hugo.toml 里的 baseURL 改成正式域名，再推送一次：\nbaseURL = \u0026#34;https://blog.yourdomain.com/\u0026#34; 这样 RSS、站点地图和社交卡片的绝对链接才会正确。\n命令行部署（可选） 不想连 Git 也可以直接上传构建产物：\nhugo --gc --minify npx wrangler pages deploy public --project-name wang-blog 日常写作流程 hugo new content posts/xxx.md # 1. 新建 hugo server -D # 2. 本地预览 git add . \u0026amp;\u0026amp; git commit -m \u0026#34;post: xxx\u0026#34; git push # 3. 自动部署 就这三步。工具越简单，越容易坚持下去。\n","permalink":"https://www.handejun.com/posts/hugo-cloudflare-pages/","summary":"从零到上线：Hugo 的目录结构、PaperMod 主题的常用配置，以及如何用 Cloudflare Pages 免费部署并绑定自己的域名。","title":"用 Hugo + Cloudflare Pages 搭建这个博客"},{"content":"这是一个刚刚搭建好的博客。\n从今天起，我会把那些散落在笔记软件、代码注释和聊天记录里的想法，慢慢搬到这里来。\n为什么要写 写下来的过程，本身就是一次整理。很多时候我以为自己想明白了，直到要把它写成一段别人能读懂的文字，才发现还有不少含混的地方。\n这个博客对我有三重意义：\n存档：把解决过的问题、踩过的坑记下来，下次不用重新来过； 表达：把技术之外的观察和感受，放在一个自己完全掌控的地方； 连接：如果某篇文章恰好帮到了你，那它就是有价值的。 这里会有什么 大致是三块内容：\n技术笔记：前端工程、构建工具、云原生与一些折腾过程的记录； 独立开发：做小产品时的设计取舍、成本与踩坑； 随笔：读书、生活，以及一些还没想清楚的问题。 更新频率不设目标。写得动就多写一点，写不动就少写一点，但尽量每一篇都对得起你花的时间。\n如何订阅 如果你不想错过更新，可以用任意 RSS 阅读器订阅本站，地址是：\n/index.xml 在前面加上你的博客域名即可。也可以直接收藏本页，或者在右上角切换你喜欢的深色 / 浅色主题。\n下一篇，我们来聊聊这个博客是用什么搭起来的。\n","permalink":"https://www.handejun.com/posts/hello-world/","summary":"给这个刚刚上线的博客写第一篇开篇文章：为什么重新开始写字，以及这里以后会有什么。","title":"你好，世界"},{"content":"你好，我是汉德君。\n白天写代码，晚上也偶尔写代码。日常关注前端工程化、Node.js 与云服务，喜欢把重复的事情交给工具，把省下来的时间留给阅读和散步。\n关于本站 这里是我想法的一个长期存放处。相比社交平台上的即时表达，我更喜欢博客这种节奏：写的时候慢一点，但留下来可以很久。\n站点用 Hugo 生成，主题是 PaperMod，托管在 Cloudflare Workers 上（静态资源 + 全球 CDN）。没有数据库，没有后端，全站都是静态文件，所以打开很快，也不容易坏。\n现在 在做一个还没想好名字的小工具 重读《黑客与画家》 学习把想法更快地变成可以运行的东西 关于内容 文章按主题分为技术笔记、独立开发与随笔三类，你可以在归档页按时间浏览，也可以使用搜索直接找关键词。\n如果某篇文章对你有帮助，那是我最开心的事。\n","permalink":"https://www.handejun.com/about/","summary":"\u003cp\u003e你好，我是汉德君。\u003c/p\u003e\n\u003cp\u003e白天写代码，晚上也偶尔写代码。日常关注前端工程化、Node.js 与云服务，喜欢把重复的事情交给工具，把省下来的时间留给阅读和散步。\u003c/p\u003e","title":"关于"},{"content":"这篇文章既是写作说明，也是排版样式的预览。需要时可以直接复制格式。\n标题层级 文章内标题从 ## 开始，右侧会自动生成锚点，正文上方会显示目录。\n三级标题 四级标题 强调与链接 加粗、斜体、删除线、行内代码，以及一个链接。\n列表 无序列表：\n第一项 第二项 嵌套项 另一个嵌套项 第三项 有序列表：\n先做这件事 再做那件事 最后收尾 任务列表：\n搭建站点 写第一篇文章 绑定自定义域名 引用 好的文字，是把复杂的事情说简单，而不是把简单的事情说复杂。\n—— 某位记不清名字的作者\n代码 行内代码写作 `const a = 1`。\n代码块支持语法高亮与右上角复制按钮：\nexport async function getPosts(tag) { const res = await fetch(`/index.json`); if (!res.ok) throw new Error(\u0026#34;加载失败\u0026#34;); const posts = await res.json(); return posts.filter((p) =\u0026gt; p.title.includes(tag)); } hugo new content posts/new-post.md hugo server -D 表格 语法 作用 示例 **文本** 加粗 重点 *文本* 斜体 提示 `代码` 行内代码 hugo [文字](链接) 超链接 官网 图片 ![图片说明](/images/example.png \u0026#34;可选标题\u0026#34;) 图片建议放在 static/images/ 目录下，引用时以 /images/ 开头，构建时会原样复制。\n分隔线 小提示 每篇文章的 summary 会显示在列表页，写一两句话概括即可； 太长的文章记得多用二级标题，方便生成目录； 草稿保持 draft: true，加 -D 本地预览时才会出现。 ","permalink":"https://www.handejun.com/posts/markdown-guide/","summary":"本站支持的 Markdown 语法与排版效果速查，写新文章时可以对照这份示例。","title":"写作指南：Markdown 排版速查"}]