02
SECOND JOURNEY · CLOUDFLARE PAGES
把网页放上
互联网展台
上一程,我们把源码送进了仓库。这一程,我们用 Wrangler 把静态网页发布到全世界都能打开的 Pages 展台。
家里的作品本地文件夹→作品仓库Gitee→公开展台Pages
成人账号规则Cloudflare 不面向 18 岁以下个人。注册、邮箱验证和浏览器授权必须由老师、学校管理员或监护人完成。
老师讲本地文件夹是家里的作品,Gitee 是作品仓库,Cloudflare Pages 则是互联网上的公开展台。git push 保存源码,Wrangler 才负责把网页摆上展台。
01 学员操作
- 和老师一起说出三个位置:家里的作品、作品仓库、互联网展台。
- 记住 Pages 发布后会得到一个任何人都可能打开的网址。
- 发布前检查网页:不能出现姓名、电话、住址、学校、个人照片和任何密码。
!公开网址真的会被别人看到。儿童隐私信息不能写进课堂网页。
02STEP
课程二 · 成人操作
老师注册 Cloudflare 账号
◷ 演示约 8 分钟老师讲Cloudflare 的网站和服务不面向 18 岁以下个人。这一步只能由年满 18 岁的老师、学校管理员或监护人演示完成,学生不注册个人账号。
01 学员操作
- 学生停下键盘操作,观看成人打开 Cloudflare 注册页。
- 成人使用自己持有的邮箱和安全密码创建课堂账号。
- 成人阅读并同意页面上的服务条款,然后完成人机验证。
- 学生只观察页面流程,不记录、拍摄或询问成人密码。
成人打开 Cloudflare 注册页↗!账号属于成人。密码、验证码和恢复信息都不能展示给学生或交给 OpenCode。
遇到问题?展开排查 +
- 已经有成人课堂账号:无需重复注册,直接由账号持有人登录。
- 注册页面发生变化:以页面当前字段和条款为准,不照搬旧截图。
老师讲验证邮件是在确认“这个邮箱确实属于账号主人”。这是账号安全步骤,仍然由成人独立完成。
01 学员操作
- 成人打开自己的邮箱,找到 Cloudflare 验证邮件。
- 成人核对发件人和链接域名,再点击验证链接。
- 成人返回 Cloudflare 控制台并登录。
- 确认控制台能看到 Workers & Pages 入口后,再让学生继续。
!学生不打开成人邮箱,不读取验证码,也不保存成人账号信息。
遇到问题?展开排查 +
- 没收到邮件:成人先检查垃圾邮件,再从 Cloudflare 页面重新发送。
- 登录的不是课堂账号:立即退出,换成获授权的成人课堂账号。
老师讲今天只发布老师准备好的静态网站。静态网站像一本已经印好的小册子,不需要服务器在背后不停计算。
01 学员操作
- 在访达中找到老师发放的静态课堂网站文件夹。
- 确认老师说明中写明了构建命令和发布目录,或说明它是无需构建的纯 HTML 项目。
- 在这个文件夹位置打开终端,输入 opencode。
- 告诉 OpenCode:接下来只检查和部署这个课堂网站。
TERMINAL · 进入 OpenCode
opencode
!如果项目需要服务器运行,或者老师没有确认它能静态发布,请停下,不要盲目上传。
05STEP
课程二 · 检查工具
确认 Wrangler 已准备好
◷ 约 3 分钟老师讲Wrangler 是和 Cloudflare 沟通的小助手。我们只检查它是否存在,不在这堂课安装或升级任何软件。
01 学员操作
- 复制提示词发给 OpenCode。
- 批准它运行只读的版本检查命令。
- 看到版本号就停下,不要因为出现更新提示而升级。
OPENCODE 提示词 · 发给 OpenCode
请只运行 wrangler --version,告诉我 Wrangler 是否可用。不要安装、升级或修改任何软件。
TERMINAL · 工具检查
wrangler --version
遇到问题?展开排查 +
- wrangler: command not found:立即停下并举手,由老师检查教学电脑。
- 看到 update available:这不是错误,课堂中不要升级。
06STEP
课程二 · 成人授权
用 Wrangler 请求登录
◷ 约 6 分钟老师讲wrangler login 会打开浏览器,请求成人课堂账号授权这台电脑。学生可以发起命令,但确认账号和点击授权必须由成人完成。
01 学员操作
- 让 OpenCode 先解释 wrangler login,再由学生批准运行命令。
- 浏览器打开后,学生松开鼠标和键盘。
- 成人核对登录的是获授权的课堂账号,阅读权限后点击允许。
- 看到授权成功后关闭页面,回到 OpenCode。
OPENCODE 提示词 · 发给 OpenCode
请解释 wrangler login 会做什么,然后运行它。浏览器打开后立即停下,让年满 18 岁的课堂账号持有人核对账号并完成授权。不要读取、展示或保存任何登录信息。
!浏览器授权不是普通练习步骤。学生不能替成人点击允许。
遇到问题?展开排查 +
- 浏览器没有打开:把终端显示的官方授权链接交给老师处理,不要发送到群聊。
- 授权超时:由成人重新运行登录流程。
老师讲部署前先看清楚“我要把作品放到谁的展台”。whoami 的意思就是“我是谁”。
01 学员操作
- 让 OpenCode 运行 wrangler whoami。
- 老师核对显示的邮箱和 Cloudflare 账户名称。
- 如果不是本课程获授权的账号,立即停止,不创建项目、不部署。
OPENCODE 提示词 · 发给 OpenCode
请运行 wrangler whoami,只展示账号识别所需的信息,让老师确认是否为获授权的课堂账号。不要创建项目或部署。
遇到问题?展开排查 +
- 提示未登录:回到上一步,由成人重新完成授权。
- 账号错误:停止操作,由老师退出并换成正确账号。
08STEP
课程二 · 找到展品
让 OpenCode 判断怎么构建
◷ 约 7 分钟老师讲源码像制作材料,发布目录才是做好的展品。不同网站的构建命令和发布目录可能不同,不能一律猜成 dist。
01 学员操作
- 把下面提示词发给 OpenCode。
- 阅读它找到的项目类型、构建命令和预计发布目录。
- 与老师发放项目时的说明进行对照。
- 如果结论不一致,停下来请老师判断。
OPENCODE 提示词 · 发给 OpenCode
请只读检查当前课堂网站的 package.json、配置文件和目录结构,判断:1. 它是不是可部署到 Cloudflare Pages 的静态网站;2. 正确构建命令是什么;3. 构建后的发布目录是什么。先给出证据,不要构建、不要部署,也不要猜测固定为 dist。
!需要服务器才能运行的项目不走这条静态发布路线,必须交给老师处理。
老师讲构建就是把制作材料整理成浏览器能直接展示的成品。Pages 至少需要在发布目录里找到网页入口。
01 学员操作
- 把占位符换成老师确认过的构建命令和发布目录。
- 批准 OpenCode 执行构建。
- 让它检查发布目录是否存在,并查找 index.html。
- 如果构建失败,只处理第一个真实错误,不连续乱试命令。
OPENCODE 提示词 · 发给 OpenCode
请运行已确认的构建命令“你的构建命令”。成功后,只读检查“你的发布目录”是否存在、是否包含 index.html,并列出准备上传的文件数量。若构建失败,停止并解释第一个实际错误;不要部署。
遇到问题?展开排查 +
- 发布目录不存在:先核对构建是否成功以及目录名称是否正确。
- 没有 index.html:停止部署,回到上一步让老师确认项目类型。
- 构建失败:把第一条 error 交给 OpenCode 解释,不要一次改很多地方。
老师讲Pages 项目是公开展台的名字。它不是本地文件夹,也不是 Gitee 仓库;它会成为网址的一部分。
01 学员操作
- 想一个不含真实姓名和学校的小写项目名,例如 class-space-game。
- 项目名只使用小写英文字母、数字和连字符。
- 让 OpenCode 先列出命令,老师确认账号和项目名后再批准执行。
- 生产分支填写 main。
OPENCODE 提示词 · 发给 OpenCode
我要创建一个 Cloudflare Pages 课堂项目,名称是“你的Pages项目名”,生产分支是 main。请先检查名称只含小写字母、数字和连字符,再展示将执行的 Wrangler 命令。必须等成人账号持有人确认后才能执行。不要部署文件。
TERMINAL · 项目创建命令
wrangler pages project create 你的Pages项目名 --production-branch=main
遇到问题?展开排查 +
- 项目名已被使用:换一个不包含个人信息的新名字。
- 提示没有权限:停止并让成人核对课堂账号。
老师讲现在 Wrangler 会把发布目录里的成品上传到刚创建的公开展台。这是外部写操作,执行前要再核对一次。
01 学员操作
- 替换发布目录和 Pages 项目名两个占位符。
- 检查命令中的目录确实包含刚才确认过的 index.html。
- 由老师确认正在使用正确账号和正确项目。
- 批准执行,等待所有文件上传完成。
OPENCODE 提示词 · 发给 OpenCode
准备部署静态课堂网站:发布目录是“你的发布目录”,Pages 项目名是“你的Pages项目名”,生产分支是 main。请先再次确认目录存在且包含 index.html,展示上传文件数量和完整命令;等成人账号持有人确认后,执行部署并解释结果。
TERMINAL · 部署命令
wrangler pages deploy 你的发布目录 --project-name=你的Pages项目名 --branch=main
!部署地址是公开的。发现网页中有儿童隐私信息时,不要继续分享链接,立即告诉老师。
遇到问题?展开排查 +
- 目录错误:取消命令,回到构建检查,不要随便换目录试。
- 上传中断:检查网络,确认项目状态后由老师决定是否重试。
- 配置文件警告:先让 OpenCode 解释警告,不要假装没看到。
老师讲上传完成不等于网页一定正确。真正的验收是打开网址,检查标题、文字、样式和按钮。
01 学员操作
- 点击或复制 Wrangler 返回的 https://...pages.dev 地址。
- 检查首页能打开,标题和主要内容正确。
- 点击页面里至少一个按钮或链接。
- 再次检查页面没有姓名、电话、学校、照片或密码。
遇到问题?展开排查 +
- 刚部署就打不开:确认 Wrangler 已显示成功,等待一两分钟后刷新。
- 只有空白页:检查浏览器控制台前先让老师确认资源路径和 index.html。
- 显示旧内容:强制刷新页面,再确认使用的是最新部署地址。
老师讲展台已经建好,以后不需要重复创建 Pages 项目。修改网页后只需重新构建、检查,再部署到同一个项目。
01 学员操作
- 在课堂网页中修改一小段安全的文字。
- 让 OpenCode 展示改动,然后重新运行已确认的构建命令。
- 再次检查发布目录中的 index.html。
- 部署到同一个 Pages 项目,刷新 pages.dev 页面查看变化。
OPENCODE 提示词 · 以后可以复用的提示词
请帮我更新已存在的 Cloudflare Pages 课堂网站:先展示当前改动并检查儿童隐私与敏感信息;等我确认后运行已确认的构建命令,检查发布目录包含 index.html,再展示部署到现有 Pages 项目的完整命令。必须等待成人账号持有人确认后才能部署,不要创建新项目。