我一直用 Obsidian 写笔记，积累多了便想整理分享出来——有时一点经验能帮别人省不少时间。起初发在 CSDN，后来发现自己的文章被平台擅自设为付费阅读，这让我很不爽，于是萌生了自建博客的念头。

调研了一番，确定采用 Hugo (PaperMod) + Cloudflare Pages 的方案，因为其能满足我“高效、美观且自动化”的需求；

为什么选择 Hugo？

常见的静态博客生成器有 Hexo、Jekyll、Hugo 等，我选择 Hugo 的原因：
Hugo 是一个用 Go 语言编写的静态网站生成器，以构建速度快著称。它可以将 Markdown 文件转换为静态 HTML 页面，非常适合搭建博客、文档站点等。

对比项HugoHexoJekyll
构建速度极快（毫秒级）较慢较慢
依赖环境单二进制文件，无依赖需要 Node.js需要 Ruby
主题生态丰富，PaperMod 简洁美观丰富一般
学习成本中等低中等

Hugo 最大的优势是快——哪怕有几百篇文章，构建也只需几秒。而且只需要一个可执行文件，不用折腾 Node.js 或 Ruby 环境。

为什么选择 Cloudflare Pages？

静态博客常见的托管方案有 GitHub Pages、Vercel、Netlify、Cloudflare Pages 等。

对比项Cloudflare PagesGitHub PagesVercel / Netlify
国内速度快（全球 CDN）较慢一般
自动 HTTPS✅✅✅
带宽限制无限制100GB/月有免费额度
构建速度快一般快
自定义域名免费免费免费

Cloudflare 的全球 Anycast 网络让国内用户也能有不错的访问体验，而且完全免费、无带宽限制。
为什么选择 PaperMod 主题？

Hugo 主题选择

Hugo 主题很多，PaperMod 是目前最受欢迎的主题之一，我选择它的理由：

  • 简洁美观：无冗余设计，阅读体验好
  • 加载飞快：无第三方依赖，体积小
  • 深色模式：原生支持明暗切换
  • 响应式布局：移动端适配完美
  • 高度可定制：配置项丰富，易于扩展
  • 文档完善：官方 Wiki 详尽，社区活跃

流程梳理

阶段核心任务关键点
环境搭建安装 Hugo Extended必须是 Extended 版本以支持 SCSS
项目初始化创建站点并引入主题推荐以 git submodule 形式引入 PaperMod
站点配置修改 config.yaml配置 baseurl、菜单及 PaperMod 特有参数
内容创作编写 Markdown规范的 Frontmatter 是关键
自动部署配置 Cloudflare Pages连接 GitHub 仓库实现自动构建

1. 环境搭建与初始化

Hugo 安装

1. 下载 Hugo Extended

前往 Hugo Releases 页面，下载适合你系统的 Extended 版本（文件名包含 extended）。

⚠️ 必须选择 Extended 版本，否则无法编译 PaperMod 主题的 SCSS 样式文件。

2. 解压并配置环境变量

将下载的压缩包解压到任意目录（如 D:\Tools\hugo），然后将该目录添加到系统 PATH 环境变量中。

3. 验证安装

打开终端，运行以下命令确认安装成功：

1

hugo version

输出应包含 +extended 后缀，例如：hugo v0.140.0+extended windows/amd64 ...

创建项目

1. 创建 Hugo 站点

1

hugo new site DeerBlog

创建一个名为 DeerBlog 的站点骨架，会自动生成 content/、themes/、config.toml 等目录结构。

2. 进入站点目录

1

cd DeerBlog

3. 初始化 Git 仓库

1

git init

后续用于版本管理和推送到 GitHub。

4. 引入 PaperMod 主题

1

git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

以 子模块 形式引入主题。--depth=1 表示浅克隆（只拉取最新一次提交），节省下载时间和空间。主题会被放到 themes/PaperMod 目录下。

💡 为什么用 submodule？
子模块让主题与你的站点代码分离，方便后续通过 git submodule update --remote 一键更新主题，而不会弄乱你的自定义修改。
当然，你也可以直接克隆主题仓库到 themes/PaperMod，但那样每次更新主题都需要手动操作。

5. 配置主题

在 config.yaml 中设置 theme: PaperMod。

2. 关键配置 (config.yaml)

PaperMod 提供丰富的自定义参数，以下是本站的核心配置示意：

1
2
3
4
5
6
7
8

baseurl: https://deermiya.com  
theme: PaperMod  
  
params:  
    env: production  
    homeInfoParams:  
        Title: "焦虑的反义词是具体"  
        Content: "每天只需前进一丁儿点~"

本站开启了 buildFuture: true，允许发布日期晚于当前时间的文章，方便提前排期。

3. Cloudflare Pages 部署

这是最核心的部分。Cloudflare Pages 可以直接连接你的 GitHub 仓库，每次推送代码后自动构建并部署。

3.1 创建 Cloudflare Pages 项目

  1. 登录 Cloudflare Dashboard
  2. 左侧菜单选择 Workers & Pages
  3. 点击 Create → Pages → Connect to Git
  4. 首次使用需授权 Cloudflare 访问你的 GitHub
  5. 选择你的 Hugo 源码仓库（如 DeerBlog）
  6. 点击 Begin setup

3.2 配置构建设置

在构建配置页面，填写以下信息：

配置项值
Project namedeermiya（将决定默认域名）
Production branchmain
Framework presetHugo
Build commandhugo --minify
Build output directorypublic

3.3 设置环境变量

展开 Environment variables 部分，添加：

变量名值说明
HUGO_VERSION0.140.0指定 Hugo 版本，避免构建问题

⚠️ 重要：Cloudflare 默认的 Hugo 版本可能较旧，必须手动指定版本号。可在本地运行 hugo version 查看你正在使用的版本。

点击 Save and Deploy，等待首次构建完成。

3.4 绑定自定义域名

  1. 进入项目设置页 → Custom domains
  2. 点击 Set up a custom domain
  3. 输入你的域名（如 deermiya.com）
  4. 按提示添加 DNS 记录：
    • 如果域名托管在 Cloudflare：系统会自动配置
    • 如果在其他平台：需手动添加 CNAME 记录指向 <project>.pages.dev

4. 写作与发布流

  1. 新建文章：hugo new post/2026/工具教程/xx.md
  2. 本地预览：hugo server -D
  3. 推送发布：
    1
2
3

    git add .  
git commit -m "feat: add new post about hugo"  
git push origin main
    推送后，Cloudflare Pages 会自动构建，通常 30 秒内即可完成部署。

5. 常见问题

构建失败：Hugo 版本不匹配

确保在环境变量中设置了正确的 HUGO_VERSION。

子模块（主题）拉取失败

Cloudflare Pages 默认支持 git submodule，但如果遇到问题，可以在构建命令前添加：

1

git submodule update --init --recursive && hugo --minify

样式/SCSS 编译失败

确认本地使用的是 Hugo Extended 版本，Cloudflare 会自动使用对应的 Extended 版本。

相关阅读：