Cloudflare Pages 部署指南

Cloudflare Pages 是目前体验最好的静态网站托管服务之一。它与 GitHub 深度集成，能够实现GitOps：你只需要负责写代码并推送到 GitHub，Cloudflare Pages 会自动拉取、构建并发布到全球 CDN 节点。

静态部署

为什么选择 Pages + GitHub?

• 完全免费: 免费版提供无限带宽和请求数。
• 自动化: 告别手动 FTP 上传，git push 即上线。
• 预览环境: 每次 Pull Request 都会生成一个独立的预览链接，方便测试。

集成步骤

1. 准备代码仓库

确保你的网站代码已经上传到了 GitHub。 不管是纯 HTML/CSS 还是 Vue/React/VitePress 项目，确保根目录有 index.html 或者确保 package.json 中有正确的 build 命令。

2. 连接 Cloudflare

1. 登录 Cloudflare Dashboard。
2. 在左侧菜单选择 Workers & Pages。
3. 点击 Create Application (创建应用) -> Pages 标签页 -> Connect to Git。

3. 授权与选择仓库

1. 选择 GitHub 选项。
2. 如果是首次使用，会跳转到 GitHub 进行授权。你可以选择授权所有仓库或特定仓库（推荐选择特定仓库以最小化权限）。
3. 在列表中选中你要部署的项目仓库，点击 Begin setup。

4. 配置构建设置 (Build Settings)

这一步至关重要，Cloudflare 需要知道如何构建你的代码。

• Project name: 你的默认子域名（如 my-site.pages.dev）。
• Production branch: 生产分支（通常是 main 或 master）。
• Framework preset (框架预设):
  • Cloudflare 内置了几乎所有主流框架的配置。
  • VitePress: 选择 VitePress. Build command 会自动变为 npm run docs:build，Output directory 变为 .vitepress/dist。
  • Vue/React (create-vite): 选择 Vite. Output directory 通常是 dist。
  • Next.js (静态导出): 选择 Next.js (Static HTML Export). Output directory 变为 out。
  • 纯 HTML: 选择 None. Build command 留空，Output directory 填 . (或者如果你放在 public 文件夹就填 public)。

5. 完成部署

点击 Save and Deploy。 Cloudflare 此时会启动一台构建服务器，拉取你的代码，安装依赖 (npm install)，运行构建命令。

你可以实时在控制台看到构建日志。几分钟后，出现 Success! 字样，你的网站就上线了！

进阶配置

更新网站

不需要任何额外操作。每次你向 main 分支推送代码，Cloudflare Pages 都会自动触发新的构建。

自定义域名 (Custom Domain)

默认你会获得一个 *.pages.dev 的域名。 在 Pages 项目详情页 -> Custom domains，你可以绑定自己的域名。如果你的域名 DNS 也是托管在 Cloudflare 的，这个过程是一键完成的，且自动包含 SSL 证书。

环境变量

如果你的构建过程需要 API Key（例如 VITE_API_URL），请在 Settings -> Environment variables 中设置，不要硬编码在代码里。