MACOS 三日创造营 · 2026Day 2 · 个人主页与发布

DAY 2 · DESIGN, SAVE, PUBLISH

做出并发布个人主页

上午从设计美学和 UI Prompt 出发完成个人主页;下午把同一个项目推送到 Gitee,再由成人用 Wrangler 公开发布。

开始今天的课程
Day 2 · 个人主页与发布原创课程主插图
从设计到发布自己的主页
DAY 020%0 / 33 步完成

跟着路线,一站一站来

制作 → 保存 → 发布,一条完整路线

每完成一步,就亲手打一个勾。切换日期或刷新后,进度仍会保留。
上午

设计美学与个人主页

01STEP

Day 2 上午 · 认识主页

个人主页是一张数字名片

约 6 分钟
OPENCode GUI 大图

先看界面,再开始操作

个人主页是一张数字名片原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

主页不是把所有信息堆在一起,而是让访客快速知道“你喜欢什么、做过什么”。课堂只用昵称和安全内容。

01 学员操作

  1. 确定主页给谁看。
  2. 列出欢迎区、兴趣区、作品区三个部分。
  3. 选择一个安全昵称。
!

不用真实姓名、学校、班级、住址、电话、个人邮箱或社交账号。

完成标准

你能用一句话说清主页目的和三个内容区。

02STEP

Day 2 上午 · 美学基础

学会六个设计原则

约 12 分钟
OPENCode GUI 大图

先看界面,再开始操作

学会六个设计原则原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

好看不是“装饰很多”,而是色彩有重点、文字有层级、内容会呼吸。

01 学员操作

  1. 色彩:一个主色加少量辅助色。
  2. 字体:标题与正文有明显区别。
  3. 留白:元素之间留出呼吸空间。
  4. 层级:先看到最重要的信息。
  5. 对齐:让边缘形成整齐的线。
  6. 一致性:相同按钮和卡片保持同样规则。
完成标准

你能从一张页面里指出六个原则中的至少四个。

03STEP

Day 2 上午 · 风格观察

在 UI Prompt 选择视觉方向

约 10 分钟
OPENCode GUI 大图

先看界面,再开始操作

在 UI Prompt 选择视觉方向原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

风格库是一面灵感墙,不是完整答案。先观察,再选择适合内容的方向。

01 学员操作

  1. 打开 UI Prompt 中文设计风格库。
  2. 浏览并选择一种适合个人主页的风格。
  3. 写下一句选择理由。
  4. 检查它是否仍符合可读、简洁和六个基础原则。
打开 UI Prompt 中文风格库
完成标准

你选定一种风格,并能说出它为什么适合主页。

04STEP

Day 2 上午 · 设计决定

填写主页设计决定卡

约 8 分钟
OPENCode GUI 大图

先看界面,再开始操作

填写主页设计决定卡原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

先做决定,再让 OpenCode 写代码,页面会更统一。

01 学员操作

  1. 记录 UI Prompt 风格及选择理由。
  2. 决定主色和字体感觉。
  3. 写出三个内容区。
  4. 加入一个个人特色,例如像素徽章或太空贴纸。
  5. 清理复制来的风格提示词,删除不适合儿童主页或无法实现的要求。
完成标准

设计卡包含风格、理由、颜色、字体、内容区和个人特色。

05STEP

Day 2 上午 · 素材安全

只准备可以公开的素材

约 8 分钟
OPENCode GUI 大图

先看界面,再开始操作

只准备可以公开的素材原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

公开主页上的每张图和每个字都可能被陌生人看到。

01 学员操作

  1. 使用昵称和插画头像。
  2. 作品只选没有个人信息的课堂作品。
  3. 联系方式使用虚构内容或老师提供的课堂地址。
  4. 不使用儿童面部照片和带定位信息的原图。
!

上传给 OpenCode 的项目文件也可能交给远程模型处理。

完成标准

素材清单中没有儿童个人信息或真实联系方式。

06STEP

Day 2 上午 · 先规划

让 OpenCode 先画页面蓝图

约 8 分钟
OPENCode GUI 大图

先看界面,再开始操作

让 OpenCode 先画页面蓝图原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

先看结构,再写代码。这样更容易发现内容过多或层级混乱。

