Cloudflare Pages：现代网站的静态站点托管

介绍

Cloudflare Pages 是一个构建在 Cloudflare 全球网络基础设施之上的静态站点托管平台。它将世界级 CDN 的速度与直观的部署管道结合在一起，使其成为想要专注于构建而不是配置服务器的开发人员的绝佳选择。从投资组合网站到功能齐全的 Web 应用程序，Cloudflare Pages 可以处理内容交付、SSL 终止和扩展的繁重工作 - 所有这些都提供慷慨的免费套餐。本指南逐步介绍在 Cloudflare Pages 上设置和优化站点的每一步。

入门：帐户设置和您的第一个项目

在部署任何内容之前，您需要一个 Cloudflare 帐户。前往 Cloudflare 仪表板并导航至 Pages 部分。单击 创建项目 开始。

Cloudflare Pages 直接与 Git 提供商集成 - GitHub、GitLab 和 Bitbucket 均受支持。授权集成后，选择要部署的存储库。每次推送到您选择的分支都会触发自动构建和部署。这种紧密的 Git 集成是 Cloudflare Pages 工作流程的支柱。

构建配置和环境设置

定义您的构建管道

Cloudflare Pages 会自动检测许多框架 - Hugo、Next.js、Jekyll、SvelteKit 等 - 但您也可以指定自定义构建命令和输出目录。

框架	构建命令	输出目录
雨果	占位符_0	占位符_1
Next.js	占位符_0	占位符_1
SvelteKit	占位符_0	占位符_1
定制	占位符_0	占位符_1

环境变量

API 密钥或数据库 URL 等敏感配置永远不应该提交到您的存储库。 Cloudflare Pages 支持每个环境（生产、预览和特定于分支）的环境变量。在项目设置下的仪表板中设置它们。例如，连接到 Supabase 的站点可能需要：

SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key-here

自定义域

默认情况下，每个 Cloudflare Pages 项目都会获得一个 *.pages.dev 子域，但自定义域可以直接添加。在项目仪表板中，转到 自定义域，输入您的域，然后按照 DNS 说明进行操作。如果您的域已经在 Cloudflare 上，则设置几乎是即时的 - Cloudflare 会自动处理 DNS 解析并配置 TLS 证书。

部署管道和 CI/CD

自动部署

Cloudflare Pages 最强大的功能是其自动 CI/CD 管道。当您将代码推送到生产分支时，Cloudflare Pages 会克隆存储库、运行构建命令并在全局部署输出。典型的工作流程如下所示：

将更改推送到 main 或 master
Cloudflare 检测到推送并开始构建
构建工件分发到 Cloudflare 的边缘网络
该网站在几秒钟内即可上线

预览部署

预览部署非常适合在更改生效之前对其进行审查。每个拉取请求或非生产分支推送都会生成一个唯一的预览 URL。这使您可以测试更改，与利益相关者共享它们，并在合并到生产之前发现问题。

# Example: creating a branch for a new feature
git checkout -b feature/redesign
# make changes, commit, and push
git push origin feature/redesign
# Cloudflare generates: https://feature-redesign.project.pages.dev

安全和性能优化

全球CDN交付

Cloudflare Pages 自动从全球 330 多个边缘站点为您的站点提供服务。静态资产缓存在边缘，从而减少访问者的延迟，无论其地理位置如何。第一个字节到达速度很快，并且由于 HTML、CSS、JavaScript 和图像的积极缓存，后续页面加载速度甚至更快。

默认 SSL/TLS

每个 Cloudflare Pages 站点都会收到一个免费的自动续订 TLS 证书。无需配置 — HTTPS 开箱即用。这可确保用户与最近的边缘服务器之间的加密连接，从而保护传输中的数据。

缓存和性能调优

虽然 Cloudflare Pages 具有合理的默认设置，但您可以使用构建输出目录中的 _headers 和 _redirects 文件来微调缓存行为。这些文件使您可以精细地控制缓存持续时间和 URL 重定向。

# _headers example
/assets/*
  Cache-Control: max-age=31536000
  X-Frame-Options: DENY

# _redirects example
/blog/old-post  /blog/new-post  301

分析和监控

Cloudflare 仪表板为您的 Pages 项目提供内置分析。您可以跟踪请求量、带宽使用情况和响应状态代码。如需更详细的见解，可以使用单个 JavaScript 片段启用 Cloudflare Web Analytics，为您提供隐私优先、无 cookie 的访问者指标。

更进一步：无服务器功能和工作人员

页面功能

Cloudflare Pages 支持在边缘运行的无服务器功能（称为 Pages Functions）。这些使您可以向静态站点添加动态行为，而无需管理后端服务器。一个简单的联系表单处理程序可以用几行编写：

// functions/api/contact.js
export async function onRequest(context) {
  const { request } = context;
  const formData = await request.json();
  // process form submission
  return new Response(JSON.stringify({ success: true }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

Cloudflare 工人

对于更复杂的边缘逻辑（自定义路由、A/B 测试、身份验证检查），您可以将 Cloudflare Workers 与您的 Pages 项目集成。工作人员在同一全球网络上运行，可以在请求到达静态资产之前拦截请求，从而实现强大的中间件模式。

概括

Cloudflare Pages 提供了一个引人注目的软件包：快速的全球 CDN 交付、基于 Git 的无缝 CI/CD、免费 SSL 以及通过边缘功能扩展功能的能力 - 所有这些都具有慷慨的免费套餐。它消除了传统托管的运营开销，让开发人员能够快速、自信地交付网站。对于构建现代 Web 项目的任何人来说，Cloudflare Pages 是值得认真考虑的托管解决方案。