01 它是干嘛的
Pages 面向前端与静态站点：连接 Git 仓库后自动完成「拉代码 → 安装依赖 → 构建 → 部署到全球 CDN」的整套流程，每个分支与每次合并请求都会生成独立的预览地址，适合团队协作与个人项目托管。
02 为什么会有它
发布一个网站，为什么曾经要花一整天
在没有这类平台之前，前端上线流程typically是：本地 npm run build 生成 dist 目录，用 FTP 或 scp 传到服务器，再手动配 Nginx、申请证书、设置缓存。改一个错别字也要重来一遍，而且没有版本记录，回滚靠手动备份。
更麻烦的是「环境」：产品经理要看效果得等部署到测试环境，设计师要确认样式得找人发版本，反馈周期以天计。
Vercel、Netlify 把这条路打通之后成为行业惯例：Git 即是发布按钮，预览环境即是沟通工具。Cloudflare Pages 在这个模式上叠加了自己的优势——部署产物直接落在自家全球边缘网络上，不需要额外配置 CDN，并且与 Workers 深度打通，静态站可以就地加上动态接口。
03 它怎么工作
平台在你的仓库上挂了 webhook，一旦有提交就启动构建容器，产出静态文件后分发到全球边缘节点，并保留历史版本供秒级回滚。
从代码提交到全球上线：一条自动流水线
- 1① 监听提交
你 push 代码或合并分支，GitHub/GitLab 触发 webhook 通知平台。
- 2② 拉取与构建
平台在隔离环境中克隆代码、安装依赖、执行你指定的构建命令（如 npm run build）。
- 3③ 产物分发到边缘
构建输出目录（如 dist）被上传并复制到全球节点，静态资源自动获得 CDN 与 HTTPS。
- 4④ 生成预览与生产地址
主干分支部署到正式域名，其他分支与 PR 生成独立预览地址，方便评审。
- 5⑤ 版本与回滚
每次部署都留有不可变版本，出问题可一键回滚到任意历史部署。
04 谁在用它
Hugo、VitePress、Astro 等生成静态站，提交即上线，长期零运维。
Vue/React 单页应用部署，配合 Workers 提供 API 或服务端渲染。
每个功能分支生成独立预览链接，产品与设计直接在真机上验收。
Pages 托管前端，Pages Functions 提供轻量后端，一套项目完成全栈。
05 怎么用
会用 Git 就能上手，全程图形界面，无需服务器知识。
- 01把代码推到 GitHub / GitLab 仓库（注意不要提交 node_modules）。
- 02登录 Cloudflare 控制台 → Workers & Pages → 创建 Pages 项目 → 连接 Git 仓库。
- 03填写构建命令（如 npm run build）与输出目录（如 dist / .output/public）。
- 04点击部署，等待构建日志显示成功，即可通过 xxx.pages.dev 访问。
- 05在 Custom domains 中绑定自己的域名，HTTPS 证书自动签发。
- 06需要动态接口时，在 functions/ 目录写文件即可，路由按文件名自动映射。
避坑提示
- !确保本地构建能通过再推送，构建环境更干净，本地能跑不代表云端能跑。
- !大文件与媒体资源不要放进仓库，交给 R2 或 CDN，否则每次构建都会很慢。
- !环境变量在控制台配置，不要把密钥写进前端代码——前端产物任何人都能下载查看。
06 关键概念
- 静态站点
- 构建时就把页面生成为 HTML 文件，访问时无需服务器运算，天然快且便宜。
- 构建产物
- 构建命令输出的目录，就是要发布的最终文件集合。
- 预览环境
- 为每个分支生成的临时站点，用于上线前评审。
- 回滚
- 把线上切回某个历史版本，是应对故障最快的手段。