Hugo博客-PaperMod主题-Cloudflare Pages部署 自动化建站与发布指南

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

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

为什么选择 Hugo？

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

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

为什么选择 Cloudflare Pages？

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

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

Hugo 主题选择

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

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

流程梳理

#

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 配置构建设置

#

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

3.3 设置环境变量

#

展开 Environment variables 部分，添加：

⚠️ 重要：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 版本。

相关阅读：

• Hugo 博客搭建 Twikoo 评论系统指南