Cloudflare Pages 教程

一、简介

Cloudflare Pages 是一个 静态网站托管平台，可以直接从 GitHub 仓库读取代码、自动构建并部署到 Cloudflare 的全球 CDN，想拥有一个个人网站又不想花钱购买国内云服务厂商的服务器，那么 Cloudflare Pages 将是一个不二的选择

被称为赛博活佛的 Cloudflare 收费极其低廉，甚至给很多小网站提供免费服务，Cloudflare Pages 就是其中一个，其免费版提供每月一定的构建次数和静态分发能力，对于常规更新频率的个人项目或内容站完全足够使用

二、Cloudflare Pages 部署页面

登录Cloudflare 控制台

点击 计算 > Workers 和 Pages > 创建应用程序

image-20260713155712193

创建Pages

点击底部创建Pages，注意不是Workers

image-20260713162508053

导入现有 Git 存储库

​ 连接你的GitHub私有仓库，并上传你的博客源码，详见：GitHub中创建私有仓库

image-20260713163242990

部署配置

  • 框架预设

    • 无

  • 构建命令

    • npm run clean && npm run build

  • 输出目录

    • /public

  • 环境变量（可选）

    • NODE_VERSION = 你本地构建使用的版本

    • NPM_FLAGS = –legacy-peer-deps

  • 保存并部署

image-20260713165102312

三、Cloudflare Pages 设置自定义域

  • 新增自定义域，以下两个都需要

    • www.yourdomain.com
    • yourdomain.com

    image-20260713165406709

  • 在规则中自定义重定向规则

    • 点击左侧：域名 > 自己绑定的域名 > 规则 > 概述 > 创建规则 > 重定向规则
    • 表达式：(http.host eq "yourdomain.com")
    • 重定向url：https://www.yourdomain.com
    • 状态代码：301
    • 这样当访问裸域的时候会重定向

    image-20260713165914318

四、Cloudflare Pages 自动化部署

自动触发部署

当 Cloudflare Pages 和 GitHub 仓库连接成功后，每次将代码推送到仓库，都会触发自动部署

生产和预览

Cloudflare Pages 提供两种部署环境，可以通过 GitHub 不同分支实现

每个部署默认会分配一个 <项目名>-<部署ID>.pages.dev 这样的预览链接，方便在发布到正式环境前进行测试

回滚部署

Cloudflare Pages会保留所有历史版本，其最大价值在于，你可以随时将生产环境回滚到任何一个之前成功构建的版本

这个操作在 Pages 项目的“部署”页面里就能一键完成，非常方便