用 Hugo + Cloudflare Pages 搭建免费博客

这篇文章记录我搭建这个博客的全过程。方案是 Hugo（静态站点生成器）+ Cloudflare Pages（免费托管 + CDN）。

为什么选这个组合

静态博客没有数据库，不会被黑，加载速度快。Cloudflare Pages 免费提供全球 CDN、自动 HTTPS、自定义域名。

安装 Hugo

从 Hugo Releases 下载对应平台的 extended 版本（支持 SCSS）。

hugo new site blog
cd blog

创建内容

Hugo 用 Markdown 写文章，放在 content/ 目录下：

content/
├── blog/           # 博客栏目
│   ├── hello-world.md
│   └── my-post.md
├── portfolio/      # 作品集栏目
│   └── project-1.md
└── about.md        # 关于页

每篇文章的开头是 front matter：

+++
title = "文章标题"
date = 2026-06-20
tags = ["标签1", "标签2"]
draft = false
+++

正文内容...

本地预览

hugo server -D

-D 表示包含草稿。打开 http://localhost:1313 预览。

部署到 Cloudflare Pages

1. 把代码推到 Git 仓库（GitHub/GitLab）
2. 登录 Cloudflare Pages → Create project → 连接仓库
3. 配置构建：
   • 构建命令：hugo --minify
   • 输出目录：public
   • 环境变量：HUGO_VERSION = 你用的版本号
4. 点 Deploy，每次 push 自动构建部署

绑定自定义域名

在 Pages 项目设置 → Custom domains → 添加域名。Cloudflare 会自动配置 DNS 和 HTTPS。

总结

整个搭建过程不到一小时，之后写文章只需要：

1. 在 content/blog/ 新建一个 .md 文件
2. git push
3. Cloudflare Pages 自动构建上线

这就是这个博客的诞生过程。如果你也想搭一个，动手试试吧。