课程二 · 认识公开展台
先弄懂:发布不是推送
本地文件夹是家里的作品,Gitee 是作品仓库,Cloudflare Pages 则是互联网上的公开展台。git push 保存源码,Wrangler 才负责把网页摆上展台。
01 学员操作
- 和老师一起说出三个位置:家里的作品、作品仓库、互联网展台。
- 记住 Pages 发布后会得到一个任何人都可能打开的网址。
- 发布前检查网页:不能出现姓名、电话、住址、学校、个人照片和任何密码。
公开网址真的会被别人看到。儿童隐私信息不能写进课堂网页。
SECOND JOURNEY · CLOUDFLARE PAGES
上一程,我们把源码送进了仓库。这一程,我们用 Wrangler 把静态网页发布到全世界都能打开的 Pages 展台。
开始部署课↓Cloudflare 不面向 18 岁以下个人。注册、邮箱验证和浏览器授权必须由老师、学校管理员或监护人完成。
跟着路线,一站一站来
课程二 · 认识公开展台
本地文件夹是家里的作品,Gitee 是作品仓库,Cloudflare Pages 则是互联网上的公开展台。git push 保存源码,Wrangler 才负责把网页摆上展台。
公开网址真的会被别人看到。儿童隐私信息不能写进课堂网页。
课程二 · 成人操作
Cloudflare 的网站和服务不面向 18 岁以下个人。这一步只能由年满 18 岁的老师、学校管理员或监护人演示完成,学生不注册个人账号。
账号属于成人。密码、验证码和恢复信息都不能展示给学生或交给 OpenCode。
课程二 · 成人操作
验证邮件是在确认“这个邮箱确实属于账号主人”。这是账号安全步骤,仍然由成人独立完成。
学生不打开成人邮箱,不读取验证码,也不保存成人账号信息。
课程二 · 回到作品
今天只发布老师准备好的静态网站。静态网站像一本已经印好的小册子,不需要服务器在背后不停计算。
opencode如果项目需要服务器运行,或者老师没有确认它能静态发布,请停下,不要盲目上传。
课程二 · 检查工具
Wrangler 是和 Cloudflare 沟通的小助手。我们只检查它是否存在,不在这堂课安装或升级任何软件。
请只运行 wrangler --version,告诉我 Wrangler 是否可用。不要安装、升级或修改任何软件。wrangler --version课程二 · 成人授权
wrangler login 会打开浏览器,请求成人课堂账号授权这台电脑。学生可以发起命令,但确认账号和点击授权必须由成人完成。
请解释 wrangler login 会做什么,然后运行它。浏览器打开后立即停下,让年满 18 岁的课堂账号持有人核对账号并完成授权。不要读取、展示或保存任何登录信息。浏览器授权不是普通练习步骤。学生不能替成人点击允许。
课程二 · 核对身份
部署前先看清楚“我要把作品放到谁的展台”。whoami 的意思就是“我是谁”。
请运行 wrangler whoami,只展示账号识别所需的信息,让老师确认是否为获授权的课堂账号。不要创建项目或部署。课程二 · 找到展品
源码像制作材料,发布目录才是做好的展品。不同网站的构建命令和发布目录可能不同,不能一律猜成 dist。
请只读检查当前课堂网站的 package.json、配置文件和目录结构,判断:1. 它是不是可部署到 Cloudflare Pages 的静态网站;2. 正确构建命令是什么;3. 构建后的发布目录是什么。先给出证据,不要构建、不要部署,也不要猜测固定为 dist。需要服务器才能运行的项目不走这条静态发布路线,必须交给老师处理。
课程二 · 准备展品
构建就是把制作材料整理成浏览器能直接展示的成品。Pages 至少需要在发布目录里找到网页入口。
请运行已确认的构建命令“你的构建命令”。成功后,只读检查“你的发布目录”是否存在、是否包含 index.html,并列出准备上传的文件数量。若构建失败,停止并解释第一个实际错误;不要部署。课程二 · 建立展台
Pages 项目是公开展台的名字。它不是本地文件夹,也不是 Gitee 仓库;它会成为网址的一部分。
我要创建一个 Cloudflare Pages 课堂项目,名称是“你的Pages项目名”,生产分支是 main。请先检查名称只含小写字母、数字和连字符,再展示将执行的 Wrangler 命令。必须等成人账号持有人确认后才能执行。不要部署文件。wrangler pages project create 你的Pages项目名 --production-branch=main课程二 · 正式开幕
现在 Wrangler 会把发布目录里的成品上传到刚创建的公开展台。这是外部写操作,执行前要再核对一次。
准备部署静态课堂网站:发布目录是“你的发布目录”,Pages 项目名是“你的Pages项目名”,生产分支是 main。请先再次确认目录存在且包含 index.html,展示上传文件数量和完整命令;等成人账号持有人确认后,执行部署并解释结果。wrangler pages deploy 你的发布目录 --project-name=你的Pages项目名 --branch=main部署地址是公开的。发现网页中有儿童隐私信息时,不要继续分享链接,立即告诉老师。
课程二 · 参观展台
上传完成不等于网页一定正确。真正的验收是打开网址,检查标题、文字、样式和按钮。
课程二 · 学会更新
展台已经建好,以后不需要重复创建 Pages 项目。修改网页后只需重新构建、检查,再部署到同一个项目。
请帮我更新已存在的 Cloudflare Pages 课堂网站:先展示当前改动并检查儿童隐私与敏感信息;等我确认后运行已确认的构建命令,检查发布目录包含 index.html,再展示部署到现有 Pages 项目的完整命令。必须等待成人账号持有人确认后才能部署,不要创建新项目。JOURNEY COMPLETE
这一部分还有 13 步没有打勾。
← 回到第一部分:推送到 Gitee