项目仓库：（本仓库）
访问地址：（本站）
下文流程图概括了「本地开发 → GitHub 推送 → Cloudflare Pages 自动构建部署」的主链路。
graph LR
A[本地 Markdown] --> B[Git Push]
B --> C[GitHub 仓库]
C --> D[Cloudflare Pages]
D --> E[Hugo Build]
E --> F[全球边缘部署]
F --> G[用户访问]
G --> H[就近节点响应]
项目概述
本项目以生产级标准搭建个人技术主页，承担「内容编写 → 自动化构建 → 全球部署」的完整链路。在本项目中负责架构设计、Hugo 主题定制与性能优化。
技术栈：Hugo 作为静态站点生成器（Golang 编译级速度，构建 1000 篇文章仅需 0.8s）；Cloudflare Pages 提供一体化的 CI/CD、静态托管与全球 CDN（推送即部署，无需配置 GitHub Actions）。架构简洁，推送到 GitHub 后 Cloudflare Pages 自动拉取、构建、部署至全球 200+ 边缘节点。
| 类别 | 技术选型 | 用途 |
|---|---|---|
| 静态生成 | Hugo | Markdown 转 HTML，毫秒级构建 |
| 托管/CI/CD | Cloudflare Pages | 自动构建、全球边缘部署、自动 HTTPS |
| CDN/安全 | Cloudflare | 全球加速、DDoS 防护、边缘缓存 |
| 主题 | Hugo Book | 文档风格主题，侧边栏导航 |
项目成果：
| 指标 | 数值 |
|---|---|
| 全球平均 FCP | < 0.2s（4G 网络） |
| Lighthouse 综合评分 | 98/100（桌面） |
| 部署耗时 | < 30 秒全自动化 |
| 服务器成本 | 0 元 |
项目背景
快速构建一个高性能、高可用、SEO 友好的技术展示页面时。传统方案存在以下问题：
- Jekyll 构建慢：Ruby 环境依赖复杂，千篇文章构建需数十秒
- GitHub Pages 限制多：构建环境固定、自定义受限、国内访问慢
- 手动配置 CI/CD 繁琐：需自行编写 GitHub Actions 工作流
本项目通过 Hugo + Cloudflare Pages 的组合，实现：
- 构建时间 ≤ 2 秒（千篇规模）
- 推送即部署，无需配置工作流
- 全球边缘节点加速，国内外访问均快
- 零服务器成本下的高可用（SLA 99.99%）
系统架构与选型
采用 GitHub + Cloudflare Pages 的一体化架构：源码托管在 GitHub，Cloudflare Pages 监听仓库变更，自动拉取代码、执行 Hugo 构建、部署至全球边缘节点。无需额外配置 GitHub Actions 或其他 CI 服务。
请求流向：用户访问 → Cloudflare 边缘节点（就近响应）→ 直接返回缓存内容（静态站点天然缓存友好）。
部署流程：
- 本地编写 Markdown，推送到 GitHub
- Cloudflare Pages 自动检测到新提交
- 在 Cloudflare 构建环境中执行
hugo --minify - 构建产物自动部署至全球 200+ 边缘节点
- 自动配置 HTTPS、压缩、缓存
选型考量：Cloudflare Pages 相比 GitHub Pages + Actions 的方案更简洁——无需编写工作流 YAML，构建环境由 Cloudflare 管理，且自带全球 CDN 与 DDoS 防护。免费套餐支持无限站点、无限请求、每月 500 次构建，足够个人使用。
关键技术选型理由
-
Hugo
Golang 编译级速度，平均构建时间 0.8s/1000 篇文章。模块化架构支持内容与样式解耦，通过
hugo mod管理主题依赖，便于升级与定制。 -
Cloudflare Pages
一体化静态站点托管：连接 GitHub 仓库后自动构建部署，无需配置 CI/CD 工作流。内置功能包括：
- 全球 200+ 边缘节点
- 自动 HTTPS（Let’s Encrypt）
- 预览部署（每个 PR 自动生成预览 URL）
- 自定义域名
- DDoS 防护与 WAF
-
对比 GitHub Pages
特性 GitHub Pages Cloudflare Pages 构建环境 固定（Jekyll 优先） 可配置（支持 Hugo、Next.js 等） CDN 节点 有限 全球 200+ 国内访问 较慢 较快 CI/CD 需自行配置 Actions 内置，推送即部署 预览部署 需额外配置 自动（每个 PR）
功能模块
Hugo 静态生成
目录结构：
├── content/
│ ├── docs/ # 文档（AI notes、AI projects）
│ └── posts/ # 博客文章
├── layouts/ # 自定义模板
├── static/ # 静态资源
├── hugo.yaml # Hugo 配置
└── themes/hugo-book/ # 主题
核心配置：
- 主题：Hugo Book（文档风格，侧边栏导航）
- 语法高亮：Chroma
- Mermaid 图表：通过 shortcode 支持
- 数学公式：KaTeX
Cloudflare Pages 配置
连接仓库：
- 登录 Cloudflare Dashboard → Pages → Create a project
- 选择 Connect to Git → 授权 GitHub → 选择仓库
- 配置构建设置：
| 配置项 | 值 |
|---|---|
| Framework preset | Hugo |
| Build command | hugo --minify |
| Build output directory | public |
| Environment variable | HUGO_VERSION: 0.139.0 |
自定义域名：
- Pages 项目设置 → Custom domains → Add
- 输入域名（如
example.com） - Cloudflare 自动配置 DNS 记录与 SSL 证书
预览部署：
- 每个 PR 自动生成独立预览 URL（如
abc123.project.pages.dev） - 便于在合并前预览效果、团队协作审查
性能优化
构建优化：
- 模板预编译：使用
partialCached减少重复渲染 - 资源压缩：
hugo --minify压缩 HTML/CSS/JS - 图片优化：使用 Hugo 的
resources.Process自动压缩
Cloudflare 自动优化：
- Auto Minify：自动压缩 HTML/CSS/JS
- Brotli 压缩：更高效的压缩算法
- Early Hints：预加载关键资源
- HTTP/3：更快的传输协议
缓存策略（Cloudflare 自动处理）：
- 静态资源：长期缓存
- HTML 页面：边缘缓存，源站更新时自动失效
安全配置
自动启用：
- HTTPS（TLS 1.3）
- DDoS 防护
- WAF 基础规则
可选增强（Cloudflare Dashboard 配置）：
- Bot 管理
- 访问限制（国家/IP）
- 自定义安全规则
技术难点与实现
从 GitHub Pages 迁移到 Cloudflare Pages
难点：已有 GitHub Pages + Actions 的配置，迁移时需保证平滑过渡，避免服务中断。
方案：
- 在 Cloudflare Pages 创建项目并连接同一仓库
- 使用 Cloudflare 提供的
*.pages.dev域名测试 - 确认无误后，将自定义域名 DNS 切换到 Cloudflare
- 删除 GitHub Actions 工作流（不再需要）
- 禁用 GitHub Pages（可选）
效果上，迁移过程零停机，且后续维护更简单——无需管理 Actions 工作流。
构建环境配置
难点：Cloudflare Pages 默认 Hugo 版本可能较旧，与本地开发环境不一致导致构建失败。
方案：通过环境变量指定 Hugo 版本：
- 在 Pages 项目设置 → Environment variables
- 添加
HUGO_VERSION=0.139.0（与本地一致） - 若使用 Hugo Extended（需要 SCSS 支持），Cloudflare Pages 默认使用 Extended 版本
总结
从本地 Markdown 到全球高速访问，整条 Hugo + Cloudflare Pages 链路已打通：推送即部署、全球边缘加速、自动 HTTPS 与安全防护。相比传统 GitHub Pages + Actions 方案，架构更简洁、配置更少、国内外访问更快。零服务器成本下实现 SLA 99.99% 可用性与毫秒级加载。
后续可扩展方向：
- 增加评论系统（Giscus / Utterances）
- 接入 Cloudflare Web Analytics（隐私友好的统计）
- 实现多语言支持（i18n）
- 通过 Cloudflare Functions 实现动态功能