Cloudflare Pages 完整指南 2026
Deploy static sites, frameworks, serverless backend — unlimited bandwidth, free SSL, preview deployments
目录
什么是 Cloudflare Pages — 与传统主机的区别
Cloudflare Pages 是一个专门用于托管静态网站、渐进式 Web 应用程序和单页应用程序的平台，它使用 Cloudflare 的全球 CDN 网络，服务器分布在世界各地，包括东南亚和泰国。
与传统主机（共享主机、VPS）的主要区别在于，Cloudflare Pages 不使用单一服务器。相反，它使用边缘计算，这意味着您的网站会被缓存并从距离每个访客最近的服务器交付。这确保了最大的速度，无论访客身在何处。
与传统主机不同，您需要自己管理服务器维护、更新、安全补丁和备份。Cloudflare Pages 会自动处理一切。您只需将代码推送到 GitHub，Cloudflare Pages 就会通过其 CI/CD 管道立即部署。
另一个优势是清晰的环境分离。您可以获得开箱即用的 Production、Preview 和 Development 环境。这让您可以在发布到生产环境之前安全地测试更改，降低破坏实时网站的风险。
Cloudflare Pages 建立在与 Cloudflare Workers 相同的基础设施之上，因此您的代码运行在处理每天数十亿请求的强大边缘网络上。
Cloudflare Pages 免费方案 — 您可以做什么
Cloudflare Pages 的免费层级功能丰富，是博客、作品集和中小型网站的绝佳选择。
无限带宽：没有月度带宽限制。您可以为访客提供任意多的数据，无需担心超额费用 — 这与许多主机提供商对带宽进行上限的做法大不相同。
无限请求：HTTP 请求也不受限制。无论您是获取数据、上传文件还是与 API 通信，都没有请求配额。
每月 500 次构建：您可以每月构建和部署网站最多 500 次，这对于小型出版商、内容创建者甚至全职开发人员来说绰绰有余。
免费自定义域名：将您自己的域名指向 Cloudflare Pages，无需额外费用。没有加价或隐藏的域名费用。
自动 HTTPS：Cloudflare Pages 自动管理 SSL/TLS 证书。所有流量默认都是加密的，证书会自动续期 — 您永远不必考虑它。
包含 Functions：免费层级包括 Cloudflare Functions，每天提供 100,000 次无服务器函数调用 — 足够大多数小型网站使用。
预览部署：GitHub 上的每个拉取请求都会自动获得一个预览 URL，以便您在合并到生产之前测试更改。
Cloudflare Pages 支持的框架
Cloudflare Pages 支持 100 多个框架和生成器，涵盖几乎所有现代 Web 技术堆栈。
Next.js：流行的 React 框架，完全支持静态生成 (SSG) 和通过 Cloudflare Functions 的服务器端渲染 (SSR)。在 Cloudflare 网络上具有一流的性能。
Nuxt.js：用于构建通用应用程序的 Vue.js 框架。Nuxt 2 和 3 都完美运行。非常适合 JAMstack 项目。
SvelteKit：现代轻量级框架，支持 SSR、SSG 和增量静态再生。非常快的构建和出色的开发体验。
Hugo：用 Go 编写的静态网站生成器，速度极快。完美适用于博客和内容丰富的网站。即使有数千个页面也能在毫秒内构建。
Jekyll：用于博客和文档的热门选择。内置支持使将 Jekyll 网站部署到 Cloudflare Pages 变得轻而易举。
Gatsby：强调通过 GraphQL 获取数据进行静态生成的 React 框架。非常适合内容营销网站和博客。
Astro：完美用于内容驱动的网站。默认不发送 JavaScript，同时仍支持交互式组件 — 对 SEO 和性能非常有利。
VitePress：基于 Vite 构建的静态网站生成器，非常适合文档网站和技术内容。
MkDocs：基于 Python 的文档生成器，具有漂亮的主题。直接部署到 Cloudflare Pages。
Hexo：用 Node.js 编写的博客框架，在亚洲很受欢迎。完全支持部署到 Cloudflare Pages。
如何在 Cloudflare Pages 上从 GitHub 部署网站
部署过程非常简单直接，只需几分钟。
第一步 — 创建 GitHub 存储库：首先，创建一个新的 GitHub 存储库并将您的代码推送到它。或者，如果您已经有存储库，只需将其链接起来。
第二步 — 访问 Cloudflare Dashboard：访问 dash.cloudflare.com 并登录您的 Cloudflare 帐户。
第三步 — 点击 Pages：在左侧边栏菜单中，找到 Pages 并点击它。
第四步 — 连接 GitHub 帐户：点击"Connect to Git"，选择 GitHub，并授权 Cloudflare 访问您的 GitHub 存储库。
第五步 — 选择存储库：选择要部署的存储库，然后点击"Begin Setup"。
第六步 — 配置构建：系统会询问您关于框架（Next.js、Hugo 等）、构建命令和输出目录的问题。在大多数情况下，Cloudflare 会自动检测这些设置。
第七步 — 部署：点击"Save and Deploy"，Cloudflare Pages 开始构建和部署您的网站。
几分钟内您将拥有像 project-name.pages.dev 这样的实时 URL，您的网站已在全球上线！
在 Cloudflare Pages 上设置自定义域名和 SSL
部署后，您可能想使用自己的域名而不是默认的 Cloudflare Pages 子域。
第一步 — 添加自定义域名：转到 Cloudflare Pages Dashboard 中的项目设置，导航到自定义域名，然后点击"Add Custom Domain"。
第二步 — 输入域名：输入您的域名（例如：example.com 或 blog.example.com）。
第三步 — 配置 DNS：Cloudflare Pages 会提供 DNS 说明。通常，您需要更改 CNAME 记录以指向 Cloudflare Pages。
第四步 — 设置 Cloudflare Nameservers（可选）：如果您也使用 Cloudflare 进行 DNS 管理，此步骤会变得更简单 — 只需将代理状态设置为"Proxied"（橙色云）。
SSL/TLS 证书：Cloudflare Pages 自动为您的自定义域名配置和管理 SSL/TLS 证书。证书会自动续期，并且 HTTPS 在所有方案中默认强制执行。
在 Cloudflare Dashboard 的 SSL/TLS 设置中启用 HTTPS 重定向（强制所有 HTTP 流量到 HTTPS）只需一次点击。
Cloudflare Pages Functions — 无服务器后端
Cloudflare Pages Functions 让您在 Cloudflare 边缘网络上编写无服务器后端代码，使用与 Cloudflare Workers 相同的运行时，但直接集成到 Pages 中。
通过 Functions，您可以构建 API、从数据库获取数据、发送电子邮件、执行图像处理，以及做几乎任何后端任务 — 所有这些都在无服务器基础设施上，无需管理服务器。
创建 Functions：在存储库的根目录创建一个 functions 文件夹，然后创建 JavaScript 文件，如 functions/api/hello.js。部署后，该函数可在 example.com/api/hello 等 URL 处访问。
示例 Function：返回 JSON 的简单函数如下所示：
export async function onRequest(context) {
return new Response(JSON.stringify({ message: 'Hello World' }), {
headers: { 'Content-Type': 'application/json' }
});
}免费层级每天允许 100,000 次函数调用，足够大多数小型网站使用。您可以在 MongoDB、Fauna 或 Supabase 等外部数据库中存储状态。
环境变量和预览部署
Cloudflare Pages 支持环境变量，用于安全地存储密钥、API 密钥、数据库凭证和配置，而不需要在您的存储库中暴露它们。
设置变量：在您的 Pages 项目设置中，转到环境变量并添加所需的变量。您可以为生产和预览环境设置不同的值。
在代码中使用：在 Next.js 或 Node.js 中，通过 process.env.VARIABLE_NAME 访问它们。对于客户端代码，添加 NEXT_PUBLIC_ 前缀，以便浏览器可以访问它们。
预览部署：每个拉取请求都会自动获得一个预览部署，带有自己独特的 URL。这让您和您的团队在上线前审查更改。预览部署在创建后保持活跃 6 个月。
这个工作流程防止错误，让非技术利益相关者审查更改，并提供所有网站修改的清晰审计线索。
Cloudflare Pages vs Vercel vs Netlify — 比较
Cloudflare Pages：优势：无限带宽、全球 CDN、慷慨的免费层级、包含 Functions、与 Cloudflare DNS 无缝集成。劣势：社区比 Vercel/Netlify 小。
Vercel：优势：卓越的 Next.js 优化（Vercel 创建了 Next.js）、出色的性能分析内置、快速预览部署、强大的社区。劣势：免费层级带宽限制为 100GB/月。
Netlify：优势：部署工作流程简单，如 Cloudflare Pages、内置表单处理、Identity 身份验证、广泛的插件生态系统。劣势：构建分钟数有限（免费层级 300/月）、带宽配额、某些功能需要付费方案。
总结：对于教育机构、初学者和不需要深度 SSR 的静态网站，选择 Cloudflare Pages。对于 Next.js 优化，选择 Vercel。对于表单处理和身份验证需求，选择 Netlify。
Cloudflare Pages 的局限性 — 何时选择传统主机
局限性：Cloudflare Pages 在静态网站和 JAMstack 应用程序中表现出色，但不适合需要繁重服务器端处理、长时间运行的后台作业、高内存使用或文件系统权限管理的应用程序。
构建超时为 15 分钟，因此如果您的项目需要较长的编译时间，请优化您的构建过程。
何时选择传统 VPS 主机：如果您需要 WordPress、需要持久数据库的 Node.js 应用程序、视频流、机器学习模型或长时间运行的后台作业，VPS 是正确的选择。传统主机提供完整的服务器控制并可以处理复杂的应用程序。
作为初学者、博客作者、作品集创建者或静态内容网站建设者，Cloudflare Pages 是聪明的选择 — 它是免费的、快速的，并且需要最少的维护。