从零开始部署 Cloudflare Pages 服务

  • 8 min read

Cloudflare Pages 是一个免费的 JAMstack 平台，用于部署静态网站和全栈应用。它提供全球 CDN 分发、自动 HTTPS、Git 集成部署等特性，是部署个人博客、文档站、落地页等的绝佳选择。

本文将从零开始，带你一步步完成 Cloudflare Pages 服务的搭建和部署。

什么是 Cloudflare Pages？

Cloudflare Pages 的核心优势：

  • 免费额度慷慨：每月 500 次构建、无限带宽、无限请求
  • 全球 CDN：部署到 Cloudflare 全球 300+ 节点，访问速度极快
  • Git 集成：连接 GitHub/GitLab，推送代码自动触发构建部署
  • 自动 HTTPS：免费 SSL 证书，零配置安全访问
  • Preview 部署：每个 Pull Request 自动生成预览环境
  • Wrangler CLI：支持命令行直接部署，灵活可控

方式一：通过 Dashboard 创建项目

第一步：进入 Cloudflare Dashboard

登录 Cloudflare Dashboard，在左侧导航栏中找到 Workers & Pages，然后点击 Create 按钮。

Cloudflare Dashboard

第二步：选择创建方式

Cloudflare Pages 提供两种创建方式：

方式适用场景特点
Connect to Git持续开发的项目推送代码自动构建部署，支持 PR 预览
Direct Upload快速验证或静态资源直接上传文件，适合一次性部署

Create Project

对于日常开发，强烈推荐使用 Connect to Git 方式，这样可以实现代码推送即部署的完整 CI/CD 流程。

第三步：连接 Git 仓库

选择 Connect to Git 后，你需要先授权 Cloudflare 访问你的 GitHub 或 GitLab 账号，然后选择要部署的仓库。

Connect Git

提示：你需要确保仓库至少包含一个分支有可构建的内容。

第四步：配置构建设置

选择仓库后，需要配置以下关键参数：

配置项说明常见框架示例
Framework preset框架预设，自动填充构建命令Hugo、Next.js、Astro、Gatsby 等
Build command构建命令hugo --minify、npm run build、astro build
Build output directory构建产物目录public、dist、build
Root directory项目根目录（monorepo 时使用）/、apps/web

Build Settings

如果你的框架不在预设列表中，选择 "None" 手动填写即可。以下是常见静态站点生成器的配置参考：

Hugo：

Build command: hugo --minify
Output directory: public

Zola：

Build command: zola build
Output directory: public

Astro：

Build command: npm run build
Output directory: dist

Next.js (Static Export)：

Build command: npm run build
Output directory: out

配置完成后，点击 Save and Deploy。

第五步：等待部署完成

Cloudflare 会自动开始构建流程：克隆仓库 → 安装依赖 → 执行构建命令 → 部署到 CDN。

Deploying

通常整个过程只需 30 秒到几分钟，取决于项目大小和依赖数量。

第六步：访问你的网站

部署成功后，Cloudflare 会自动分配一个 *.pages.dev 的域名，你可以立即访问。

Deploy Success

此时你的网站已经部署到了 Cloudflare 的全球 CDN 网络上，任何地方的访问者都能获得极速体验。

方式二：使用 Wrangler CLI 部署

如果你更喜欢命令行操作，或者需要在 CI/CD 流水线中集成部署，可以使用 Cloudflare 官方的 Wrangler CLI 工具。

安装 Wrangler

npm install -g wrangler

登录 Cloudflare

wrangler login

这会打开浏览器让你授权 Wrangler 访问你的 Cloudflare 账号。授权成功后终端会显示确认信息。

Wrangler CLI

部署网站

# 先本地构建
zola build  # 或 npm run build 等

# 部署到 Cloudflare Pages
wrangler pages deploy ./public --project-name=my-site

首次部署时，Wrangler 会自动创建项目。后续部署会直接更新现有项目。

项目配置文件

你还可以创建 wrangler.toml 配置文件来简化部署命令：

name = "my-site"
compatibility_date = "2024-01-01"
pages_build_output_dir = "public"

之后只需执行：

wrangler pages deploy

自定义域名

Cloudflare Pages 默认提供 *.pages.dev 域名，但你也可以绑定自己的域名。

Custom Domain

绑定步骤

  1. 进入 Pages 项目的 Custom domains 设置页
  2. 输入你的域名（如 blog.example.com）
  3. 按照提示在 DNS 中添加 CNAME 记录指向 *.pages.dev

如果你的域名已经托管在 Cloudflare，DNS 记录会自动配置，整个过程非常丝滑。

DNS 配置示例

类型名称内容代理
CNAMEblogmy-site.pages.dev已代理

环境变量与配置

设置环境变量

在 Pages 项目的 Settings → Environment variables 中，你可以为不同环境设置变量：

  • Production：生产环境，main 分支合并时生效
  • Preview：预览环境，PR 分支构建时生效

这对于使用 API Key、分析追踪 ID 等配置非常有用。

_redirects 文件

在构建输出目录中放置 _redirects 文件可以配置路由重定向和 SPA 回退：

# SPA 回退：所有路径指向 index.html
/*  /index.html  200

# 重定向示例
/old-page  /new-page  301

_headers 文件

自定义 HTTP 响应头：

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

# 安全头
/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff

常见问题

构建失败怎么办？

  1. 检查 Build command 和 Output directory 是否正确
  2. 查看构建日志中的具体错误信息
  3. 确保本地能成功执行构建命令

如何回滚部署？

Cloudflare Pages 会保留部署历史。在项目的 Deployments 页面中，找到之前的成功部署，点击 Rollback to this deployment 即可一键回滚。

免费额度够用吗？

对于个人博客、文档站等中小型站点来说，Cloudflare Pages 的免费额度完全足够：

资源免费额度
构建次数500 次/月
带宽无限制
请求数无限制
站点数量无限制

总结

Cloudflare Pages 是目前最值得推荐的免费静态网站托管平台之一。无论是通过 Dashboard 还是通过 Wrangler CLI，部署流程都非常简洁。

关键步骤回顾：

  1. 准备代码仓库：确保项目能在本地成功构建
  2. 连接 Cloudflare Pages：Dashboard 或 Wrangler CLI 均可
  3. 配置构建参数：框架预设或手动指定构建命令和输出目录
  4. 部署上线：Git 推送自动部署 或 CLI 手动部署
  5. 绑定自定义域名（可选）：在 DNS 中添加 CNAME 记录

现在就试试吧，你的网站只需要几分钟就能部署到全球 CDN 上了！🚀