用 Cloudflare Pages 部署静态博客

这篇以临临手册为例，但流程适用于任何静态站点：纯 HTML、Astro、Vite，或者 Next.js 的静态导出。核心只有三件事：代码在 GitHub，构建交给 Cloudflare，域名指过来。

开始之前，先确认三样东西：一个 GitHub 账号和私有仓库；一个 Cloudflare 账号；以及 linlin.blog 的 DNS 管理权限。域名在 Dynadot 买的不影响，后面会讲怎么接。

1. 先把代码放进 GitHub 私有仓库

如果仓库还没建，先在 GitHub 上新建一个 Private repository，名字可以叫 linlin-blog。不要勾选自动生成 README，本地已经有文件了。

在本地项目目录里执行：

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/yourname/linlin-blog.git
git push -u origin main

推送前确认 .gitignore 里没有把构建产物、密钥或本地环境文件带上去。Cloudflare Pages 会读取仓库，所以仓库里不要放任何 token。

2. 在 Cloudflare Pages 创建项目

登录 Cloudflare Dashboard，进入 Workers & Pages → Create → Pages → Connect to Git，选择刚才的私有仓库。第一次连接时，Cloudflare 会请求 GitHub 授权，只给这个仓库的访问权限就够了。

项目名可以填 linlin-blog，它会决定默认的 linlin-blog.pages.dev 预览域名。

构建配置怎么填

这里是第一次部署最容易出错的地方。按你的项目类型选：

项目类型	Build command	Output directory
纯静态 HTML（文件在仓库根目录）	留空	`/`
纯静态 HTML（文件在 public 目录）	留空	`public`
Astro	`npm run build`	`dist`
Vite / React	`npm run build`	`dist`

如果构建需要特定 Node 版本，在环境变量里加一个 NODE_VERSION，例如 22。不要依赖 Cloudflare 的默认版本碰运气。

3. 第一次部署

点 Save and Deploy，Cloudflare 会拉取仓库、执行构建、把输出目录发布到全球网络。第一次通常一两分钟，完成后会给你一个 *.pages.dev 的预览地址。

先打开这个预览地址，确认三件事：首页能打开、CSS 和图片路径正常、刷新任意子页面不会 404。都通过之后，再去绑定正式域名。

如果首页 404：先检查 Output directory 是否填对。纯静态站最常见的错误是把 / 写成了 dist，或者把 dist 写成了 /。

4. 绑定 linlin.blog

进入项目的 Custom domains，点 Set up a custom domain，输入 linlin.blog。接下来分两种情况。

域名已经托管在 Cloudflare

最省事。添加域名后，Cloudflare 会自动创建或提示你确认 DNS 记录，SSL 证书也会自动签发。等状态变成 Active，直接访问 https://linlin.blog 就可以。

域名还在 Dynadot

两条路：

把 DNS 迁到 Cloudflare（推荐）：在 Cloudflare 添加站点，拿到分配的两个 nameserver，回 Dynadot 修改 nameserver。生效后再添加 Pages 自定义域名，后续解析都在 Cloudflare 里管理。
保留 Dynadot DNS：给 www 加一条 CNAME，指向 linlin-blog.pages.dev。apex 域名（不带 www）能否直接 CNAME，取决于 DNS 服务商是否支持 CNAME flattening；不支持的话，还是建议迁 nameserver。

SSL 证书由 Cloudflare 自动处理，不要自己再上传一张证书，也不要同时开两套 CDN。

5. 自动部署、预览和回滚

绑定 Git 之后，每次 push 到 main 都会触发一次生产部署。推其他分支会生成独立的预览地址，适合改版时先看效果。

如果某次更新出了问题，进入 Deployments，找到上一个正常版本，点 Rollback。这比在本地慌乱地 revert 更快，也不会影响仓库历史。

6. 常见报错

构建成功，但页面是 404

九成是 Output directory 不对。打开构建日志，看最后产出的目录名，再回到设置里改。纯静态站不要盲目填 dist。

构建失败：找不到命令

通常是 Build command 和项目不匹配，或者仓库里没有 lockfile。确认 package.json 存在，本地能跑 npm run build，再检查 Node 版本。

CSS / 图片 404

检查资源路径是不是绝对路径。站点部署在子路径时，绝对路径会指向错误位置；静态博客通常应该用相对路径，或者按框架的 base 配置处理。

域名打不开或一直转圈

先确认 nameserver 是否已经生效，再检查 DNS 记录是否指向 Pages。DNS 变更可能需要一段时间，不要在几分钟内反复改记录。

私有仓库连不上

回 Cloudflare 的 GitHub 授权里，确认这个仓库被包含在授权范围内。仓库改名或转移后，也需要重新授权。

7. 最后

到这里，代码、构建、域名三条链路就通了。后面每次写完文章，只需要 commit 和 push，剩下的交给 Cloudflare。

下一步是文章详情页和登录验证。前者决定阅读体验，后者决定哪些内容只给自己看。