MACOS 实验课 · 2026第二部分 / 部署到 Pages
02

SECOND JOURNEY · CLOUDFLARE PAGES

把网页放上
互联网展台

上一程,我们把源码送进了仓库。这一程,我们用 Wrangler 把静态网页发布到全世界都能打开的 Pages 展台。

开始部署课
家里的作品本地文件夹作品仓库Gitee公开展台Pages
成人账号规则

Cloudflare 不面向 18 岁以下个人。注册、邮箱验证和浏览器授权必须由老师、学校管理员或监护人完成。

课程二进度0 / 13

跟着路线,一站一站来

你的第一次网页发布

每完成一步,就亲手打一个勾。切换页面或刷新后,进度仍会保留。
01STEP

课程二 · 认识公开展台

先弄懂:发布不是推送

约 4 分钟
老师讲

本地文件夹是家里的作品,Gitee 是作品仓库,Cloudflare Pages 则是互联网上的公开展台。git push 保存源码,Wrangler 才负责把网页摆上展台。

01 学员操作

  1. 和老师一起说出三个位置:家里的作品、作品仓库、互联网展台。
  2. 记住 Pages 发布后会得到一个任何人都可能打开的网址。
  3. 发布前检查网页:不能出现姓名、电话、住址、学校、个人照片和任何密码。
!

公开网址真的会被别人看到。儿童隐私信息不能写进课堂网页。

完成标准

你能用自己的话说清楚 git push 和 wrangler pages deploy 的区别。

02STEP

课程二 · 成人操作

老师注册 Cloudflare 账号

演示约 8 分钟
老师讲

Cloudflare 的网站和服务不面向 18 岁以下个人。这一步只能由年满 18 岁的老师、学校管理员或监护人演示完成,学生不注册个人账号。

01 学员操作

  1. 学生停下键盘操作,观看成人打开 Cloudflare 注册页。
  2. 成人使用自己持有的邮箱和安全密码创建课堂账号。
  3. 成人阅读并同意页面上的服务条款,然后完成人机验证。
  4. 学生只观察页面流程,不记录、拍摄或询问成人密码。
成人打开 Cloudflare 注册页
!

账号属于成人。密码、验证码和恢复信息都不能展示给学生或交给 OpenCode。

遇到问题?展开排查 +
  • 已经有成人课堂账号:无需重复注册,直接由账号持有人登录。
  • 注册页面发生变化:以页面当前字段和条款为准,不照搬旧截图。
完成标准

成人账号持有人看到 Cloudflare 提示检查邮箱,学生没有创建个人账号。

03STEP

课程二 · 成人操作

成人验证邮箱并登录

演示约 5 分钟
老师讲

验证邮件是在确认“这个邮箱确实属于账号主人”。这是账号安全步骤,仍然由成人独立完成。

01 学员操作

  1. 成人打开自己的邮箱,找到 Cloudflare 验证邮件。
  2. 成人核对发件人和链接域名,再点击验证链接。
  3. 成人返回 Cloudflare 控制台并登录。
  4. 确认控制台能看到 Workers & Pages 入口后,再让学生继续。
!

学生不打开成人邮箱,不读取验证码,也不保存成人账号信息。

遇到问题?展开排查 +
  • 没收到邮件:成人先检查垃圾邮件,再从 Cloudflare 页面重新发送。
  • 登录的不是课堂账号:立即退出,换成获授权的成人课堂账号。
完成标准

成人已登录 Cloudflare 控制台,课堂可以看到 Workers & Pages 入口。

04STEP

课程二 · 回到作品

打开静态课堂网站

约 4 分钟
老师讲

今天只发布老师准备好的静态网站。静态网站像一本已经印好的小册子,不需要服务器在背后不停计算。

01 学员操作

  1. 在访达中找到老师发放的静态课堂网站文件夹。
  2. 确认老师说明中写明了构建命令和发布目录,或说明它是无需构建的纯 HTML 项目。
  3. 在这个文件夹位置打开终端,输入 opencode。
  4. 告诉 OpenCode:接下来只检查和部署这个课堂网站。
TERMINAL · 进入 OpenCode
opencode
!

如果项目需要服务器运行,或者老师没有确认它能静态发布,请停下,不要盲目上传。

完成标准

OpenCode 位于正确的课堂网站文件夹,不是其他项目或电脑主目录。

05STEP

课程二 · 检查工具

确认 Wrangler 已准备好

约 3 分钟
老师讲

Wrangler 是和 Cloudflare 沟通的小助手。我们只检查它是否存在,不在这堂课安装或升级任何软件。

01 学员操作

  1. 复制提示词发给 OpenCode。
  2. 批准它运行只读的版本检查命令。
  3. 看到版本号就停下,不要因为出现更新提示而升级。
