[{"content":"概述 这是一篇 Hugo + PaperMod 主题的完整写作示范，展示了所有常用 Markdown 格式的效果。你可以基于此模板改写自己的文章。\n文字排版 加粗文字、斜体文字、删除线、行内代码。\n这是一段引用块。可以用来强调重要内容，或者引用别人的话。\n—— 可以有多行\n列表 无序列表：\n第一项 第二项 嵌套子项 另一个子项 有序列表：\n第一步 第二步 第三步 图片演示 方式一：Markdown 语法 方式二：HTML 精确控制 方式三：PaperMod figure shortcode 湖边风景拍摄于某个周末的下午\n代码块 Go 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 package main import \u0026#34;fmt\u0026#34; func main() { fmt.Println(\u0026#34;Hello, 小黄!\u0026#34;) // 计算斐波那契数列 for i := 0; i \u0026lt; 10; i++ { fmt.Printf(\u0026#34;fib(%d) = %d\\n\u0026#34;, i, fib(i)) } } func fib(n int) int { if n \u0026lt;= 1 { return n } return fib(n-1) + fib(n-2) } Python 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 def quick_sort(arr): \u0026#34;\u0026#34;\u0026#34;快速排序\u0026#34;\u0026#34;\u0026#34; if len(arr) \u0026lt;= 1: return arr pivot = arr[len(arr) // 2] left = [x for x in arr if x \u0026lt; pivot] middle = [x for x in arr if x == pivot] right = [x for x in arr if x \u0026gt; pivot] return quick_sort(left) + middle + quick_sort(right) # 测试 print(quick_sort([3, 6, 8, 10, 1, 2, 1])) # 输出: [1, 1, 2, 3, 6, 8, 10] JavaScript 代码 1 2 3 4 5 6 7 8 9 10 11 12 13 // 防抖函数 function debounce(fn, delay = 300) { let timer = null; return function (...args) { clearTimeout(timer); timer = setTimeout(() =\u0026gt; fn.apply(this, args), delay); }; } // 使用示例 const handleSearch = debounce((keyword) =\u0026gt; { console.log(\u0026#39;搜索:\u0026#39;, keyword); }, 500); Shell 命令 1 2 3 4 5 6 7 8 # 部署博客 hugo --minify git add . git commit -m \u0026#34;post: 新文章\u0026#34; git push # 本地预览 hugo server -D 表格 格式 语法 效果 加粗 **文字** 文字 斜体 *文字* 文字 代码 `code` code 链接 [文本](url) 链接 图片 ![alt](url) 显示图片 视频演示 方式一：HTML5 原生视频 您的浏览器不支持 HTML5 视频，请 下载观看。 方式二：B站嵌入 方式三：YouTube 嵌入 提示框 提示：这是一条提示信息，用于补充说明。\n警告：这是一条警告信息，用于提醒注意事项。\n数学公式 行内公式：$E = mc^2$\n块级公式：\n$$ \\int_{-\\infty}^{\\infty} e^{-x^2} dx = \\sqrt{\\pi} $$\n任务列表 搭建博客 配置主题 部署上线 写更多文章 绑定自定义域名 总结 以上就是 Hugo + PaperMod 支持的常用 Markdown 格式。写文章时只需要：\n把文章放在 content/posts/文章标题/index.md 图片放在同目录的 images/ 文件夹 视频可以自托管或用 B站/YouTube 嵌入 push 后自动部署上线 开始写你的第一篇文章吧！\n","permalink":"https://xiaohuang-blog.pages.dev/posts/demo-post/","summary":"\u003ch2 id=\"概述\"\u003e概述\u003c/h2\u003e\n\u003cp\u003e这是一篇 Hugo + PaperMod 主题的完整写作示范，展示了所有常用 Markdown 格式的效果。你可以基于此模板改写自己的文章。\u003c/p\u003e\n\u003ch2 id=\"文字排版\"\u003e文字排版\u003c/h2\u003e\n\u003cp\u003e\u003cstrong\u003e加粗文字\u003c/strong\u003e、\u003cem\u003e斜体文字\u003c/em\u003e、\u003cdel\u003e删除线\u003c/del\u003e、\u003ccode\u003e行内代码\u003c/code\u003e。\u003c/p\u003e\n\u003cblockquote\u003e\n\u003cp\u003e这是一段引用块。可以用来强调重要内容，或者引用别人的话。\u003c/p\u003e\n\u003cp\u003e—— 可以有多行\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003ch3 id=\"列表\"\u003e列表\u003c/h3\u003e\n\u003cp\u003e无序列表：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e第一项\u003c/li\u003e\n\u003cli\u003e第二项\n\u003cul\u003e\n\u003cli\u003e嵌套子项\u003c/li\u003e\n\u003cli\u003e另一个子项\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e有序列表：\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e第一步\u003c/li\u003e\n\u003cli\u003e第二步\u003c/li\u003e\n\u003cli\u003e第三步\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch2 id=\"图片演示\"\u003e图片演示\u003c/h2\u003e\n\u003ch3 id=\"方式一markdown-语法\"\u003e方式一：Markdown 语法\u003c/h3\u003e\n\u003cp\u003e\u003cimg alt=\"风景图片\" loading=\"lazy\" src=\"images/landscape.jpg\" title=\"一张美丽的风景\"\u003e\u003c/p\u003e\n\u003ch3 id=\"方式二html-精确控制\"\u003e方式二：HTML 精确控制\u003c/h3\u003e\n\u003cimg src=\"images/landscape.jpg\" alt=\"风景\" width=\"600\" loading=\"lazy\"\u003e\n\u003ch3 id=\"方式三papermod-figure-shortcode\"\u003e方式三：PaperMod figure shortcode\u003c/h3\u003e\n\u003cfigure\u003e\n    \u003cimg loading=\"lazy\" src=\"images/landscape.jpg\"\n         alt=\"拍摄于某个周末的下午\"/\u003e \u003cfigcaption\u003e\n            湖边风景\u003cp\u003e拍摄于某个周末的下午\u003c/p\u003e\n        \u003c/figcaption\u003e\n\u003c/figure\u003e\n\n\u003ch2 id=\"代码块\"\u003e代码块\u003c/h2\u003e\n\u003ch3 id=\"go-代码\"\u003eGo 代码\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cdiv class=\"chroma\"\u003e\n\u003ctable class=\"lntable\"\u003e\u003ctr\u003e\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode\u003e\u003cspan class=\"lnt\"\u003e 1\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 2\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 3\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 4\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 5\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 6\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 7\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 8\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 9\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e10\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e11\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e12\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e13\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e14\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e15\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e16\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e17\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e18\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e19\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-go\" data-lang=\"go\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"kn\"\u003epackage\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nx\"\u003emain\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"kn\"\u003eimport\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026#34;fmt\u0026#34;\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"kd\"\u003efunc\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nf\"\u003emain\u003c/span\u003e\u003cspan class=\"p\"\u003e()\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e    \u003c/span\u003e\u003cspan class=\"nx\"\u003efmt\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nf\"\u003ePrintln\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026#34;Hello, 小黄!\u0026#34;\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e    \u003c/span\u003e\u003cspan class=\"c1\"\u003e// 计算斐波那契数列\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e    \u003c/span\u003e\u003cspan class=\"k\"\u003efor\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nx\"\u003ei\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"o\"\u003e:=\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"mi\"\u003e0\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nx\"\u003ei\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"p\"\u003e\u0026lt;\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"mi\"\u003e10\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nx\"\u003ei\u003c/span\u003e\u003cspan class=\"o\"\u003e++\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e        \u003c/span\u003e\u003cspan class=\"nx\"\u003efmt\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nf\"\u003ePrintf\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s\"\u003e\u0026#34;fib(%d) = %d\\n\u0026#34;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nx\"\u003ei\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nf\"\u003efib\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003ei\u003c/span\u003e\u003cspan class=\"p\"\u003e))\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e    \u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"kd\"\u003efunc\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nf\"\u003efib\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003en\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kt\"\u003eint\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"kt\"\u003eint\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e    \u003c/span\u003e\u003cspan class=\"k\"\u003eif\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nx\"\u003en\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"o\"\u003e\u0026lt;=\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"mi\"\u003e1\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"p\"\u003e{\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e        \u003c/span\u003e\u003cspan class=\"k\"\u003ereturn\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nx\"\u003en\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e    \u003c/span\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"w\"\u003e    \u003c/span\u003e\u003cspan class=\"k\"\u003ereturn\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nf\"\u003efib\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003en\u003c/span\u003e\u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mi\"\u003e1\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"o\"\u003e+\u003c/span\u003e\u003cspan class=\"w\"\u003e \u003c/span\u003e\u003cspan class=\"nf\"\u003efib\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003en\u003c/span\u003e\u003cspan class=\"o\"\u003e-\u003c/span\u003e\u003cspan class=\"mi\"\u003e2\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\u003cspan class=\"w\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003c/div\u003e\u003ch3 id=\"python-代码\"\u003ePython 代码\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cdiv class=\"chroma\"\u003e\n\u003ctable class=\"lntable\"\u003e\u003ctr\u003e\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode\u003e\u003cspan class=\"lnt\"\u003e 1\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 2\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 3\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 4\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 5\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 6\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 7\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 8\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 9\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e10\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e11\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e12\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e13\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-python\" data-lang=\"python\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"k\"\u003edef\u003c/span\u003e \u003cspan class=\"nf\"\u003equick_sort\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"n\"\u003earr\u003c/span\u003e\u003cspan class=\"p\"\u003e):\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"s2\"\u003e\u0026#34;\u0026#34;\u0026#34;快速排序\u0026#34;\u0026#34;\u0026#34;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"nb\"\u003elen\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"n\"\u003earr\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e\u0026lt;=\u003c/span\u003e \u003cspan class=\"mi\"\u003e1\u003c/span\u003e\u003cspan class=\"p\"\u003e:\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e        \u003cspan class=\"k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"n\"\u003earr\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"n\"\u003epivot\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"n\"\u003earr\u003c/span\u003e\u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"nb\"\u003elen\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"n\"\u003earr\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e//\u003c/span\u003e \u003cspan class=\"mi\"\u003e2\u003c/span\u003e\u003cspan class=\"p\"\u003e]\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"n\"\u003eleft\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"n\"\u003ex\u003c/span\u003e \u003cspan class=\"k\"\u003efor\u003c/span\u003e \u003cspan class=\"n\"\u003ex\u003c/span\u003e \u003cspan class=\"ow\"\u003ein\u003c/span\u003e \u003cspan class=\"n\"\u003earr\u003c/span\u003e \u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"n\"\u003ex\u003c/span\u003e \u003cspan class=\"o\"\u003e\u0026lt;\u003c/span\u003e \u003cspan class=\"n\"\u003epivot\u003c/span\u003e\u003cspan class=\"p\"\u003e]\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"n\"\u003emiddle\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"n\"\u003ex\u003c/span\u003e \u003cspan class=\"k\"\u003efor\u003c/span\u003e \u003cspan class=\"n\"\u003ex\u003c/span\u003e \u003cspan class=\"ow\"\u003ein\u003c/span\u003e \u003cspan class=\"n\"\u003earr\u003c/span\u003e \u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"n\"\u003ex\u003c/span\u003e \u003cspan class=\"o\"\u003e==\u003c/span\u003e \u003cspan class=\"n\"\u003epivot\u003c/span\u003e\u003cspan class=\"p\"\u003e]\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"n\"\u003eright\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"p\"\u003e[\u003c/span\u003e\u003cspan class=\"n\"\u003ex\u003c/span\u003e \u003cspan class=\"k\"\u003efor\u003c/span\u003e \u003cspan class=\"n\"\u003ex\u003c/span\u003e \u003cspan class=\"ow\"\u003ein\u003c/span\u003e \u003cspan class=\"n\"\u003earr\u003c/span\u003e \u003cspan class=\"k\"\u003eif\u003c/span\u003e \u003cspan class=\"n\"\u003ex\u003c/span\u003e \u003cspan class=\"o\"\u003e\u0026gt;\u003c/span\u003e \u003cspan class=\"n\"\u003epivot\u003c/span\u003e\u003cspan class=\"p\"\u003e]\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"n\"\u003equick_sort\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"n\"\u003eleft\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"n\"\u003emiddle\u003c/span\u003e \u003cspan class=\"o\"\u003e+\u003c/span\u003e \u003cspan class=\"n\"\u003equick_sort\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"n\"\u003eright\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"c1\"\u003e# 测试\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"nb\"\u003eprint\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"n\"\u003equick_sort\u003c/span\u003e\u003cspan class=\"p\"\u003e([\u003c/span\u003e\u003cspan class=\"mi\"\u003e3\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mi\"\u003e6\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mi\"\u003e8\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mi\"\u003e10\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mi\"\u003e1\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mi\"\u003e2\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"mi\"\u003e1\u003c/span\u003e\u003cspan class=\"p\"\u003e]))\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"c1\"\u003e# 输出: [1, 1, 2, 3, 6, 8, 10]\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003c/div\u003e\u003ch3 id=\"javascript-代码\"\u003eJavaScript 代码\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cdiv class=\"chroma\"\u003e\n\u003ctable class=\"lntable\"\u003e\u003ctr\u003e\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode\u003e\u003cspan class=\"lnt\"\u003e 1\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 2\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 3\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 4\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 5\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 6\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 7\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 8\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 9\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e10\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e11\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e12\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e13\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-javascript\" data-lang=\"javascript\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"c1\"\u003e// 防抖函数\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"kd\"\u003efunction\u003c/span\u003e \u003cspan class=\"nx\"\u003edebounce\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003efn\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003edelay\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"mi\"\u003e300\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"kd\"\u003elet\u003c/span\u003e \u003cspan class=\"nx\"\u003etimer\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"kc\"\u003enull\u003c/span\u003e\u003cspan class=\"p\"\u003e;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"k\"\u003ereturn\u003c/span\u003e \u003cspan class=\"kd\"\u003efunction\u003c/span\u003e \u003cspan class=\"p\"\u003e(...\u003c/span\u003e\u003cspan class=\"nx\"\u003eargs\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e        \u003cspan class=\"nx\"\u003eclearTimeout\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"nx\"\u003etimer\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e        \u003cspan class=\"nx\"\u003etimer\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003esetTimeout\u003c/span\u003e\u003cspan class=\"p\"\u003e(()\u003c/span\u003e \u003cspan class=\"p\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"nx\"\u003efn\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003eapply\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"k\"\u003ethis\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003eargs\u003c/span\u003e\u003cspan class=\"p\"\u003e),\u003c/span\u003e \u003cspan class=\"nx\"\u003edelay\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"p\"\u003e};\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"p\"\u003e}\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"c1\"\u003e// 使用示例\n\u003c/span\u003e\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"kr\"\u003econst\u003c/span\u003e \u003cspan class=\"nx\"\u003ehandleSearch\u003c/span\u003e \u003cspan class=\"o\"\u003e=\u003c/span\u003e \u003cspan class=\"nx\"\u003edebounce\u003c/span\u003e\u003cspan class=\"p\"\u003e((\u003c/span\u003e\u003cspan class=\"nx\"\u003ekeyword\u003c/span\u003e\u003cspan class=\"p\"\u003e)\u003c/span\u003e \u003cspan class=\"p\"\u003e=\u0026gt;\u003c/span\u003e \u003cspan class=\"p\"\u003e{\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e    \u003cspan class=\"nx\"\u003econsole\u003c/span\u003e\u003cspan class=\"p\"\u003e.\u003c/span\u003e\u003cspan class=\"nx\"\u003elog\u003c/span\u003e\u003cspan class=\"p\"\u003e(\u003c/span\u003e\u003cspan class=\"s1\"\u003e\u0026#39;搜索:\u0026#39;\u003c/span\u003e\u003cspan class=\"p\"\u003e,\u003c/span\u003e \u003cspan class=\"nx\"\u003ekeyword\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"p\"\u003e},\u003c/span\u003e \u003cspan class=\"mi\"\u003e500\u003c/span\u003e\u003cspan class=\"p\"\u003e);\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003c/div\u003e\u003ch3 id=\"shell-命令\"\u003eShell 命令\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cdiv class=\"chroma\"\u003e\n\u003ctable class=\"lntable\"\u003e\u003ctr\u003e\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode\u003e\u003cspan class=\"lnt\"\u003e1\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e2\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e3\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e4\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e5\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e6\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e7\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e8\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-bash\" data-lang=\"bash\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"c1\"\u003e# 部署博客\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003ehugo --minify\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003egit add .\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003egit commit -m \u003cspan class=\"s2\"\u003e\u0026#34;post: 新文章\u0026#34;\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003egit push\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e\u003cspan class=\"c1\"\u003e# 本地预览\u003c/span\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003ehugo server -D\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003c/div\u003e\u003ch2 id=\"表格\"\u003e表格\u003c/h2\u003e\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003cth\u003e格式\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e语法\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e效果\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e加粗\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003e**文字**\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003cstrong\u003e文字\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e斜体\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003e*文字*\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003cem\u003e文字\u003c/em\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e代码\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003e`code`\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003ecode\u003c/code\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e链接\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003e[文本](url)\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ca href=\"https://example.com\"\u003e链接\u003c/a\u003e\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e图片\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e\u003ccode\u003e![alt](url)\u003c/code\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e显示图片\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\u003ch2 id=\"视频演示\"\u003e视频演示\u003c/h2\u003e\n\u003ch3 id=\"方式一html5-原生视频\"\u003e方式一：HTML5 原生视频\u003c/h3\u003e\n\u003cvideo controls width=\"100%\" poster=\"images/video-poster.jpg\"\u003e\n  \u003csource src=\"videos/demo.mp4\" type=\"video/mp4\"\u003e\n  您的浏览器不支持 HTML5 视频，请 \u003ca href=\"videos/demo.mp4\"\u003e下载观看\u003c/a\u003e。\n\u003c/video\u003e\n\u003ch3 id=\"方式二b站嵌入\"\u003e方式二：B站嵌入\u003c/h3\u003e\n\u003ciframe src=\"//player.bilibili.com/player.html?bvid=BV1xx411c7mD\u0026page=1\"\n        width=\"100%\" height=\"480\" frameborder=\"0\" allowfullscreen\u003e\n\u003c/iframe\u003e\n\u003ch3 id=\"方式三youtube-嵌入\"\u003e方式三：YouTube 嵌入\u003c/h3\u003e\n\u003ciframe src=\"https://www.youtube.com/embed/dQw4w9WgXcQ\"\n        width=\"100%\" height=\"480\" frameborder=\"0\" allowspectrum\u003e\n\u003c/iframe\u003e\n\u003ch2 id=\"提示框\"\u003e提示框\u003c/h2\u003e\n\u003cblockquote\u003e\n\u003cp\u003e\u003cstrong\u003e提示\u003c/strong\u003e：这是一条提示信息，用于补充说明。\u003c/p\u003e","title":"Markdown 写作示范：图片、视频、代码块全攻略"},{"content":"\n前言 一直想搭个自己的博客，记录一些技术思考和随笔杂记。要求很简单：\n📝 写 Markdown 就行，别折腾 🆓 全程免费，不花一分钱 🚦 推送代码后自动部署 🌙 支持暗黑模式、代码高亮、目录 🏷️ 支持标签、分类、RSS 最终选了 Hugo + PaperMod + Cloudflare Pages + GitHub Actions 这套方案。\n整个过程从安装到上线大约 2 小时（主要是踩坑），下面是完整记录。\n技术选型 对比了几个主流方案：\n框架 构建速度 部署难度 主题生态 推荐度 Hugo ⚡ 极快（Go 二进制） 简单 丰富（300+） ⭐⭐⭐⭐⭐ Astro 快 简单 增长中 ⭐⭐⭐⭐ Hexo 中（Node.js） 简单 丰富 ⭐⭐⭐⭐ Jekyll 慢（Ruby） 简单（GitHub Pages 原生） 丰富 ⭐⭐⭐ Zola 快（Rust） 简单 少 ⭐⭐⭐ 最终选 Hugo：单二进制零依赖，构建秒级完成，PaperMod 主题开箱即用，支持暗黑模式、TOC、代码高亮、RSS 等所有需求。\n整体架构 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 ┌─────────────────────────────────────────────────────────┐ │ 你的本地电脑 │ │ │ │ 写 Markdown 文章 → hugo new content/posts/xxx/index.md │ │ ↓ │ │ hugo server -D 本地预览 │ │ ↓ │ │ git add . \u0026amp;\u0026amp; git commit \u0026amp;\u0026amp; git push │ └─────────────────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────────┐ │ GitHub 仓库 │ │ │ │ main 分支 push 触发 GitHub Actions │ └─────────────────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────────┐ │ GitHub Actions CI │ │ │ │ 1. checkout 代码（含 submodule） │ │ 2. 安装 Hugo extended │ │ 3. hugo --minify 构建静态资源 │ │ 4. 部署到 Cloudflare Pages │ └─────────────────────────────────────────────────────────┘ ↓ ┌─────────────────────────────────────────────────────────┐ │ Cloudflare Pages │ │ │ │ 全球 CDN 加速，免费 SSL，自动分发 │ │ 访问地址：https://xiaohuang-blog.pages.dev │ └─────────────────────────────────────────────────────────┘ 全程自动化，你只需要 写文章 + push。\n项目结构 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 my-blog/ ├── .github/ │ └── workflows/ │ └── deploy.yml # ⭐ GitHub Actions CI/CD 配置 ├── archetypes/ │ └── default.md # 文章模板（新建文章自动套用） ├── assets/ # 自定义 CSS/SCSS ├── content/ # 📝 博客文章内容 │ └── posts/ │ ├── hello-world/ │ │ └── index.md # 文章用 Bundle 方式管理 │ └── blog-setup-guide/ │ ├── index.md # 文章本体 │ └── images/ # 文章配图（和文章同目录） ├── data/ # 数据文件（导航、友链等） ├── layouts/ # 模板覆盖（可选） ├── static/ # 全站静态资源 │ ├── images/ # 全站共用图片 │ └── favicon.ico # 网站图标 ├── themes/ │ └── PaperMod/ # ⭐ 主题（git submodule） ├── .gitignore ├── .gitmodules # 子模块配置 ├── hugo.toml # ⭐ Hugo 主配置文件 └── README.md 详细步骤 1. 安装 Hugo 1 2 3 4 5 6 # macOS brew install hugo # 验证（需要 extended 版支持 SCSS） hugo version # 输出：hugo v0.166.0+extended ... 2. 初始化项目 1 2 3 4 5 6 # 创建站点 hugo new site my-blog \u0026amp;\u0026amp; cd my-blog git init -b main # 添加 PaperMod 主题 git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod 3. 配置 hugo.toml 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 baseURL = \u0026#39;https://xiaohuang-blog.pages.dev\u0026#39; languageCode = \u0026#39;zh-CN\u0026#39; title = \u0026#39;小黄的博客\u0026#39; theme = \u0026#39;PaperMod\u0026#39; paginate = 10 enableRobotsTXT = true [params] author = \u0026#39;小黄\u0026#39; description = \u0026#39;记录一些自己的思考，随笔杂记\u0026#39; defaultTheme = \u0026#39;auto\u0026#39; # auto 跟随系统 / dark / light ShowReadingTime = true # 显示阅读时间 ShowShareButtons = true # 显示分享按钮 ShowPostNavLinks = true # 上一篇/下一篇 ShowBreadCrumbs = true # 面包屑导航 ShowCodeCopyButtons = true # 代码复制按钮 ShowToc = true # 显示目录 TOC TocOpen = true # 默认展开目录 # 首页 Profile 模式 [params.profileMode] enabled = true title = \u0026#39;小黄的博客\u0026#39; subtitle = \u0026#39;记录一些自己的思考，随笔杂记\u0026#39; [[params.profileMode.buttons]] name = \u0026#39;📝 文章\u0026#39; url = \u0026#39;/posts\u0026#39; [[params.profileMode.buttons]] name = \u0026#39;🏷️ 标签\u0026#39; url = \u0026#39;/tags\u0026#39; # 社交链接 [[params.socialIcons]] name = \u0026#39;github\u0026#39; url = \u0026#39;https://github.com/your-username\u0026#39; [[params.socialIcons]] name = \u0026#39;rss\u0026#39; url = \u0026#39;/index.xml\u0026#39; # 导航菜单 [menu] [[menu.main]] identifier = \u0026#39;home\u0026#39; name = \u0026#39;🏠 首页\u0026#39; url = \u0026#39;/\u0026#39; weight = 10 [[menu.main]] identifier = \u0026#39;posts\u0026#39; name = \u0026#39;📝 文章\u0026#39; url = \u0026#39;/posts\u0026#39; weight = 20 [[menu.main]] identifier = \u0026#39;categories\u0026#39; name = \u0026#39;📂 分类\u0026#39; url = \u0026#39;/categories\u0026#39; weight = 30 [[menu.main]] identifier = \u0026#39;tags\u0026#39; name = \u0026#39;🏷️ 标签\u0026#39; url = \u0026#39;/tags\u0026#39; weight = 40 # 分类法 [taxonomies] category = \u0026#39;categories\u0026#39; tag = \u0026#39;tags\u0026#39; # 代码高亮（Chroma） [markup.highlight] codeFences = true guessSyntax = true lineNos = true # 显示行号 noClasses = false # 使用 Chroma CSS（推荐） style = \u0026#39;monokai\u0026#39; # 代码主题 tabWidth = 4 # 输出格式（RSS） [outputs] home = [\u0026#39;HTML\u0026#39;, \u0026#39;RSS\u0026#39;, \u0026#39;JSON\u0026#39;] 4. 文章模板 archetypes/default.md：\n1 2 3 4 5 6 7 8 9 10 --- title: \u0026#39;{{ replace .File.ContentBaseName \u0026#34;-\u0026#34; \u0026#34; \u0026#34; | title }}\u0026#39; date: \u0026#39;{{ .Date }}\u0026#39; draft: true # true=草稿，发布时改 false toc: true # 显示目录 TocOpen: true # 默认展开目录 description: \u0026#39;\u0026#39; # 文章摘要（首页列表 + SEO） tags: [] # 标签 categories: [] # 分类 --- 5. GitHub Actions 配置 .github/workflows/deploy.yml：\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 name: Build \u0026amp; Deploy to Cloudflare Pages on: push: branches: [main] workflow_dispatch: permissions: contents: read deployments: write jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 with: submodules: true fetch-depth: 0 - name: Setup Hugo uses: peaceiris/actions-hugo@v2 with: hugo-version: \u0026#39;0.166.0\u0026#39; extended: true - name: Build run: hugo --minify - name: Deploy to Cloudflare Pages uses: cloudflare/pages-action@v1 with: apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} projectName: ${{ secrets.CLOUDFLARE_PROJECT_NAME }} directory: ./public gitHubToken: ${{ secrets.GITHUB_TOKEN }} branch: main 6. Cloudflare 配置 登录 Cloudflare Dashboard Workers \u0026amp; Pages → Create application → Pages → Create using direct upload 项目名：xiaohuang-blog 创建 API Token：My Profile → API Tokens → Create Custom Token 权限：Account → Cloudflare Pages → Edit 获取 Account ID（右侧栏显示） 7. GitHub Secrets 配置 GitHub 仓库 → Settings → Secrets and variables → Actions：\nName Value CLOUDFLARE_API_TOKEN Cloudflare API Token CLOUDFLARE_ACCOUNT_ID Cloudflare Account ID CLOUDFLARE_PROJECT_NAME xiaohuang-blog 踩坑记录 坑 1：子模块缺失 .gitmodules 现象：Actions 报错 No url found for submodule path 'themes/PaperMod'\n原因：用 git clone 而不是 git submodule add 拉取主题，缺少 .gitmodules 文件\n解决：创建 .gitmodules：\n1 2 3 [submodule \u0026#34;themes/PaperMod\u0026#34;] path = themes/PaperMod url = https://github.com/adityatelange/hugo-PaperMod.git 坑 2：Wrangler 默认部署到 Workers 现象：部署后域名是 .workers.dev 而不是 .pages.dev\n原因：Wrangler v4+ 默认把 Pages 部署到 Workers 平台\n解决：通过 API 直接创建传统 Pages 项目：\n1 2 3 curl -X POST \u0026#34;https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects\u0026#34; \\ -H \u0026#34;Authorization: Bearer $TOKEN\u0026#34; \\ -d \u0026#39;{\u0026#34;name\u0026#34;:\u0026#34;xiaohuang-blog\u0026#34;,\u0026#34;production_branch\u0026#34;:\u0026#34;main\u0026#34;}\u0026#39; 坑 3：API Token 权限不足 现象：Authentication error (401)\n原因：Cloudflare 没有\u0026quot;Edit Cloudflare Pages\u0026quot;模板，自定义 Token 权限配置不对\n解决：创建自定义 Token，权限必须包含 Account → Cloudflare Pages → Edit\n坑 4：OAuth Token 无法创建 API Token 现象：Unauthorized to access requested resource\n原因：Wrangler 的 OAuth Token 权限有限，不能通过 API 创建新 Token\n解决：只能在 Dashboard 手动创建 API Token\n常见问题 图片怎么放？ Bundle 方式（推荐）：图片和文章放同一目录\n1 2 3 4 content/posts/my-post/ ├── index.md ├── cover.jpg ← 封面图 └── screenshot.png ← 文中插图 文章中引用：\n1 2 3 4 5 6 7 --- cover: image: cover.jpg alt: \u0026#39;封面描述\u0026#39; --- ![截图描述](screenshot.png) 全局方式：放 static/images/，引用 /images/photo.jpg\n视频怎么放？ 1 2 3 4 5 6 7 8 9 10 \u0026lt;!-- HTML5 原生播放器 --\u0026gt; \u0026lt;video controls width=\u0026#34;100%\u0026#34; poster=\u0026#34;cover.jpg\u0026#34;\u0026gt; \u0026lt;source src=\u0026#34;/videos/demo.mp4\u0026#34; type=\u0026#34;video/mp4\u0026#34;\u0026gt; 您的浏览器不支持视频标签。 \u0026lt;/video\u0026gt; \u0026lt;!-- 第三方嵌入（推荐） --\u0026gt; \u0026lt;iframe src=\u0026#34;//player.bilibili.com/player.html?bvid=BVxxxxxx\u0026#34; width=\u0026#34;100%\u0026#34; height=\u0026#34;480\u0026#34; frameborder=\u0026#34;0\u0026#34; allowfullscreen\u0026gt; \u0026lt;/iframe\u0026gt; 新建文章后本地预览 1 2 hugo server -D # -D 包含草稿文章 # 浏览器打开 http://localhost:1313 发布文章 把 Front Matter 中 draft: true 改为 draft: false，然后 push 即可。\n日常使用手册 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 # 1. 新建文章 hugo new content/posts/文章标题/index.md # 2. 编辑内容（把 draft 改为 false） vim content/posts/文章标题/index.md # 3. 本地预览 hugo server -D # 4. 提交推送（自动触发构建 + 部署） git add . git commit -m \u0026#34;post: 文章标题\u0026#34; git push # 等 1-2 分钟，访问 https://xiaohuang-blog.pages.dev 查看效果 总结 项目 方案 静态生成 Hugo (Go) 主题 PaperMod 代码托管 GitHub CI/CD GitHub Actions 部署 Cloudflare Pages 费用 0 元 构建时间 ~100ms 部署时间 ~30s 功能 暗黑模式、代码高亮、TOC、标签、分类、RSS 整套方案零成本、自动化、维护低。你只需要专注于写 Markdown 文章，剩下的全部自动化 ✨\n","permalink":"https://xiaohuang-blog.pages.dev/posts/blog-setup-guide/","summary":"\u003cp\u003e\u003cimg alt=\"Hugo 静态网站生成器\" loading=\"lazy\" src=\"https://gohugo.io/img/hugo-logo-wide.svg\" title=\"Hugo Logo\"\u003e\u003c/p\u003e\n\u003ch2 id=\"前言\"\u003e前言\u003c/h2\u003e\n\u003cp\u003e一直想搭个自己的博客，记录一些技术思考和随笔杂记。要求很简单：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e📝 写 Markdown 就行，别折腾\u003c/li\u003e\n\u003cli\u003e🆓 全程免费，不花一分钱\u003c/li\u003e\n\u003cli\u003e🚦 推送代码后自动部署\u003c/li\u003e\n\u003cli\u003e🌙 支持暗黑模式、代码高亮、目录\u003c/li\u003e\n\u003cli\u003e🏷️ 支持标签、分类、RSS\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e最终选了 \u003cstrong\u003eHugo + PaperMod + Cloudflare Pages + GitHub Actions\u003c/strong\u003e 这套方案。\u003c/p\u003e\n\u003cp\u003e整个过程从安装到上线大约 2 小时（主要是踩坑），下面是完整记录。\u003c/p\u003e\n\u003ch2 id=\"技术选型\"\u003e技术选型\u003c/h2\u003e\n\u003cp\u003e对比了几个主流方案：\u003c/p\u003e\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003cth\u003e框架\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e构建速度\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e部署难度\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e主题生态\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e推荐度\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003cstrong\u003eHugo\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e⚡ 极快（Go 二进制）\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e简单\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e丰富（300+）\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e⭐⭐⭐⭐⭐\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003eAstro\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e快\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e简单\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e增长中\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e⭐⭐⭐⭐\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003eHexo\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e中（Node.js）\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e简单\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e丰富\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e⭐⭐⭐⭐\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003eJekyll\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e慢（Ruby）\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e简单（GitHub Pages 原生）\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e丰富\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e⭐⭐⭐\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003eZola\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e快（Rust）\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e简单\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e少\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e⭐⭐⭐\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\u003cp\u003e\u003cstrong\u003e最终选 Hugo\u003c/strong\u003e：单二进制零依赖，构建秒级完成，PaperMod 主题开箱即用，支持暗黑模式、TOC、代码高亮、RSS 等所有需求。\u003c/p\u003e\n\u003ch2 id=\"整体架构\"\u003e整体架构\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cdiv class=\"chroma\"\u003e\n\u003ctable class=\"lntable\"\u003e\u003ctr\u003e\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode\u003e\u003cspan class=\"lnt\"\u003e 1\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 2\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 3\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 4\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 5\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 6\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 7\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 8\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 9\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e10\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e11\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e12\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e13\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e14\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e15\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e16\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e17\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e18\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e19\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e20\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e21\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e22\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e23\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e24\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e25\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e26\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e27\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e28\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e29\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e30\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e31\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-fallback\" data-lang=\"fallback\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e┌─────────────────────────────────────────────────────────┐\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│                      你的本地电脑                         │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│                                                         │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│   写 Markdown 文章 → hugo new content/posts/xxx/index.md  │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│           ↓                                             │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│   hugo server -D 本地预览                                │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│           ↓                                             │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│   git add . \u0026amp;\u0026amp; git commit \u0026amp;\u0026amp; git push                    │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e└─────────────────────────────────────────────────────────┘\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e                    ↓\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e┌─────────────────────────────────────────────────────────┐\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│                    GitHub 仓库                           │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│                                                         │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│   main 分支 push 触发 GitHub Actions                     │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e└─────────────────────────────────────────────────────────┘\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e                    ↓\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e┌─────────────────────────────────────────────────────────┐\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│                  GitHub Actions CI                        │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│                                                         │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│   1. checkout 代码（含 submodule）                        │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│   2. 安装 Hugo extended                                 │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│   3. hugo --minify 构建静态资源                         │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│   4. 部署到 Cloudflare Pages                           │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e└─────────────────────────────────────────────────────────┘\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e                    ↓\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e┌─────────────────────────────────────────────────────────┐\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│                  Cloudflare Pages                        │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│                                                         │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│   全球 CDN 加速，免费 SSL，自动分发                       │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e│   访问地址：https://xiaohuang-blog.pages.dev              │\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e└─────────────────────────────────────────────────────────┘\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003c/div\u003e\u003cp\u003e全程自动化，你只需要 \u003cstrong\u003e写文章 + push\u003c/strong\u003e。\u003c/p\u003e","title":"从零搭建个人博客：Hugo + PaperMod + Cloudflare Pages 完全指南"},{"content":"前言 一直想搭个自己的博客，记录一些技术思考和随笔杂记。要求很简单：\n📝 写 Markdown 就行，别折腾 🆓 全程免费，不花一分钱 🚀 推送代码后自动部署 🌙 支持暗黑模式、代码高亮、目录 🏷️ 支持标签、分类、RSS 最终选了 Hugo + PaperMod + Cloudflare Pages + GitHub Actions 这套方案。下面是完整过程。\n技术选型 对比了几个主流方案：\n框架 构建速度 部署难度 主题生态 推荐度 Hugo ⚡ 极快 简单 丰富 ⭐⭐⭐⭐⭐ Astro 快 简单 增长中 ⭐⭐⭐⭐ Hexo 中 简单 丰富 ⭐⭐⭐⭐ Jekyll 慢 简单 丰富 ⭐⭐⭐ 最终选 Hugo：单二进制零依赖，构建秒级完成，PaperMod 主题开箱即用。\n整体工作流 1 2 3 4 5 6 7 8 9 10 11 本地写 Markdown 文章 ↓ git push 到 GitHub (main 分支) ↓ GitHub Actions 自动触发 ↓ 构建 Hugo 静态资源 ↓ 自动部署到 Cloudflare Pages ↓ 网站更新完成 ✅ 全程自动化，你只需要写文章 + push。\n项目结构 1 2 3 4 5 6 7 8 9 my-blog/ ├── .github/workflows/deploy.yml # CI/CD 配置 ├── archetypes/default.md # 文章模板 ├── content/posts/ # 📝 博客文章 │ └── hello-world/index.md ├── themes/PaperMod/ # 主题 (git submodule) ├── static/ # 静态资源 ├── hugo.toml # ⭐ Hugo 主配置 └── .gitignore Hugo 配置要点 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 baseURL = \u0026#39;https://xiaohuang-blog.pages.dev\u0026#39; languageCode = \u0026#39;zh-CN\u0026#39; title = \u0026#39;小黄的博客\u0026#39; theme = \u0026#39;PaperMod\u0026#39; [params] author = \u0026#39;小黄\u0026#39; description = \u0026#39;记录一些自己的思考，随笔杂记\u0026#39; defaultTheme = \u0026#39;auto\u0026#39; # 自动暗黑模式 ShowToc = true # 显示目录 ShowCodeCopyButtons = true # 代码复制按钮 [taxonomies] category = \u0026#39;categories\u0026#39; tag = \u0026#39;tags\u0026#39; [outputs] home = [\u0026#39;HTML\u0026#39;, \u0026#39;RSS\u0026#39;, \u0026#39;JSON\u0026#39;] # RSS 订阅支持 GitHub Actions 配置 .github/workflows/deploy.yml：\n1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 name: Build \u0026amp; Deploy to Cloudflare Pages on: push: branches: [main] permissions: contents: read deployments: write jobs: build-and-deploy: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 with: submodules: true fetch-depth: 0 - uses: peaceiris/actions-hugo@v2 with: hugo-version: \u0026#39;0.166.0\u0026#39; extended: true - run: hugo --minify - uses: cloudflare/pages-action@v1 with: apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }} accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }} projectName: ${{ secrets.CLOUDFLARE_PROJECT_NAME }} directory: ./public 踩坑记录 1. 子模块问题 第一次 push 后 Actions 报错 No url found for submodule path，原因是没有 .gitmodules 文件。解决方法：\n1 2 3 4 # 创建 .gitmodules [submodule \u0026#34;themes/PaperMod\u0026#34;] path = themes/PaperMod url = https://github.com/adityatelange/hugo-PaperMod.git 2. Cloudflare Pages 域名问题 Wrangler 新版默认部署到 Workers 平台，域名是 .workers.dev（国内访问不了）。想要 .pages.dev 需要通过 API 直接创建传统 Pages 项目：\n1 2 3 curl -X POST \u0026#34;https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects\u0026#34; \\ -H \u0026#34;Authorization: Bearer $TOKEN\u0026#34; \\ -d \u0026#39;{\u0026#34;name\u0026#34;:\u0026#34;xiaohuang-blog\u0026#34;,\u0026#34;production_branch\u0026#34;:\u0026#34;main\u0026#34;}\u0026#39; 3. OAuth 无法创建 API Token Wrangler 的 OAuth Token 权限有限，无法通过 API 创建新 Token。需要在 Cloudflare Dashboard 手动创建 API Token：\n权限：Account → Cloudflare Pages → Edit 日常使用 1 2 3 4 5 6 7 8 # 新建文章 hugo new content/posts/文章标题/index.md # 本地预览 hugo server -D # 提交推送（自动触发部署） git add . \u0026amp;\u0026amp; git commit -m \u0026#34;post: xxx\u0026#34; \u0026amp;\u0026amp; git push 总结 整套方案：\n✅ 免费：GitHub + Cloudflare Pages 免费额度足够 ✅ 自动化：push 即部署 ✅ 功能全：暗黑模式、代码高亮、TOC、标签、RSS ✅ 维护低：写 Markdown 即可，主题可替换 如果你也想搭博客，可以直接用这套方案 👆\n","permalink":"https://xiaohuang-blog.pages.dev/posts/hello-world/","summary":"\u003ch2 id=\"前言\"\u003e前言\u003c/h2\u003e\n\u003cp\u003e一直想搭个自己的博客，记录一些技术思考和随笔杂记。要求很简单：\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e📝 写 Markdown 就行，别折腾\u003c/li\u003e\n\u003cli\u003e🆓 全程免费，不花一分钱\u003c/li\u003e\n\u003cli\u003e🚀 推送代码后自动部署\u003c/li\u003e\n\u003cli\u003e🌙 支持暗黑模式、代码高亮、目录\u003c/li\u003e\n\u003cli\u003e🏷️ 支持标签、分类、RSS\u003c/li\u003e\n\u003c/ul\u003e\n\u003cp\u003e最终选了 \u003cstrong\u003eHugo + PaperMod + Cloudflare Pages + GitHub Actions\u003c/strong\u003e 这套方案。下面是完整过程。\u003c/p\u003e\n\u003ch2 id=\"技术选型\"\u003e技术选型\u003c/h2\u003e\n\u003cp\u003e对比了几个主流方案：\u003c/p\u003e\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003cth\u003e框架\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e构建速度\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e部署难度\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e主题生态\u003c/th\u003e\n\t\t\t\t\t\u003cth\u003e推荐度\u003c/th\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003e\u003cstrong\u003eHugo\u003c/strong\u003e\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e⚡ 极快\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e简单\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e丰富\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e⭐⭐⭐⭐⭐\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003eAstro\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e快\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e简单\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e增长中\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e⭐⭐⭐⭐\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003eHexo\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e中\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e简单\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e丰富\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e⭐⭐⭐⭐\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\t\u003ctd\u003eJekyll\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e慢\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e简单\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e丰富\u003c/td\u003e\n\t\t\t\t\t\u003ctd\u003e⭐⭐⭐\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\u003cp\u003e\u003cstrong\u003e最终选 Hugo\u003c/strong\u003e：单二进制零依赖，构建秒级完成，PaperMod 主题开箱即用。\u003c/p\u003e\n\u003ch2 id=\"整体工作流\"\u003e整体工作流\u003c/h2\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cdiv class=\"chroma\"\u003e\n\u003ctable class=\"lntable\"\u003e\u003ctr\u003e\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode\u003e\u003cspan class=\"lnt\"\u003e 1\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 2\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 3\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 4\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 5\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 6\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 7\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 8\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e 9\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e10\n\u003c/span\u003e\u003cspan class=\"lnt\"\u003e11\n\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n\u003ctd class=\"lntd\"\u003e\n\u003cpre tabindex=\"0\" class=\"chroma\"\u003e\u003ccode class=\"language-fallback\" data-lang=\"fallback\"\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e本地写 Markdown 文章\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e        ↓\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003egit push 到 GitHub (main 分支)\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e        ↓\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003eGitHub Actions 自动触发\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e        ↓\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e构建 Hugo 静态资源\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e        ↓\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e自动部署到 Cloudflare Pages\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e        ↓\n\u003c/span\u003e\u003c/span\u003e\u003cspan class=\"line\"\u003e\u003cspan class=\"cl\"\u003e网站更新完成 ✅\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\u003c/div\u003e\n\u003c/div\u003e\u003cp\u003e全程自动化，你只需要写文章 + push。\u003c/p\u003e","title":"从零搭建个人博客：Hugo + PaperMod + Cloudflare Pages 完全指南"}]