Cloudflare Pages + GitHub：全球CDN加速的免费静态托管方案

GitHub Pages 搭好的博客，国内用户打开要等 3 秒，一看 Chrome Network，TTFB 800ms，资源加载断断续续。GitHub 的 CDN 节点在国内确实不太行。这时候就该 Cloudflare Pages 出场了——同样的免费，同样的 git push 自动部署，但人家在全球 330+ 个城市有节点，包括中国大陆附近的香港、东京、新加坡。换上去，国内访问速度直接从 3 秒变成 500ms。

Cloudflare Pages 对比 GitHub Pages

结论：对国内用户来说，Cloudflare Pages 是 GitHub Pages 的上位替代，而且迁移成本几乎为零。

一、把项目接到 Cloudflare Pages

方式一：通过 GitHub 直接导入（推荐）

1. 打开 dash.cloudflare.com，登录（没账号就注册一个，免费）
2. 左侧菜单点 Workers & Pages → Overview → Create application → Pages
3. 点 Connect to Git，授权 GitHub 账号
4. 选择你要部署的仓库
5. 配置构建设置：

1. 点 Save and Deploy，等 1-2 分钟就上线了。

默认域名是 项目名.pages.dev，你也可以在项目设置里绑自己的域名。

二、常用框架的构建设置

如果你的框架不在上面，去框架官方文档查一下 build 命令和输出目录就行。

三、绑定自定义域名

Cloudflare Pages 绑定域名比 GitHub Pages 更省事——它同时就是 DNS 服务商。

如果你域名已经在 Cloudflare 上管理：

直接去 Pages 项目的 Custom domains，输入你的域名，点 "Activate domain"，DNS 记录自动配置，HTTPS 自动签发，全程不需要你手动碰 DNS 设置。

如果域名不在 Cloudflare：

你需要先把域名的 NS 服务器改到 Cloudflare，或者手动在你的 DNS 服务商处加一条 CNAME 记录指向 项目名.pages.dev。推荐直接用 Cloudflare 管理 DNS，省心很多。

四、预览部署（PR Preview）

这是 Cloudflare Pages 最香的功能之一。你发一个 Pull Request，它自动构建并生成一个临时预览链接，比如：

https://abc123.production.project-name.pages.dev

代码 review 的时候，直接在浏览器里看效果，不用把代码拉到本地跑。合完 PR 后，预览链接自动回收。

GitHub Pages 没这个功能，你要看 PR 的效果只能在本地跑或者合了再看。

五、重定向和自定义 headers

在项目根目录放一个 _redirects 文件（注意没有扩展名），Cloudflare Pages 构建时自动读取：

# 旧链接 301 跳转到新链接
/old-blog/post-1   /blog/post-1   301
/feed              /rss.xml       301

# 所有 404 跳到首页（SPA 路由）
/*                 /index.html    200

同样，_headers 文件能自定义 HTTP 头：

# 所有 HTML 文件不做缓存
/*.html
  Cache-Control: no-cache

# 静态资源长期缓存
/assets/*
  Cache-Control: public, max-age=31536000, immutable

这两样东西 GitHub Pages 都做不到，除非你在 HTML 里写 <meta http-equiv="refresh"> 或者 Nginx 里配——但 Pages 哪来的 Nginx。

六、Cloudflare Workers Functions（免费后端能力）

Cloudflare Pages 不只是静态托管，它还内置了 Workers Functions。在项目里建一个 functions 目录，里面的 JS/TS 文件会自动变成 API 端点。

比如 functions/api/hello.js：

export async function onRequest(context) {
  const { request } = context;
  const url = new URL(request.url);
  const name = url.searchParams.get('name') || 'World';

  return new Response(JSON.stringify({
    message: `Hello, ${name}!`
  }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

访问 https://你的域名/api/hello?name=XiaoZheng 就能拿到 JSON 响应。

免费额度每天 10 万次请求，个人站点根本用不完。这意味着你甚至可以在静态博客上跑简单的 API——比如评论系统、访问统计、表单提交——而不需要额外租一台服务器。

七、从 GitHub Pages 迁移到 Cloudflare Pages

迁移过程比你想象的简单，因为两个平台的流程几乎一样：

1. 不用改任何代码：你的 Hexo/Hugo/VitePress 项目原封不动
2. 在 Cloudflare Pages 上连接同一个 GitHub 仓库
3. 配好构建命令和输出目录（跟原来一样）
4. 把域名从 GitHub 迁过来（改一下 CNAME 指向）
5. GitHub Pages 先别关，等 DNS 全球生效后（几小时），再关掉旧的

两个平台可以同时跑，DNS 切过来后无缝切换，用户完全感知不到。

免费额度对比

Cloudflare Pages 唯一的短板是每月 500 次构建，但对于个人博客来说，你一天也 push 不了 16 次。

Cloudflare Pages 是目前免费静态托管的天花板。GitHub Pages 有的它都有，GitHub Pages 没有的（预览部署、重定向、Workers Functions、全球 CDN）它也有。花 10 分钟迁移过去，你的博客在国内的访问体验能上一个台阶。而且这一切都不要钱——Cloudflare 的免费额度慷慨到让人怀疑他们的商业模式。