技术教程

Hugo 静态博客搭建与 Cloudflare Pages 边缘部署指南

Hugo 是基于 Go 语言构建的高性能静态网站生成器，以其毫秒级的编译速度和简易的架构深受开发者喜爱。结合 Cloudflare Pages 边缘计算网络，可以搭建出一套零成本、全球加速且自带 SSL 证书的响应式博客系统。

本文参考 Hugo 官方文档及 Cloudflare 部署最佳实践，梳理静态博客的搭建、主题配置及边缘部署全流程。

🛠️ 第一阶段：Hugo 本地环境搭建

1. 安装 Hugo

Hugo 提供全平台预编译二进制文件。推荐使用扩展版（Extended Version），以支持 SASS/SCSS 样式编译。

在 Linux / macOS 架构下可使用工具安装，或直接下载解压发布包：

# 查看版本验证安装
hugo version

2. 初始化站点结构

运行命令创建一个新的 Hugo 站点项目：

hugo new site my-blog
cd my-blog

生成的目录结构如下：

  • archetypes/：文章模板定义。
  • content/：存放 Markdown 格式的内容文件。
  • layouts/：自定义模板视图。
  • static/：静态资源（图片、favicon 等），文件会被原样复制到根目录。
  • themes/：主题存储目录。
  • hugo.toml：全站核心配置文件。

🎨 第二阶段：配置主题与内容创作

1. 安装主题

以社区流行主题为例，可将主题克隆至 themes 目录：

git clone --depth 1 https://github.com/<theme-repo>/<theme-name>.git themes/<theme-name>

并在 hugo.toml 中指定主题名称：

baseURL = 'https://your-domain.com/'
languageCode = 'zh-cn'
title = '站点标题'
theme = '<theme-name>'

2. 创建与编辑文章

使用 hugo new 命令在 content/post/ 下新建 Markdown 文章：

hugo new post/my-first-post.md

每个文件头部都包含 Front Matter 元数据：

---
title: "文章标题"
date: 2026-08-21
draft: false
categories: ["技术教程"]
tags: ["Hugo"]
---

这里写入 Markdown 正文内容...

🏗️ 第三阶段：项目本地构建

在部署到边缘网络之前，可以先在本地测试编译输出：

# 压缩并生成静态 HTML 文件至 public 目录
hugo --minify

编译成功后，Hugo 会将完整的站点静态文件导出在 public 文件夹中。

🚀 第四阶段：托管至 Cloudflare Pages

结合 Cloudflare Pages 托管具有极高的稳定性，并可免去服务器运维成本。

方法一：Git 自动化部署 (推荐)

  1. 将 Hugo 站点源码推送到 GitHub / GitLab 仓库。
  2. 登录 Cloudflare Dashboard，进入 Workers & Pages -> Create application -> Pages -> Connect to Git。
  3. 选择对应仓库，设置构建配置：
    • Framework preset：选择 Hugo
    • Build command：hugo --minify
    • Build output directory：public
  4. 点击 Save and Deploy，后续每次 Git Push 将自动触发编译部署。

方法二：命令行部署 (Wrangler CLI)

如果不希望将源码公开到远程仓库，可使用 Cloudflare 官方 CLI 直接部署本地生成的 public 静态文件：

# 编译最新静态内容
hugo --minify

# 使用 Wrangler 将 public 目录上传至 Cloudflare Pages
npx wrangler pages deploy public --project-name <your-project-name> --branch main

🌐 第五阶段：绑定自定义域名与 SSL

  1. 在 Cloudflare Pages 项目的 Custom domains 选项卡中点击 Add Custom Domain。
  2. 输入你的域名（例如 blog.example.com）。
  3. Cloudflare 会自动在 DNS 记录中添加 CNAME 映射，并为站点申请自续期的免费 Let’s Encrypt / Google Trust SSL 证书。

💡 维护与优化小结

  • 静态资源保护：文章内引用的本地图片统一存放在 static/img/，并在 Markdown 中直接引用 /img/filename.ext，可有效防止相对路径失效。
  • 缓存清理：若更新部署后前端页面未变化，建议构建前先清理本地历史 public 文件夹，或在浏览器中强制刷新。