01 学员操作

  1. 把设计决定卡发给 OpenCode。
  2. 要求先输出页面分区和颜色/字体规则。
  3. 检查三个内容区是否清楚。
  4. 确认后才允许开始编辑。
发给 OPENCODE · 规划提示词
请根据我的主页设计决定卡,先输出页面结构、视觉层级、主色、字体、留白和响应式计划。只做计划,不写代码;不要加入真实姓名、学校、联系方式或个人照片。
完成标准

你确认了一份包含结构和视觉规则的页面计划。

07STEP

Day 2 上午 · 开始制作

逐步实现响应式个人主页

约 20 分钟
OPENCode GUI 大图

先看界面,再开始操作

逐步实现响应式个人主页原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

让 OpenCode 分阶段完成:先结构,再样式,最后互动。每一步都在浏览器看一眼。

01 学员操作

  1. 批准实现 HTML 内容结构。
  2. 预览后再批准 CSS 视觉样式。
  3. 最后只加入必要的小互动。
  4. 要求手机和 Mac 屏幕都能正常阅读。
发给 OPENCODE · 实现提示词
计划已确认。请分三阶段实现:HTML 结构、CSS 视觉、必要互动。每完成一阶段就停止并告诉我怎样预览;不要一次全部完成,不读取项目外文件。
完成标准

主页在浏览器中打开,三个内容区完整,风格与设计卡一致。

08STEP

Day 2 上午 · 设计体检

从四个角度检查并修改

约 12 分钟
OPENCode GUI 大图

先看界面,再开始操作

从四个角度检查并修改原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

第一版不是终点。要像设计师一样指出具体问题,而不是只说“更好看”。

01 学员操作

  1. 检查手机宽度是否横向溢出。
  2. 检查文字大小和颜色对比。
  3. 检查按钮与链接是否能用。
  4. 检查色彩、字体、留白、层级、对齐和一致性。
  5. 给 OpenCode 一条具体修改意见并复查。
完成标准

手机与 Mac 预览均可读,并完成至少一条具体设计修改。

09STEP

Day 2 上午 · 发布前复核

请成人检查公开内容

约 8 分钟
OPENCode GUI 大图

先看界面,再开始操作

请成人检查公开内容原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

推送和部署之前,要同时检查页面、文件、提交历史和图片元数据。

01 学员操作

  1. 让 OpenCode 只读扫描 Key、密码、.env 和个人信息。
  2. 自己检查页面文字和图片。
  3. 请老师或监护人复核项目。
  4. 获得明确同意后,才进入下午的 Gitee 与 Wrangler。
!

没有成人复核就不要公开仓库或部署。

完成标准

成人确认项目可以公开,扫描未发现真实密钥或儿童个人信息。

下午 · 第一站

把个人主页推送到 Gitee

10STEP

起点 · 账号准备

注册一个 163 邮箱

约 8 分钟
OPENCode GUI 大图

先看界面,再开始操作

注册一个 163 邮箱原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

邮箱就像你在互联网上的收件地址。Gitee 会向它发送验证邮件,所以必须能正常收信。

01 学员操作

  1. 打开网易邮箱注册页,选择一个容易记住、适合长期使用的邮箱名。
  2. 设置一个独立密码,不要和课堂电脑的开机密码相同。
  3. 按页面提示完成手机号验证,然后进入收件箱。
  4. 把完整邮箱地址记下来,例如 name@163.com;下一步会用到。
打开 163 邮箱
!

验证码和邮箱密码只能由你自己输入,不要发给老师、同学或 OpenCode。

遇到问题?展开排查 +
  • 邮箱名已被占用:换一个组合,不要反复尝试相同名字。
  • 收不到短信:检查手机号和网络,等待一分钟后再试。
完成标准

你已经进入 163 邮箱收件箱,并知道自己的完整邮箱地址。

11STEP

账号准备

注册并验证 Gitee

约 10 分钟
OPENCode GUI 大图

先看界面,再开始操作

注册并验证 Gitee原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

Gitee 是保存代码的网络平台。用户名会出现在仓库地址中,建议使用简短的英文或拼音。

01 学员操作

  1. 打开 Gitee 注册页,填写昵称、163 邮箱和密码。
  2. 谨慎设置个性地址(用户名);它会成为仓库网址的一部分。
  3. 完成页面要求的安全验证。
  4. 回到 163 邮箱,打开 Gitee 的验证邮件并完成激活。
  5. 重新登录 Gitee,确认右上角能看到自己的头像或昵称。
