我用 Cloudflare Pages 免费部署个人网站的过程

从准备 GitHub 仓库，到连接 Cloudflare Pages、设置构建、自动部署以及绑定自定义域名的完整实用流程。

我用 Cloudflare Pages 免费部署个人网站的过程

个人网站做好以后，常常会因为托管费用和服务器维护太麻烦而一直留在本地。我希望采用一种更简单的方式：把代码推送到 GitHub 后自动部署，不需要管理服务器，同时可以直接使用 HTTPS。对于用 HTML、CSS 和 JavaScript 制作的静态网站，Cloudflare Pages 很符合这些要求。

本文整理了从准备 GitHub 仓库、连接 Cloudflare Pages，到使用默认地址和自定义域名公开网站的完整流程。示例以不使用框架的静态网站为主，但 React、Vite、Astro 等项目只要正确设置构建命令和输出目录，基本流程也相同。

1. 部署前的准备

我准备了 Cloudflare 账号、GitHub 账号和网站仓库，以及作为首页的 index.html。最简单的静态网站只需要在仓库根目录放置 index.html，并根据需要添加 style.css 和 app.js。

上传前，我先在本地打开网站，确认页面布局和链接可以正常工作。图片应使用仓库内的相对路径，例如 ./images/photo.webp，而不是只在某台电脑上有效的绝对路径。我也检查了仓库中是否包含 API 密钥、密码或私人配置。敏感信息应该存放在环境变量或 Cloudflare Secrets 中，因为即使之后删除文件，泄露的内容仍可能保留在 Git 历史中。

2. 把网站上传到 GitHub

我创建了新仓库，提交网站文件，并推送到 main 分支。Cloudflare Pages 的 Git 集成支持 GitHub 和 GitLab，每次推送变更时都可以自动构建和部署。公开和私有仓库都可以使用。

Cloudflare 需要获得所选仓库的访问权限。如果平台允许只选择特定仓库，最好只授权准备部署的仓库，而不是开放账号中的所有仓库。

3. 创建 Cloudflare Pages 项目

我在 Cloudflare 控制面板中打开 Workers & Pages，依次选择创建应用、Pages 和连接 Git。授权 GitHub 后，选择之前准备好的仓库。

主要设置包括项目名称、生产分支、框架预设、构建命令和构建输出目录。项目名称会用于默认的 pages.dev 地址，生产分支通常选择 main。纯 HTML 网站可以选择不使用框架，并且在没有构建流程时留空构建命令。输出目录必须指向真正需要公开的文件夹。

例如，Vite 项目的构建命令通常是 npm run build，输出目录通常是 dist。但不同项目可能不同，因此需要同时检查 package.json 和框架文档。如果是 monorepo，还必须把网站所在的子目录设置为正确的根目录。

4. 检查第一次部署

保存设置后，Cloudflare 会下载仓库，在需要时安装依赖，构建并部署网站。成功后会生成类似 project-name.pages.dev 的地址。

我没有只查看首页，还检查了子页面的直接访问、CSS 和 JavaScript 的加载、图片路径、移动端布局、HTTPS，以及不存在地址的处理方式。如果部署失败，首先查看 Deployments 页面中的构建日志。常见原因包括输出目录错误、Node.js 版本不同、文件名大小写不一致，以及图片没有提交到仓库。特别是在 macOS 上看似正常的大小写差异，可能会在部署环境中导致错误。

5. 每次更新都会自动重新部署

Git 集成最方便的地方是后续维护。在本地修改后把内容推送到 main，Cloudflare Pages 就会自动开始新的部署，不需要通过 FTP 上传文件，也不需要登录服务器。

其他分支和拉取请求还可以使用预览部署。这样可以在修改正式网站之前，在真实的 Web 环境中确认布局和功能。部署历史也有助于比较正常版本和出现问题的版本。

6. 绑定自定义域名

pages.dev 默认地址已经可以使用，但自定义域名能让个人网站拥有更稳定的身份。可以在 Pages 项目的 Custom domains 中添加域名，然后按照 Cloudflare 的提示设置 DNS。

如果域名的 DNS 已经由 Cloudflare 管理，连接过程通常比较简单。使用其他 DNS 服务时，需要准确添加指定的 CNAME 或其他记录。DNS 变更有时需要等待传播。连接后，建议在根域名和 www 地址之间选择一个作为主地址，并把另一个重定向过去。

7. 免费并不等于无限制

Cloudflare Pages 免费套餐对个人静态网站比较宽裕，但仍然有上限。根据官方文档，免费套餐每月可以执行 500 次构建，每个网站最多包含 20,000 个文件，单个静态资源最大为 25 MiB。Pages Functions 请求会计入 Workers 套餐的使用量。

因此，不要不加处理地上传所有原始照片和视频。可以把图片转换并优化为 WebP；如果需要大量媒体文件，则应考虑独立存储。即使托管免费，域名注册费用仍需另外支付。服务上限可能会变化，实际运营前最好再次查看官方 Limits 页面。

总结

Cloudflare Pages 最方便的地方是无需直接维护服务器。向 GitHub 推送变更就等于进行部署，HTTPS 和全球分发也不需要复杂的额外配置。

完整流程可以概括为：先在本地测试静态网站，把代码推送到 GitHub 的 main 分支，在 Cloudflare Pages 中连接仓库，设置构建命令和输出目录，检查 pages.dev 地址，根据需要绑定自定义域名，之后通过 Git push 自动部署更新。

第一次设置时选项可能看起来很多，但连接完成后，静态网站的维护工作会明显减少。对于希望在没有托管费用的情况下启动个人网站的人来说，这是一个实用的选择。

参考资料

• Cloudflare Pages Git 集成：https://developers.cloudflare.com/pages/get-started/git-integration/

• Cloudflare Pages 限制：https://developers.cloudflare.com/pages/platform/limits/