OPENCODE 提示词 · 发给 OpenCode
请只运行 wrangler --version,告诉我 Wrangler 是否可用。不要安装、升级或修改任何软件。
TERMINAL · 工具检查
wrangler --version
遇到问题?展开排查 +
  • wrangler: command not found:立即停下并举手,由老师检查教学电脑。
  • 看到 update available:这不是错误,课堂中不要升级。
完成标准

终端显示 Wrangler 的版本号。

06STEP

课程二 · 成人授权

用 Wrangler 请求登录

约 6 分钟
老师讲

wrangler login 会打开浏览器,请求成人课堂账号授权这台电脑。学生可以发起命令,但确认账号和点击授权必须由成人完成。

01 学员操作

  1. 让 OpenCode 先解释 wrangler login,再由学生批准运行命令。
  2. 浏览器打开后,学生松开鼠标和键盘。
  3. 成人核对登录的是获授权的课堂账号,阅读权限后点击允许。
  4. 看到授权成功后关闭页面,回到 OpenCode。
OPENCODE 提示词 · 发给 OpenCode
请解释 wrangler login 会做什么,然后运行它。浏览器打开后立即停下,让年满 18 岁的课堂账号持有人核对账号并完成授权。不要读取、展示或保存任何登录信息。
!

浏览器授权不是普通练习步骤。学生不能替成人点击允许。

遇到问题?展开排查 +
  • 浏览器没有打开:把终端显示的官方授权链接交给老师处理,不要发送到群聊。
  • 授权超时:由成人重新运行登录流程。
完成标准

终端显示登录成功,且授权由成人账号持有人完成。

07STEP

课程二 · 核对身份

确认正在使用哪个账号

约 3 分钟
老师讲

部署前先看清楚“我要把作品放到谁的展台”。whoami 的意思就是“我是谁”。

01 学员操作

  1. 让 OpenCode 运行 wrangler whoami。
  2. 老师核对显示的邮箱和 Cloudflare 账户名称。
  3. 如果不是本课程获授权的账号,立即停止,不创建项目、不部署。
OPENCODE 提示词 · 发给 OpenCode
请运行 wrangler whoami,只展示账号识别所需的信息,让老师确认是否为获授权的课堂账号。不要创建项目或部署。
遇到问题?展开排查 +
  • 提示未登录:回到上一步,由成人重新完成授权。
  • 账号错误:停止操作,由老师退出并换成正确账号。
完成标准

老师确认当前登录的是正确的成人课堂账号。

08STEP

课程二 · 找到展品

让 OpenCode 判断怎么构建

约 7 分钟
老师讲

源码像制作材料,发布目录才是做好的展品。不同网站的构建命令和发布目录可能不同,不能一律猜成 dist。

01 学员操作

  1. 把下面提示词发给 OpenCode。
  2. 阅读它找到的项目类型、构建命令和预计发布目录。
  3. 与老师发放项目时的说明进行对照。
  4. 如果结论不一致,停下来请老师判断。
OPENCODE 提示词 · 发给 OpenCode
请只读检查当前课堂网站的 package.json、配置文件和目录结构,判断:1. 它是不是可部署到 Cloudflare Pages 的静态网站;2. 正确构建命令是什么;3. 构建后的发布目录是什么。先给出证据,不要构建、不要部署,也不要猜测固定为 dist。
!

需要服务器才能运行的项目不走这条静态发布路线,必须交给老师处理。

完成标准

你已经写下经过老师确认的构建命令和发布目录。

09STEP

课程二 · 准备展品

构建并检查首页

约 8 分钟
老师讲

构建就是把制作材料整理成浏览器能直接展示的成品。Pages 至少需要在发布目录里找到网页入口。

01 学员操作

  1. 把占位符换成老师确认过的构建命令和发布目录。
  2. 批准 OpenCode 执行构建。
  3. 让它检查发布目录是否存在,并查找 index.html。
  4. 如果构建失败,只处理第一个真实错误,不连续乱试命令。
OPENCODE 提示词 · 发给 OpenCode
请运行已确认的构建命令“你的构建命令”。成功后,只读检查“你的发布目录”是否存在、是否包含 index.html,并列出准备上传的文件数量。若构建失败,停止并解释第一个实际错误;不要部署。
遇到问题?展开排查 +
  • 发布目录不存在:先核对构建是否成功以及目录名称是否正确。
  • 没有 index.html:停止部署,回到上一步让老师确认项目类型。
  • 构建失败:把第一条 error 交给 OpenCode 解释,不要一次改很多地方。
完成标准

构建成功,发布目录存在,而且里面能找到 index.html。