打开 Gitee 注册页
!

Gitee 官方也建议使用国内邮箱接收激活邮件。密码和验证码不要粘贴进 OpenCode。

遇到问题?展开排查 +
  • 没有验证邮件:先查看垃圾邮件,再在 Gitee 登录页使用“重发激活邮件”。
  • 用户名不可用:加入课程年份或简短数字。
完成标准

你能正常登录 Gitee,账号不再提示等待邮箱验证。

12STEP

第一站 · 认识任务

准备课堂项目

约 3 分钟
OPENCode GUI 大图

先看界面,再开始操作

准备课堂项目原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

仓库是一只装代码的文件夹;提交是一张“这次改了什么”的存档;推送则是把本地存档送到 Gitee。

01 学员操作

  1. 在访达中找到老师发放的课堂项目文件夹。
  2. 打开 OpenCode Desktop,点击打开项目或文件夹。
  3. 选择老师发放的课堂项目文件夹,核对顶部项目名称。
发给 OPENCODE · 发给 OpenCode
请只读检查当前项目目录,告诉我项目名称、主要文件和是否已经是 Git 仓库。不要修改任何文件。
!

这不是安装教程。如果命令不存在,请举手,让老师检查教学电脑环境。

完成标准

OpenCode 已经启动,而且它当前面对的就是课堂项目文件夹。

13STEP

第二站 · 告诉 Git 你是谁

配置 Git 姓名和邮箱

约 5 分钟
OPENCode GUI 大图

先看界面,再开始操作

配置 Git 姓名和邮箱原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

Git 会在每次提交旁写下作者信息。这里使用你的名字和刚注册的 163 邮箱。

01 学员操作

  1. 复制下面的提示词,替换两个中文占位符。
  2. 粘贴到 OpenCode,并阅读它准备执行的命令。
  3. 如果 OpenCode 请求执行 git config,确认姓名和邮箱无误后批准。
  4. 让 OpenCode 再读取一次配置,核对结果。
发给 OPENCODE · 发给 OpenCode
请只为当前个人主页仓库配置 Git 用户名“你的安全昵称”和邮箱“你的163邮箱”,不要修改全局配置。先解释将运行什么,等我回复确认后再执行;完成后读取当前仓库配置让我核对,并在右侧审查区显示变化。不要读取或展示任何密码。
遇到问题?展开排查 +
  • 写错了:用同一条提示词再配置一次,新的值会覆盖旧值。
  • 邮箱不是密码;这里可以填写完整的 @163.com 地址。
完成标准

OpenCode 显示的 user.name 和 user.email 都与刚才填写的一致。

14STEP

第三站 · 建立安全通道

生成 SSH 密钥

约 7 分钟
OPENCode GUI 大图

先看界面,再开始操作

生成 SSH 密钥原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

SSH 密钥是一对钥匙:公钥像可以公开的锁,私钥是真正开锁的钥匙。公钥交给 Gitee,私钥永远留在电脑里。

01 学员操作

  1. 将提示词中的邮箱换成你自己的 163 邮箱。
  2. 让 OpenCode 先检查 ~/.ssh/id_ed25519 是否已经存在,避免覆盖旧密钥。
  3. 没有旧密钥时,由老师先审阅 OpenCode 准备运行的 Shell 操作;确认不会覆盖后才在对话中回复执行。
  4. 只让 OpenCode 显示以 .pub 结尾的公钥文件。
发给 OPENCODE · 发给 OpenCode
我要为 Gitee 配置 SSH。请先检查 ~/.ssh/id_ed25519 是否存在,绝对不要覆盖已有密钥。若不存在,用 ed25519 和备注“你的163邮箱”生成密钥。只显示 ~/.ssh/id_ed25519.pub 公钥,永远不要读取、显示或发送私钥。每一步先解释再执行。
!

危险边界:id_ed25519 是私钥,id_ed25519.pub 才是公钥。没有 .pub 的文件绝不能复制。

遇到问题?展开排查 +
  • 发现已有密钥:不要覆盖,举手让老师确认是否可以直接使用现有公钥。
  • 提示权限确认:只批准查看 .pub 公钥,不批准上传或分享私钥。
