把网页放到 GitHub，推送即自动上线

第 X 章：把网页放到 GitHub，推送即自动上线（Cloudflare Pages Git 集成）

本章目标：网页源文件统一放在一个 GitHub 私有仓库 里，Cloudflare Pages 连上这个仓库后，每次推送（push）代码，网站自动重新部署，再也不用手动上传压缩包。全程免费。

为什么要这样做

不怕丢：所有网页都有版本记录，改坏了可以一键回滚。
省事：改完文件 → 推送 → 1～2 分钟后线上自动更新。
私有：仓库设为 Private，别人看不到你的课程源文件，但网站照常公开访问。
一个仓库放多个网站：每个网站一个文件夹，根目录放一个总目录页。

准备工作

一个 GitHub 账号（https://github.com）。
一个 Cloudflare 账号（https://dash.cloudflare.com）。
你的网页文件（至少有一个 index.html）。

第 1 步：在 GitHub 新建私有仓库

登录 GitHub，右上角点 + → New repository。
Repository name 填一个名字，例如 cloudflare。
选择 Private（私有）。
可以勾选 Add a README file（方便第一次就有 main 分支）。
点 Create repository。

注意：Cloudflare 选择”生产分支”时，要求仓库里至少已经有一个分支被推送过，所以仓库不能是完全空的。

第 2 步：把网页文件放进仓库

推荐的目录结构（一个仓库放多个网站）：

cloudflare/
├── index.html        ← 总目录页，列出所有网站/章节
├── robots.txt
├── README.md
├── apsdemo/          ← 网站 1
│   └── index.html
└── course/           ← 课程章节
    └── ch-github-cloudflare-pages.html

方法 A：网页上传（不会命令行也能用） 仓库页面点 Add file → Upload files，把文件/文件夹拖进去，底部填写说明后点 Commit changes。

方法 B：命令行（推荐，以后改起来最快）

git clone https://github.com/你的用户名/cloudflare.git
cd cloudflare
# 把网页文件复制进来后：
git add -A
git commit -m "添加网页"
git push origin main

第 3 步：在 Cloudflare 创建 Pages 项目并连接 GitHub

登录 Cloudflare 控制台（https://dash.cloudflare.com），左侧进入 Workers 和 Pages。
点 创建应用程序（Create application）。
⚠️ 一定要切到 Pages 标签页，再点 连接到 Git（Connect to Git）。新版控制台默认打开的是 Workers，如果在 Workers 里导入仓库，建出来的是 Worker，不是 Pages 网站（本课程实操时就踩过这个坑）。
选择 GitHub。第一次使用时点 添加帐户（Add account），浏览器跳到 GitHub 安装 Cloudflare Workers and Pages 应用：
- 选择你的 GitHub 账号；
- Repository access 选 Only select repositories，只勾选 cloudflare 仓库；
- 点 Install & Authorize。GitHub 如果要求输入密码或验证码，照提示完成。
回到 Cloudflare，页面顶部进度条显示 1 选择存储库 → 2 设置构建和部署 → 3 部署站点。在”选择一个存储库”里看到 GitHub 帐户你的用户名，选中 cloudflare 后点 开始设置（Begin setup）。

看不到仓库？页面上有提示”如果未显示您的存储库，请在 GitHub 上为 Cloudflare Pages 应用配置存储库访问权限”，点进去把仓库勾上即可（GitHub → Settings → Applications，https://github.com/settings/installations）。

第 4 步：设置构建和部署（纯 HTML 网站这样填）

页面标题是”设置构建和部署 / 为你的用户名/cloudflare 配置自动构建和部署”。

字段（中文界面）	填写
项目名称	例如 `aichuhai`。下方会提示最终网址
生产分支	`main`
构建设置 → 框架预设	无
构建命令	留空
构建输出目录	`/`（整个仓库根目录就是网站）
根目录（高级）→ 路径	保持 `/`
环境变量（高级）	不需要

网址说明：项目名就是网址前缀，但如果 项目名.pages.dev 已被别人占用，Cloudflare 会自动加一段随机后缀。本课程实操得到的是 aichuhai-8he.pages.dev。以”成功”页面显示的网址为准。

只想发布某一个文件夹（如 apsdemo），就把”构建输出目录”改成 apsdemo。

点 保存并部署（Save and Deploy）。你会看到四个阶段依次完成：正在初始化构建环境 → 正在克隆 Git 存储库 → 正在构建应用程序 → 正在部署到 Cloudflare 全球网络。纯 HTML 网站约 1 分钟。

出现 “成功！您的项目已部署到以下区域：全球” 就完成了。点 预览项目 打开网站，点 继续处理项目 进入项目管理页。

第 5 步：验证

打开 https://项目名.pages.dev/ → 看到总目录页（实操示例：https://aichuhai-8he.pages.dev/）；
打开 https://项目名.pages.dev/apsdemo/ → 看到对应网站。

第 6 步：以后怎么更新网站

修改或新增网页文件；
git add -A && git commit -m "更新第 3 章" && git push（或在 GitHub 网页上直接编辑 → Commit changes）；
Cloudflare 自动开始新部署，1～2 分钟后线上更新。
在 Cloudflare 项目页的 Deployments 里能看到每一次部署，出问题可以对旧版本点 Rollback（回滚）。

小技巧：提交说明以 [skip ci] 或 [CF-Pages-Skip] 开头，这次推送就不会触发部署（适合只改 README）。

常见问题

不小心建成了 Worker？ 在 Workers 标签页导入仓库会建出 Worker。回到”创建应用程序”，切到 Pages 标签页重新做第 3 步。多余的 Worker 可以在其设置里删除。
原来用”直接上传（Direct Upload）“建的项目，能改成连 GitHub 吗？ 不能。需要新建一个连接 Git 的 Pages 项目（老项目可以保留或删除）。同样，Git 项目以后也不能改回直接上传。
选不到生产分支？ 仓库里还没有任何提交。先上传一个文件或勾选 README 再试。
Cloudflare 读不到仓库？ 到 GitHub 的 Applications 页面，检查 Cloudflare Workers and Pages 是否授权了这个仓库；不行就卸载后重新走第 3 步。
想用自己的域名？ 项目页 → Custom domains → 添加域名。pages.dev 网址会继续可用。

本章小结

GitHub 私有仓库负责”存”和”记录版本”，Cloudflare Pages 负责”免费托管和自动上线”。以后整套课程、每个案例网站都按”一个文件夹一个网站”放进这个仓库，推送即上线。

参考：Cloudflare 官方文档《Git integration guide》https://developers.cloudflare.com/pages/get-started/git-integration/ 与《GitHub integration》https://developers.cloudflare.com/pages/configuration/git-integration/github-integration/ （2026-11 查阅；控制台按钮名称可能随版本略有变化）。