从零把静态博客部署到 Cloudflare Pages：完整步骤与三个易踩的坑

这个博客（myybk.cn）从本地构建产物到正式上线，总共花了不到一小时，但其中有三个地方卡了我一下。把完整过程和这三个坑记下来，下次再部署项目就不用重新查一遍。

部署步骤

1. 推送代码到 GitHub

不用敲命令，VS Code 自带的源代码管理面板就能一条龙推上去。先在项目根目录建好 .gitignore，写两行：

node_modules/
dist/

前者上千个文件不该进仓库；后者是构建产物，Cloudflare 会在云端重新生成。

然后把项目在 VS Code 里打开，按 Ctrl+Shift+G 进源代码管理面板：

点「Initialize Repository」初始化仓库，项目里会多出 .git 目录；
在输入框填 init: astro blog，按 Ctrl+Enter 提交（若提示没有暂存的更改，选「是」自动暂存全部）；
点「Publish Branch」，在弹出项里选「Publish to GitHub public/private repository」，首次会跳浏览器授权 GitHub 账号；
VS Code 自动建好远程仓库、配好 origin 并完成推送，不用手动 git remote add。

之后每次改完文章：填提交信息 → Ctrl+Enter 提交 → 点状态栏的「同步更改」（Sync Changes）即可。

2. 在 Cloudflare Pages 创建项目

Compute → Workers & Pages → Create application → Continue to Pages → Import an existing Git repository，授权后选择仓库，构建配置如下：

Cloudflare Pages 创建项目步骤

▲ 根据图片标注的步骤进行创建项目

配置项	值
Framework preset	Astro
Build command	`npm run build`
Build output directory	`dist`

点 Save and Deploy，第一次构建大约两分钟，完成后会得到一个 xxx.pages.dev 的临时域名。

3. 绑定自定义域名

构建完成后点击 Add custom domain，如下图。

Cloudflare Pages 绑定自定义域名

▲ Cloudflare Pages 绑定自定义域名

点击 Set up a custom domain，输入 myybk.cn，点击 Continue，根据提示点击下一步，Cloudflare会自动添加DNS，成功后就可以使用你自己的域名访问网站啦。

三个易踩的坑

坑一：npm run build 找不到脚本。 本地构建正常、云端失败，原因是 package.json 里没有 build 脚本（我之前一直用 node node_modules/astro/astro.js build）。Pages 的构建环境只认标准脚本，补上 "build": "astro build" 即可。

坑二：DNS 不在 Cloudflare 托管时根域绑定失败。 如果域名 NS 没指向 Cloudflare，根域（裸域）无法直接 CNAME，需要把域名的 NS 服务器改到 Cloudflare（免费），等生效后再绑定。这也是我建议新站直接把 DNS 托管给 Cloudflare 的原因——根域 CNAME 扁平化、免费证书、缓存都在一处。

坑三：改完文章线上没更新。 这不是 Pages 的问题，是 Cloudflare 边缘缓存。排查顺序：先看 Pages 的 Deployment 是否成功，再用 curl -I https://myybk.cn 看 cf-cache-status，确认是不是命中了缓存；必要时手动 Purge。

两个容易被忽略的好功能

预览部署（Preview Deployments）：push 到非 main 分支，Pages 会自动构建一个独立的预览 URL。改样式、试新功能先在预览环境看效果，确认没问题再合并——等于白送一个 staging 环境。

一键回滚：Deployments 列表里每个历史版本都有「Rollback to this deployment」。有一次我上线了没写完的文章，十秒内回滚到上一版，比重新改代码再部署快得多。静态站的回滚只是切换指针，没有传统部署的回滚痛苦。

进阶：域名邮箱转发 + 访问统计

上面这些做完，站就上线了。还有两件事我顺手配了，都是免费的，严格说不属于「部署」范畴，但对个人站挺值。

1. 把 `hi@myybk.cn` 转进自己的邮箱

域名既然已经托管在 Cloudflare DNS，就可以白开 Email Routing：给 hi@myybk.cn 建一条转发规则，发到这个地址的信会自动进你常用的邮箱。对外是一个体面的域名地址，收信还是在顺手的收件箱里。

只能收，不能发。 Email Routing 管的是收信转发。

2. Web Analytics 访问统计

Cloudflare Web Analytics 对我这种个人博客查看访问统计刚好够用。

Web Analytics 不支持自定义事件，也不记录查询参数，UTM 看不了，所以别指望用它做转化漏斗。我的用法就是「看有没有人来、从哪来、页面打开快不快」，需要深入分析行为时再另说。

上线后顺手做的两件事

在 Search Console 添加 myybk.cn 属性（DNS 验证，Cloudflare 里加一条 TXT 记录即可），并提交 https://myybk.cn/xxx.xml你自己的网站地图；
开 Cloudflare Web Analytics（你也可以选择 GA、百度统计等）。

最后说成本

整个过程零现金成本：Pages 免费额度对个人博客完全够用（无限站点和请求，每月 500 次构建），证书免费，CDN 免费。唯一的固定支出是域名续费，一年一百块上下。对一个内容全在自己手里、全球 CDN 分发的个人站来说，这大概是 2026 年性价比最高的建站方式了。如果你也在观望要不要把站点迁过来，我的建议是：迁，迁移过程本身一小时以内就能完成，就是本文这整个流程。