几个 HTML 页面加一个 CSS 文件,根本不需要服务器。静态托管的好处很直接:没有后端可以挂,没有数据库可以被打,没有进程需要重启,访问量再大也只是 CDN 多回几次源。
Cloudflare Pages 是目前性价比最合适的选择——免费的静态请求不限量、不限带宽,SSL 自动签发,自定义域名不额外收钱。
三条部署路径
按上手难度排序,选一条就行,后期可以随时换。
| 方式 | 操作 | 适合 |
|---|---|---|
| 拖拽上传 | 控制台 → Workers & Pages → Create → Pages → Upload assets,把整个文件夹拖进去 | 页面少、不想碰命令行 |
| GitHub 自动部署 | 仓库授权给 Cloudflare,之后每次 git push 自动发布 | 想留版本记录 |
| Wrangler CLI | 命令行一条命令推送 | 固定工作流,最省事 |
第一次先用命令行或拖拽都行,几十秒后就能拿到一个 <项目名>.pages.dev 的地址,先在手机上看看排版,再谈域名。
用命令行部署
npx wrangler pages deploy public --project-name=my-blog
# 首次执行会打开浏览器要求登录授权 Cloudflare 账号
绑定自己的域名
在 Pages 项目里进入 Custom domains → Set up a custom domain,填 blog.yourdomain.com 或裸域 yourdomain.com。接下来分两种情况。
域名已经托管在 Cloudflare
最省事。Cloudflare 会自动建好 CNAME 记录,证书几分钟内签发,不需要你碰 DNS 面板。等状态变成 Active 再访问。
DNS 还在别家
在 Pages 里添加域名后,它会提示你去当前 DNS 服务商加一条记录:
类型:CNAME
主机记录:blog
记录值:my-blog.pages.dev
裸域(
@)按 DNS 规范不能直接设 CNAME。如果你的 DNS 商支持 CNAME 拉平 / ALIAS / ANAME,可以用裸域;不支持就用www或blog子域。
如果嫌麻烦,把域名的 NS 整体迁到 Cloudflare 是最彻底的做法:解析和 CDN 一步到位,也不用再管两套面板。
免费额度与限制
- 静态请求、带宽:不限量,这是它最适合博客的地方
- 构建次数:免费版每月 500 次,拖拽上传也算一次
- 单次部署:最多 20,000 个文件,单个文件不超过 25 MiB
- 自定义域名:免费,自动签发并续期 SSL
- 版本回滚:每次部署都会留档,出问题在 Deployments 里一键回退
对个人博客来说,唯一会被卡住的是「纯静态」这件事本身——没有服务端,就没有评论、搜索、表单提交。这些都能用第三方补上,成本比自建后端低得多。
几个一定会踩的坑
1. 中国大陆访问不稳定
Cloudflare 的免费节点在国内的连通性时好时坏,*.pages.dev 尤其明显。换成自己的域名走 Cloudflare 网络通常会稳一些,但依然不保证。如果读者主要在国内,认真的方案是备案后的国内对象存储加 CDN,这会推翻整个选型——先想清楚。
2. 路径大小写
线上是 Linux 环境,区分大小写。本地 Windows 上好好的 Images/Cover.jpg,部署后引用 images/cover.jpg 就是 404。文件名统一小写加中划线,最省心。
3. 缓存让你怀疑人生
改完 CSS 刷新页面没变化,八成是缓存。static/_headers 里把 CSS 缓存时间设成了 1 小时,算是个折中;真正稳定的做法是文件名带内容哈希,但那需要构建工具介入。
4. 404 页面
根目录放一个 404.html,Pages 会自动接管不存在的路径。注意它会被任意层级的 URL 使用,所以页面里的资源引用必须写成根绝对路径(/css/style.css),写相对路径在 /a/b/ 这种路径下必然丢样式。
这条是本站生成器里固定处理的,不用手动管。
小结
剩下的就是写了。工具越简单,越不容易被工具耽误。