完成标准

你看到了以 ssh-ed25519 开头、邮箱或备注结尾的一整行公钥。

15STEP

第三站 · 建立安全通道

把公钥交给 Gitee

约 6 分钟
OPENCode GUI 大图

先看界面,再开始操作

把公钥交给 Gitee原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

现在把“锁”登记到 Gitee。以后只有持有对应私钥的这台电脑,才能以你的身份推送。

01 学员操作

  1. 登录 Gitee,进入“设置”,找到“安全设置 → SSH 公钥”。
  2. 标题填写容易识别的名字,例如“教室 Mac”。
  3. 复制上一页完整的公钥一行,粘贴到公钥输入框并保存。
  4. 如果 Gitee 要求账号密码或安全验证,请自己完成,不要交给 OpenCode。
  5. 回到 OpenCode,用下面提示词测试连接。首次连接时确认域名确实是 gitee.com,再输入 yes。
打开 Gitee SSH 公钥设置
发给 OPENCODE · 发给 OpenCode
请运行 ssh -T git@gitee.com 测试 SSH 连接。先解释首次连接可能出现的确认提示;如果需要密码、验证码或私钥,请立即停下让我自己处理。最后用中文解释测试结果。
遇到问题?展开排查 +
  • Permission denied (publickey):检查粘贴的是完整公钥,且当前登录的是正确 Gitee 账号。
  • 首次询问 yes/no:核对目标为 gitee.com 后输入 yes。
完成标准

OpenCode 结果区域出现 “You've successfully authenticated” 一类成功信息,并显示你的 Gitee 用户名。

16STEP

第四站 · 创建远程仓库

在 Gitee 新建空仓库

约 5 分钟
OPENCode GUI 大图

先看界面,再开始操作

在 Gitee 新建空仓库原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

远程仓库是项目在 Gitee 上的家。为了避免首次推送冲突,这次创建一个真正的空仓库。

01 学员操作

  1. 点击 Gitee 右上角的加号,选择“新建仓库”。
  2. 仓库名称填写 git-class-demo,路径会自动生成。
  3. 课堂练习建议选择“私有”,除非老师要求公开。
  4. 不要勾选使用 README、.gitignore 或许可证初始化仓库。
  5. 创建后找到“克隆/下载”,切换到 SSH,复制 git@gitee.com:... 开头的地址。
前往 Gitee 新建仓库
!

仓库地址可以发给 OpenCode;账号密码、验证码和私钥仍然不可以。

完成标准

你停留在新仓库的快速设置页,并已经复制 SSH 地址。

17STEP

第五站 · 制作第一份存档

让 OpenCode 初始化并提交

约 8 分钟
OPENCode GUI 大图

先看界面,再开始操作

让 OpenCode 初始化并提交原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

先让 OpenCode检查文件,再创建 Git 仓库。提交前一定要看清哪些文件会被保存,避免把密码或配置秘密一起提交。

01 学员操作

  1. 把提示词发给 OpenCode,让它检查目录和敏感文件。
  2. 阅读 git status 的文件清单;发现 .env、密钥或密码文件时先停下。
  3. 确认清单安全后,批准初始化、设置 main 分支、暂存和提交。
  4. 检查 OpenCode 给出的提交摘要。
发给 OPENCODE · 发给 OpenCode
请检查当前课堂项目是否适合提交到 Git。先查找并提醒我任何 .env、密钥、密码或体积异常的文件,未经我确认不要提交。确认安全后:初始化 Git 仓库,将默认分支设为 main,展示 git status,再创建首次提交,提交信息为“完成课堂项目初稿”。每一步先解释并等待必要批准。
遇到问题?展开排查 +
  • 提示 nothing to commit:项目可能已经提交过,让 OpenCode 显示 git log 核对。
  • 出现敏感文件:先加入 .gitignore,再重新检查,不能为了继续课堂而忽略警告。
完成标准

git status 显示工作区干净,并且 git log 能看到“完成课堂项目初稿”。

18STEP

第六站 · 推送到云端

关联 Gitee 并推送

约 6 分钟
OPENCode GUI 大图

先看界面,再开始操作

关联 Gitee 并推送原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

origin 是远程仓库的常用简称。第一次推送会让本地 main 分支记住 Gitee 上的 main 分支。