10STEP

课程二 · 建立展台

创建 Pages 项目

约 6 分钟
老师讲

Pages 项目是公开展台的名字。它不是本地文件夹,也不是 Gitee 仓库;它会成为网址的一部分。

01 学员操作

  1. 想一个不含真实姓名和学校的小写项目名,例如 class-space-game。
  2. 项目名只使用小写英文字母、数字和连字符。
  3. 让 OpenCode 先列出命令,老师确认账号和项目名后再批准执行。
  4. 生产分支填写 main。
OPENCODE 提示词 · 发给 OpenCode
我要创建一个 Cloudflare Pages 课堂项目,名称是“你的Pages项目名”,生产分支是 main。请先检查名称只含小写字母、数字和连字符,再展示将执行的 Wrangler 命令。必须等成人账号持有人确认后才能执行。不要部署文件。
TERMINAL · 项目创建命令
wrangler pages project create 你的Pages项目名 --production-branch=main
遇到问题?展开排查 +
  • 项目名已被使用:换一个不包含个人信息的新名字。
  • 提示没有权限:停止并让成人核对课堂账号。
完成标准

Wrangler 显示项目创建成功,并给出项目的 pages.dev 地址。

11STEP

课程二 · 正式开幕

上传发布目录

约 7 分钟
老师讲

现在 Wrangler 会把发布目录里的成品上传到刚创建的公开展台。这是外部写操作,执行前要再核对一次。

01 学员操作

  1. 替换发布目录和 Pages 项目名两个占位符。
  2. 检查命令中的目录确实包含刚才确认过的 index.html。
  3. 由老师确认正在使用正确账号和正确项目。
  4. 批准执行,等待所有文件上传完成。
OPENCODE 提示词 · 发给 OpenCode
准备部署静态课堂网站:发布目录是“你的发布目录”,Pages 项目名是“你的Pages项目名”,生产分支是 main。请先再次确认目录存在且包含 index.html,展示上传文件数量和完整命令;等成人账号持有人确认后,执行部署并解释结果。
TERMINAL · 部署命令
wrangler pages deploy 你的发布目录 --project-name=你的Pages项目名 --branch=main
!

部署地址是公开的。发现网页中有儿童隐私信息时,不要继续分享链接,立即告诉老师。

遇到问题?展开排查 +
  • 目录错误:取消命令,回到构建检查,不要随便换目录试。
  • 上传中断:检查网络,确认项目状态后由老师决定是否重试。
  • 配置文件警告:先让 OpenCode 解释警告,不要假装没看到。
完成标准

Wrangler 显示 Deployment complete,并返回一个 pages.dev 地址。

12STEP

课程二 · 参观展台

打开网址完成验收

约 4 分钟
老师讲

上传完成不等于网页一定正确。真正的验收是打开网址,检查标题、文字、样式和按钮。

01 学员操作

  1. 点击或复制 Wrangler 返回的 https://...pages.dev 地址。
  2. 检查首页能打开,标题和主要内容正确。
  3. 点击页面里至少一个按钮或链接。
  4. 再次检查页面没有姓名、电话、学校、照片或密码。
遇到问题?展开排查 +
  • 刚部署就打不开:确认 Wrangler 已显示成功,等待一两分钟后刷新。
  • 只有空白页:检查浏览器控制台前先让老师确认资源路径和 index.html。
  • 显示旧内容:强制刷新页面,再确认使用的是最新部署地址。
完成标准

网页可以从 pages.dev 打开,内容正确,且没有儿童隐私信息。

13STEP

课程二 · 学会更新

修改后再发布一次

约 8 分钟
老师讲

展台已经建好,以后不需要重复创建 Pages 项目。修改网页后只需重新构建、检查,再部署到同一个项目。

01 学员操作

  1. 在课堂网页中修改一小段安全的文字。
  2. 让 OpenCode 展示改动,然后重新运行已确认的构建命令。
  3. 再次检查发布目录中的 index.html。
  4. 部署到同一个 Pages 项目,刷新 pages.dev 页面查看变化。
OPENCODE 提示词 · 以后可以复用的提示词
请帮我更新已存在的 Cloudflare Pages 课堂网站:先展示当前改动并检查儿童隐私与敏感信息;等我确认后运行已确认的构建命令,检查发布目录包含 index.html,再展示部署到现有 Pages 项目的完整命令。必须等待成人账号持有人确认后才能部署,不要创建新项目。
完成标准

同一个 pages.dev 地址显示了刚才的新内容,你能说出“修改、构建、检查、部署”四个动作。

JOURNEY COMPLETE

终点就在前面

0%

这一部分还有 13 步没有打勾。

← 回到第一部分:推送到 Gitee