起因
我另一个整理朋友们运动打卡数据的项目是部署在 Cloudflare Workers 上的,博客之前一直是 S3 + CloudFront。为了管理方便,决定把博客页迁移到 Cloudflare,Cloudflare Pages 个人博客流量基本都在免费额度里,不需要太担心成本。
域名
迁到 Cloudflare 必须有自定义域名(避免系统自带的 *.pages.dev 有的地方打不开)。在 Cloudflare Registrar 可以直接购买,不同的后缀价格不一样。
Cloudflare Pages 设置
部署方式选了 Git 集成(push 到 main 自动构建),不需要本地 wrangler。
实际操作的步骤:
- Cloudflare 控制台 → Workers & Pages → Create application → Pages tab → Connect to Git
- 授权 GitHub → 选对应的 repo
- 填构建配置:
| 字段 | 值 |
|---|---|
| Project name | 随便起一个 |
| Production branch | main |
| Framework preset | Hugo |
| Build command | git submodule update --init --recursive && hugo --gc --minify |
| Build output | public |
| Environment variables | HUGO_VERSION = 0.156.0 |
加自定义域名:项目页 → Custom domains → 输入精心挑选的域名 → “Complete DNS setup”
- 因为域名在 Cloudflare Registrar 买的,DNS 也在 Cloudflare,“Complete DNS setup” 会自动写 CNAME 记录,几分钟内 SSL 证书签发完成。
DNS
证书签好之后,手机能访问新网站,但 Mac 上 Chrome 却打不开。
修复:把 Mac 的 DNS 改成 1.1.1.1 + 8.8.8.8(系统设置 → 网络 → Wi-Fi → 详细信息 → DNS → 添加),绕过 ISP 缓存直接问公共 DNS。立刻能访问。Claude 说这种修改合理,公共 DNS 比 ISP 一般更快,还更保护隐私。
部署脚本重写
老的 4_hugo_deploy_upload.command 是 AWS 流程:
hugo --cleanDestinationDir --minify
aws s3 sync public/ s3://leonashao.com --delete
aws cloudfront create-invalidation --distribution-id E392F0BZEJZ6Y6 --paths "/*"
迁到 Cloudflare 之后部署变成 git push 一行:
# 6_deploy.command(重命名后)
git add -A
git commit -m "$message"
git push origin main
push 之后 Cloudflare Pages 自动监听 main 分支,~2 分钟构建+部署。
顺便整理了所有脚本的编号:
| 编号 | 脚本 |
|---|---|
| 1 | 1_new_post.command —— 新建杂记 |
| 2 | 2_new_book_section.command —— 新建书章 / 节 |
| 3 | 3_hugo_server.command —— 本地预览 |
| 4 | 4_post_images.command —— 杂记图片处理 |
| 5 | 5_book_images.command —— 书节图片处理 |
| 6 | 6_deploy.command —— git push 部署 |
现在
写完一篇杂记或者书节,本地 3_hugo_server.command 预览没问题,双击 6_deploy.command,输入 commit message,网站两分钟后自动更新。回滚也方便,Cloudflare Dashboard 里每次 deploy 都有快照,可以一键 Rollback to this deployment。