01 学员操作

  1. 把刚复制的 SSH 地址替换进提示词。
  2. 让 OpenCode先检查现有远程地址,避免覆盖别人的配置。
  3. 核对目标域名是 gitee.com、用户名和仓库名都正确。
  4. 批准添加 origin 并执行首次推送。
发给 OPENCODE · 发给 OpenCode
请把当前项目推送到 Gitee。SSH 仓库地址是“你的仓库SSH地址”。先运行 git remote -v 检查现有远程;若已有 origin,不要覆盖,先向我说明。确认安全后添加 origin,并执行 git push -u origin main。遇到密码、验证码或私钥请求时立即停下。最后解释推送结果。
遇到问题?展开排查 +
  • remote origin already exists:让 OpenCode 展示现有地址,确认后再决定是否修改。
  • src refspec main does not match:通常是还没有提交,回到上一步检查 git log。
  • Repository not found:重新从 Gitee 仓库页复制 SSH 地址。
完成标准

输出显示 main → main,且没有 fatal 或 Permission denied。

19STEP

终点 · 验收成果

在 Gitee 看见你的代码

约 3 分钟
OPENCode GUI 大图

先看界面,再开始操作

在 Gitee 看见你的代码原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

命令没有报错只是一个信号,真正的验收是在 Gitee 页面看到文件和提交记录。

01 学员操作

  1. 回到 Gitee 仓库页面并刷新。
  2. 确认页面展示的是 main 分支。
  3. 打开一两个文件,确认内容与本地项目一致。
  4. 进入提交记录,找到“完成课堂项目初稿”。
完成标准

Gitee 页面能看到项目文件、main 分支和你的首次提交。

20STEP

以后每次 · 三步循环

学会下一次推送

约 4 分钟
OPENCode GUI 大图

先看界面,再开始操作

学会下一次推送原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

SSH 和远程仓库只需配置一次。以后修改代码,只重复“检查 → 提交 → 推送”。

01 学员操作

  1. 完成一次小修改后,用 OpenCode Desktop 打开项目文件夹。
  2. 让它先展示差异和敏感信息检查,再提交。
  3. 核对无误后推送到已经配置好的 origin。
发给 OPENCODE · 以后可以复用的提示词
请帮我安全地提交并推送当前改动:先展示 git status 和变更摘要,检查是否包含密码、密钥、.env 或不应提交的大文件;等我确认后创建一条准确的中文提交信息并提交,最后推送到现有 origin。不要修改远程地址,不要读取任何私钥。
!

OpenCode 是助手,不是保险箱。批准命令前先读清楚,敏感信息永远由你自己保管。

完成标准

你能说出下一次推送的三个动作:检查改动、创建提交、推送远程。

下午 · 第二站

由成人使用 Wrangler 发布主页

21STEP

课程二 · 认识公开展台

先弄懂:发布不是推送

约 4 分钟
OPENCode GUI 大图

先看界面,再开始操作

先弄懂:发布不是推送原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

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

01 学员操作

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

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

完成标准

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

22STEP

课程二 · 成人操作

老师注册 Cloudflare 账号

演示约 8 分钟
OPENCode GUI 大图

先看界面,再开始操作

老师注册 Cloudflare 账号原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

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

01 学员操作

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

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

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

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

23STEP

课程二 · 成人操作

成人验证邮箱并登录

演示约 5 分钟
OPENCode GUI 大图

先看界面,再开始操作

成人验证邮箱并登录原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

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

01 学员操作

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

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

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

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

24STEP

课程二 · 回到作品

打开上午完成的个人主页

约 4 分钟
OPENCode GUI 大图

先看界面,再开始操作

打开上午完成的个人主页原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

今天发布的是上午刚完成并通过成人隐私复核的个人主页。制作、保存和发布始终围绕同一个项目。

01 学员操作

  1. 在访达中找到上午完成的个人主页文件夹。
  2. 确认成人已经复核页面、文件、提交历史和图片素材。
  3. 在 OpenCode Desktop 中打开这个个人主页文件夹。
  4. 在消息框告诉 OpenCode:接下来只检查这个个人主页的静态发布产物。
发给 OPENCODE · 发给 OpenCode
请核对当前项目是不是我的个人主页,并只读检查它是否适合静态发布。先报告,不要构建或部署。
!

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

完成标准

OpenCode 位于上午完成的个人主页文件夹,不是其他项目或电脑主目录。

25STEP

课程二 · 检查工具

确认 Wrangler 已准备好

约 3 分钟
OPENCode GUI 大图

先看界面,再开始操作

确认 Wrangler 已准备好原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

Wrangler 是和 Cloudflare 沟通的小助手。先检查项目中是否存在;缺少时由 OpenCode 解释后安装到当前项目,不改全局环境。

01 学员操作

  1. 复制提示词发给 OpenCode。
  2. 查看会话中的检查计划与工具记录,确认范围只在当前项目。
  3. 缺少时要求安装到当前项目,先解释影响并等待批准。
  4. 看到项目内版本号就停下,不因为更新提示而升级。
发给 OPENCODE · 发给 OpenCode
请先检查当前个人主页项目是否已有 Wrangler,并返回项目内版本。若缺少,请说明将如何把 Wrangler 安装为项目开发依赖、会修改哪些文件,然后停下等我回复确认;不要全局安装,不要使用 sudo。完成后请提示我到右侧审查区核对变化。
老师参考 · OpenCode 可能执行
不要直接复制 · 工具检查
wrangler --version
遇到问题?展开排查 +
  • wrangler: command not found:立即停下并举手,由老师检查教学电脑。
  • 看到 update available:这不是错误,课堂中不要升级。
完成标准

OpenCode 结果区域显示项目内 Wrangler 的版本号。

26STEP

课程二 · 成人授权

用 Wrangler 请求登录

约 6 分钟
OPENCode GUI 大图

先看界面,再开始操作

用 Wrangler 请求登录原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

wrangler login 会在电脑中留下授权状态,因此只能由成人在老师或家长控制的部署 Mac 上执行。学生自己的电脑不登录 Cloudflare。

01 学员操作

  1. 学生先口头解释 wrangler login 的用途,但不在自己的电脑运行。
  2. 成人把已复核的个人主页产物放到受控部署 Mac。
  3. 成人在受控设备的 OpenCode Desktop 消息框请求登录,核对会话中的工具计划后回复确认。
  4. 成人核对登录的是获授权的课堂账号,阅读权限后点击允许。
  5. 看到授权成功后关闭页面,回到 OpenCode。
发给 OPENCODE · 成人发给受控部署 Mac 的 OpenCode
请解释 Wrangler 登录会写入什么本地认证状态。等我确认后,在这台成人受控部署 Mac 发起登录;浏览器打开后停下让我核对账号和权限。
!

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

遇到问题?展开排查 +
  • 浏览器没有打开:成人查看 OpenCode 结果区域的官方授权链接,不要发送到群聊。
  • 授权超时:由成人在受控部署 Mac 的 OpenCode Desktop 重新发起。
完成标准

受控部署 Mac 显示登录成功,学生设备没有 Cloudflare 授权。

27STEP

课程二 · 核对身份

确认正在使用哪个账号

约 3 分钟
OPENCode GUI 大图

先看界面,再开始操作

确认正在使用哪个账号原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

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

01 学员操作

  1. 成人在受控部署 Mac 的 OpenCode Desktop 发送账号核对请求。
  2. 老师核对显示的邮箱和 Cloudflare 账户名称。
  3. 如果不是本课程获授权的账号,立即停止,不创建项目、不部署。
发给 OPENCODE · 成人发给 OpenCode
请使用当前项目内的 Wrangler 查询当前登录身份,只显示 Cloudflare 账户名称和邮箱,不显示令牌或认证文件;执行前等我确认。
老师参考 · OpenCode 可能执行
不要直接复制 · 老师参考 · OpenCode 可能执行
wrangler whoami
遇到问题?展开排查 +
  • 提示未登录:回到上一步,由成人重新完成授权。
  • 账号错误:停止操作,由老师退出并换成正确账号。
完成标准

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

28STEP

课程二 · 找到展品

让 OpenCode 判断怎么构建

约 7 分钟
OPENCode GUI 大图

先看界面,再开始操作

让 OpenCode 判断怎么构建原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

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

01 学员操作

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

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

完成标准

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

29STEP

课程二 · 准备展品

构建并检查首页

约 8 分钟
OPENCode GUI 大图

先看界面,再开始操作

构建并检查首页原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

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

01 学员操作

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

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

30STEP

课程二 · 建立展台

创建 Pages 项目

约 6 分钟
OPENCode GUI 大图

先看界面,再开始操作

创建 Pages 项目原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

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

01 学员操作

  1. 想一个不含真实姓名和学校的小写项目名,例如 class-space-game。
  2. 项目名只使用小写英文字母、数字和连字符。
  3. 成人在受控部署 Mac 的 OpenCode Desktop 核对工具计划、账号和项目名后回复确认。
  4. 生产分支填写 main。
发给 OPENCODE · 成人发给受控 Mac 的 OpenCode
请检查 Pages 项目名“你的Pages项目名”只含小写字母、数字和连字符,确认当前 Cloudflare 身份后展示创建计划。等我核对并明确批准,再使用项目内 Wrangler 创建 Pages 项目,生产分支为 main。
老师参考 · OpenCode 可能执行
不要直接复制 · 老师参考 · OpenCode 可能执行
wrangler pages project create 你的Pages项目名 --production-branch=main
遇到问题?展开排查 +
  • 项目名已被使用:换一个不包含个人信息的新名字。
  • 提示没有权限:停止并让成人核对课堂账号。
完成标准

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

31STEP

课程二 · 正式开幕

上传发布目录

约 7 分钟
OPENCode GUI 大图

先看界面,再开始操作

上传发布目录原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

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

01 学员操作

  1. 替换发布目录和 Pages 项目名两个占位符。
  2. 检查命令中的目录确实包含刚才确认过的 index.html。
  3. 由老师确认正在使用正确账号和正确项目。
  4. 成人在受控部署 Mac 的 OpenCode Desktop 中确认后执行,学生观察会话里的工具记录和结果。
发给 OPENCODE · 成人发给受控 Mac 的 OpenCode
准备部署个人主页:发布目录是“你的发布目录”,Pages 项目名是“你的Pages项目名”,生产分支是 main。请先只读确认目录包含 index.html、展示上传文件数量并核对当前 Cloudflare 身份,然后停止等待我的明确批准。批准后再使用项目内 Wrangler 部署。
老师参考 · OpenCode 可能执行
不要直接复制 · 老师参考 · OpenCode 可能执行
wrangler pages deploy 你的发布目录 --project-name=你的Pages项目名 --branch=main
!

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

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

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

32STEP

课程二 · 参观展台

打开网址完成验收

约 4 分钟
OPENCode GUI 大图

先看界面,再开始操作

打开网址完成验收原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

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

01 学员操作

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

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

33STEP

课程二 · 学会更新

更新一次,并由成人安全退出

约 8 分钟
OPENCode GUI 大图

先看界面,再开始操作

更新一次,并由成人安全退出原创教学插图
原创课堂插图 · 用来理解本步概念
老师提示

用会话标签确认正在处理哪个项目。

依据当前 macOS OpenCode Desktop 界面绘制 · 版本更新后位置可能变化
老师讲

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

01 学员操作

  1. 在课堂网页中修改一小段安全的文字。
  2. 让 OpenCode 展示改动,然后重新运行已确认的构建命令。
  3. 再次检查发布目录中的 index.html。
  4. 由成人在受控部署 Mac 的 OpenCode Desktop 部署到同一个项目,刷新网址查看变化。
  5. 课堂结束后成人让 OpenCode 退出 Wrangler,再到控制台撤销课堂授权或令牌并检查账号活动。
发给 OPENCODE · 成人发给受控 Mac 的 OpenCode
请展示个人主页当前改动并检查儿童隐私与敏感信息;运行已确认的构建命令,确认发布目录包含 index.html。然后展示部署到现有 Pages 项目的计划并停止,等我明确批准后再部署。完成后再等我批准退出 Wrangler。
老师参考 · OpenCode 可能执行
不要直接复制 · 老师参考 · OpenCode 可能执行
wrangler logout
完成标准

同一个 pages.dev 地址显示新内容;成人已退出并撤销课堂授权,学生设备没有 Cloudflare 凭据。

JOURNEY COMPLETE

终点就在前面

0%

今天还有 33 步没有打勾。

进入 Day 3:Skills 创作 →