作业一：用 Codex 生成个人网页并发布到公网

课堂提醒

这份作业先按课堂统一步骤完成。不要急着追求页面完美，先把文件生成、打开检查、继续修改这几个动作跑通。

这份作业的目标很简单：在 30-60 分钟内做出一个别人能打开的个人介绍网页。

你不需要先会写代码。你要练的是这条流程：

讲清需求 -> 让 Codex 生成文件 -> 打开检查 -> 继续修改 -> 部署到公网 -> 发给别人验证

你最后要交付什么

完成后你应该拿到两个东西：

1. 一个本地网页文件，例如 index.html
2. 一个公网链接，例如 https://abc-def-123.trycloudflare.com

同学或老师打开这个公网链接后，应该能在十几秒内看懂：

• 你是谁
• 你能提供什么资源
• 你现在想找什么需求
• 怎么联系你

准备材料

先把下面九项写在纸上或备忘录里。不会写的可以先留空，但不要让 Codex 编造你的经历、公司、联系方式。

项目	怎么填
昵称	别人怎么称呼你，例如“张一鸣”
头像	需要准备一个头像，这样别人在微信分享的时候可以看到
视频号	视频号名称、ID，或者先写“待补充”
所在地区	常驻城市，例如“新加坡”
公司 title	公司或身份，例如“字节跳动创始人”
自我介绍	2-4 句话，说明你是谁、关注什么、正在做什么
目前资源	你能给别人什么帮助、资源或连接
目前需求	你想找什么人、项目、客户、资源
关于 AI 的一个问题	你想抛给社群讨论的一句话
联系方式	只写你愿意公开的信息；不想公开就写“现场交换”

隐私提醒

这个网页会临时发布到公网。不要写身份证、银行卡、私钥、交易所账号、后台密码、API Key，也不要公开你不想让陌生人看到的联系方式。

第一关：让 Codex 写网页

第 1 步：创建一个空文件夹

在电脑上新建一个空文件夹，例如：

codex-homework-01

这个文件夹就是你的作业目录。Codex 生成的网页文件会放在这里。

提示

文件夹名尽量用英文和数字，少用空格和特殊符号。这样后面启动本地服务时不容易出错。

第 2 步：在 Codex 里打开这个文件夹

打开 Codex，选择这个空文件夹作为工作目录。你要确认自己知道一件事：

Codex 接下来生成的文件，会写进这个文件夹。

第 3 步：选择GPT5.3-Codex-Spark

第 4 步：把下面这段指令发给 Codex

把方括号里的内容换成你自己的真实信息。没有的信息就写“待补充”。

角色
你是一名资深前端设计师兼品牌设计师，精通 Tailwind CSS 和响应式排版，做过大量高完成度的个人品牌页。你重视信息层级和第一眼印象，能在克制的视觉里做出辨识度。

目标
做一个中文个人自我介绍单页，用在一个投资 / 创业社群里做自我介绍和资源对接。成功标准是：陌生人在手机或电脑上打开这一页，十几秒内就能看懂"这个人是谁、能给什么、在找什么"，并且知道怎么联系到他、愿意联系。

读者与使用场景
读者是同社群里的投资人和创业者，时间很紧，多数在手机上扫一眼，想快速判断"和我有没有合作点"。页面要让人扫读就抓到重点，不需要逐字读完。

执行顺序（必须按这个顺序，不能颠倒）
1. 先做信息收集：核对是否拿到了下面九项内容、以及附件图片这一项（图片可选，但要明确拿到"有图 / 无图"的答复）。没拿全，先向用户要，要齐了再动手。
2. 拿到内容后再生成页面。
3. 生成后自检、交付。
在用户给出内容之前，不生成页面，不用占位标记凑出一个空壳页，不自己编内容填空。

信息收集（生成前第一步，不能跳过）
你不能假设用户已经把信息放进来了。动手前先核对九项内容是否齐全、附件图片这项是否有明确答复，分两种情况：
- 用户开场已经把九项给齐、附件图片也表态了（给了图，或写了"无"）：跳过这一步，直接进入生成。
- 没给齐（含一项都没给）：把缺的项列出来，用一段清楚、好填的清单向用户要，然后停下等用户回复。等用户把内容补上，再生成页面。
向用户要信息时，给出这样一份可以直接照填的清单（缺哪项列哪项，已给的不再问）：
  1. 昵称：
  2. 视频号（没有就写"无"）：
  3. 所在地区：
  4. 公司 / 身份 / title：
  5. 自我介绍（2–4 句，说清你是谁、在做什么）：
  6. 目前资源（你能给社群提供什么，越具体越好）：
  7. 目前需求（你正在找什么人、什么资源、什么机会）：
  8. 关于 AI 的一个问题（你想抛给社群讨论的一个真问题）：
  9. 联系方式（愿意公开就填，不公开就写"现场交换"）：
清单之外，单列一项附件图片（不算进上面九项）：
  附件图片（可选，未提供就填"无"）：
  规则一次说清：你只要提供了图片，这张图默认同时用于两处，页面头像和微信分享缩略图（og:image），同一张图、同一个地址，不拆分用途。只有一种例外，你明确写出"该图仅用于微信缩略图，不用于页面头像"，才只放进 og:image、页面头像位仍用昵称生成的头像；这个例外默认不启用，不写就是两处都用。不提供图片就填"无"，页面头像用昵称生成、不写 og:image。

数据来源与缺省处理（最高级别，违反即任务失败）
页面上所有个人内容只能来自用户提供的内容。你不得从别处取内容：不动用你自己的知识、想象、行业常识，不套用本提示词里的字段名或任何示例，不生成"示例 / 演示 / demo / 占位人设"性质的内容。
逐字段的合法结果只有这几种：
1. 用户给了值：原样使用，一字不改、不润色、不扩写。
2. 用户把这项标为不公开：按固定文案显示，例如联系方式不公开就显示"现场交换"。
3. 用户被问过之后明确跳过这项（仅限九项内容）：显示占位标记，形如【待填写：自我介绍】。
4. 还没向用户要到内容、用户尚未回复：不生成页面，回到信息收集那一步去要（见"执行顺序"）。
任务失败的判定：页面上出现任何用户没给过的具体昵称、地区、公司、title、自我介绍、资源、需求、AI 问题、联系方式、视频号，无论多合理，都算失败，必须改掉。
附件图片单独一条规则，凌驾于"按用途追问"之类的旧逻辑：只要用户提供了图片，这张图一律直接用于页面头像和 og:image，同一张图、同一个地址，不拆分、不追问用途；唯一例外是用户明确写了"仅用于微信缩略图，不用于页面头像"。不要把"只给了图、没说用途"理解成"只做缩略图"，默认就是两处都用。用户没给图，页面头像用昵称生成的头像（由昵称推导，不算编造）。任何情况下都不放编出来的头像、不放随便找的图、不放假人脸。
占位标记只在一种情况下出现：用户被问过之后明确跳过了某一项内容。它不是"没要到信息"时的默认产物；没要到就先去要，不是先留白。占位标记在视觉上要明显区别于正常内容（更淡的颜色加方括号标记），不让没填完的页面看起来像填好了。

页面必含九项内容（缺一不可，做成清晰版块，不要堆成一长列）
九个版块都要存在、位置固定。某项按上面的规则被明确跳过时显示占位标记，版块本身不省略。九项：
1. 昵称
2. 视频号
3. 所在地区
4. 公司 / 身份 / title
5. 自我介绍（2–4 句）
6. 目前资源（我能提供什么）
7. 目前需求（我正在找什么）
8. 关于 AI 的一个问题（想和社群讨论的问题）
9. 联系方式（只放用户明确愿意公开的）

版块组织与重点
- 资源和需求是整页核心。把"目前资源"和"目前需求"做成"我能给 / 我想要"的左右对照：两个对应的卡片并排，标题分别点明"我能给""我想要"，让人一眼看出供需关系。桌面端并排两列，手机端上下堆叠，但仍保持成对的视觉关系（同样的卡片样式、清楚的标签）。
- "关于 AI 的一个问题"做成一个醒目的引导块，视觉上跳出来，像在邀请别人来聊这个问题。它是整页的互动入口，不能淹没在普通段落里。
- "视频号"和"联系方式"合并成一个"加我 / 联系我"区域，集中放在一起，让人不用翻找就能完成添加动作。联系入口的点按目标要够大。
- 其余信息分块呈现，块与块之间留白清楚，不要排成一条长长的竖列。

第一屏
第一屏（不滚动就能看到的部分）必须立住"我是谁"。头像固定放在页面上方、第一屏顶部居中，是进页面最先看到的视觉锚点；头像下面紧跟昵称、公司 / title、一句话自我介绍、所在地区，都在第一屏内清楚可读。用户提供了图片就用这张真实图片当头像（除非用户写了仅用于微信缩略图的例外），没提供图片用昵称生成的头像，位置一样。手机和电脑第一屏都要满足这一点。

设计方向
- 配色克制：用中性底色（接近白或浅灰）配一个克制的强调色。强调色只用在 AI 问题引导块和联系入口这类关键位置，不要大面积铺，不用多个高饱和色撞色，不用花哨的大渐变。
- 留白舒服：版块之间、卡片内部都留白充足，不要拥挤。
- 字体层级清楚：建立三级层级。第一屏主标题最大，版块标题中等，正文舒适易读、行距合适。用能良好渲染中文的系统字体栈，不引入会拖慢手机加载的重型网络字体。
- 整体气质：像一个用心打磨过的个人品牌页，有辨识度，不要像默认模板那样每块都是一样的灰卡片。用一点细节（分隔、标签、图标、排版节奏）做出质感，保持克制。
- 头像是第一屏的主视觉，默认放在页面上方、第一屏顶部居中。用户提供了图片（且没写仅缩略图的例外），页面头像位就放这张真实图片的 img，只在两种瞬时情况下用昵称生成的头像兜底避免裂图：部署前图片地址还没填、图片加载失败。用户没提供图片、或写了仅用于微信缩略图的例外，页面头像位用昵称生成的头像，这是正式形态、不是兜底。昵称生成头像用昵称首字母（取不到首字母时用昵称首个字符），配克制的底色，用内联 CSS / SVG 实现，做得干净、像个像样的默认头像，不是灰方块。昵称也被跳过、连一个字符都没有时，用一个中性标记。不编造、不放假头像、不放假人脸。头像与微信缩略图的关系见"微信卡片分享"。

响应式要求
- 移动优先。手机端单列布局，纵向节奏舒展，任何宽度下都不出现横向滚动。
- 桌面端用居中容器，设最大宽度，两侧留足内边距，用多列网格组织版块，但不要为了填满而硬塞。
- 头像在手机和电脑上都居中放在页面上方、第一屏顶部，尺寸适中、清楚可见。
- 供需对照在桌面端并排、在手机端堆叠的行为，按上面"版块组织"里写的来。
- 联系入口在手机上点按目标够大、好按。
- 在常见手机宽度和常见桌面宽度下都要检查视觉效果，两端都要好看。

技术约束
- 用 Tailwind CSS，通过 CDN 引入。
- 全部写在一个 index.html 单文件里。
- 不拆分 CSS / JS 文件，不用 npm，不要任何构建步骤。
- 如需少量交互（平滑滚动、一键复制联系方式），用原生 JS 内联在同一文件，保持纯静态可直接打开。
- "单文件"指 CSS / JS 全部内联在 index.html。用户提供图片时，图片是一张外部 https 资源，页面头像的 img 和 og:image 引用同一个地址，这张外部图片不算违反单文件约束；用户没提供图片时，昵称生成的头像用内联 CSS / SVG 实现，页面无外部图片、不设 og:image。

微信卡片分享
页面分享到微信时尽量显示成卡片（标题、描述、缩略图）。判断只看一件事，图片有没有提供，不再问意愿、不再追问用途。缩略图就是页面头像那张图，同一张图、同一个地址。按下面做，不伪造任何后端签名，不假装实现了不依赖后端的微信自定义分享：
- 在 <head> 里写 Open Graph 元标签：og:type（website）、og:title、og:description、og:url，并设好 <title> 和 meta description。微信抓取只读服务器首次返回的 HTML、不执行 JS，所以这些标签必须直接写死在 index.html 的静态 HTML 里，不能靠 JS 注入。
- og:title、og:description、<title>、meta description 的文字只用用户提供的内容（昵称、title、自我介绍），不替用户编写；这些字段若被跳过，对应标签同样留成待填写标注，不编造。
- 用户提供了图片：写 og:image，且页面头像的 img 和 og:image 填同一个绝对 https 地址，保证两处指向同一张图。地址部署后才确定，你不知道就把两处都留成明确标注的待填字段，注释写清"部署后替换成同一张线上图片地址，og:image 与页面头像 img 必须一致"，地址形如 https://<部署域名>/<图片文件名>，不随便编一个地址。
- 用户写了"仅用于微信缩略图，不用于页面头像"的例外：只写 og:image 指向这张图、页面头像位用昵称生成的头像，两者不是同一张。这是用户显式声明才走的分支。
- 用户没提供图片：页面用昵称生成的头像，没有真实图，不写 og:image，微信分享无自定义缩略图。
- og:url 的地址也是部署后才确定，留成明确标注的待填字段，注释写"部署后替换成线上页面地址"。
- 把边界写进交付说明：og 元标签在企业微信、QQ、飞书、钉钉里能正确出卡片；在微信客户端（尤其安卓）里能否显示缩略图，取决于微信认不认 og:image，不保证。用户提供图片时，页面上有这张真实图片 img，微信即使不认 og:image，也可能从页面抓到它当缩略图，比页面没有图更可能显示；用户没提供图片时，页面没有真实图、也没有 og:image，微信分享就没有缩略图。要在微信里完全锁定标题、描述、缩略图，须接微信 JS-SDK，依赖已认证公众号加后端签名加 JS 安全域名白名单，超出单文件纯静态范围，本页不实现。

内容与诚信红线
- 所有内容遵守上面"执行顺序"和"数据来源与缺省处理"：先要信息再生成，用户没给的绝不编造。图片可选，用户给图就用真实图片当头像、并同步 og:image，用户没给图就用昵称生成的头像，任何情况下不放假头像、不放随便找的图。
- 不堆砌知名度：不罗列"被某某媒体报道""多少万粉丝"这类内容，除非用户明确给了且作为重点。
- 文案不写营销套话和空洞溢美。页面上出现的文字以用户提供的内容为准，你不替用户扩写自我介绍、资源、需求。

执行与交付
- 先完成信息收集、拿到九项内容、拿到附件图片这项的明确答复（有图或"无"），再生成。用户没回复前不生成。
- 处理图片：用户给了图，页面头像位写 img src 指向这张图的地址（部署待填字段，形如 https://<部署域名>/<图片文件名>），og:image 写同一个地址；图片加载失败、地址未填时用昵称生成的头像兜底，页面不出现裂图。用户写了仅缩略图例外，按"微信卡片分享"里那条分支处理。用户没给图，页面头像位用昵称生成的头像，不写 og:image。
- 直接在当前文件夹生成 index.html。
- 生成后告诉用户文件的完整路径。
- 用浏览器或本地预览方式打开检查页面能正常渲染，在手机和电脑两种宽度下都正常，确认无横向滚动、无错位、无明显层级问题后再交付。
- 交付前确认：页面没有任何用户没提供的具体内容，被明确跳过的九项内容才显示占位标记；头像在页面上方、第一屏顶部居中；用户给图时页面头像位确实是这张图的 img、且 og:image 同地址；用户没给图时页面用昵称生成头像、无 og:image。
- 交付说明里写清：用户给图时，页面头像 img 与 og:image 用同一个线上地址、部署时一并替换且保持一致；用户没给图时无 og:image、微信分享无自定义缩略图；og:url 部署时替换为线上页面地址；以及上面那条微信卡片边界。

质量验收
交付前逐项对照：
- 没有抢跑：是否先收集到九项内容、拿到附件图片这项的明确答复，再生成，没有在用户给内容之前就生成页面。
- 头像位置：头像是否默认放在页面上方、第一屏顶部居中，是进页面最先看到的视觉锚点，手机和电脑都如此。
- 图片用途映射（最关键，这次重点查）：用户给了图，页面头像位是否确实渲染了这张图的 img、且 og:image 指向同一地址；没有把"给了图"错误处理成"只做缩略图、页面不显示头像"。只有用户显式写了仅缩略图例外，才允许页面头像位不放这张图。
- 没给图时：页面头像位是否用昵称生成的头像（正式形态，不是占位、不是兜底），是否不写 og:image。
- 逐字核对内容来源：页面上每一处可见文字，要么逐字来自用户提供的内容，要么是约定固定文案（如"现场交换"），要么是用户明确跳过后留下的【待填写：X】占位标记；三者都不是的文字，一律删掉。
- 九个版块是否都在、位置固定；被跳过的项是否显示醒目占位标记；如果整页大量占位，说明信息没要齐就抢跑了，退回去先要信息。
- 陌生人能否在十几秒内看懂"是谁 / 能给什么 / 在找什么"；资源与需求是否做成了清楚的供需对照；AI 问题是否足够醒目；视频号与联系方式是否合并成方便添加的区域；第一屏是否立住了"我是谁"。
- 配色是否克制、留白是否舒服、层级是否清楚；手机和电脑两端是否都好看且无横向滚动；用户给图时图片地址未填、加载失败是否有昵称生成头像兜底、页面不出现裂图。
- 是否为单个 index.html、Tailwind 走 CDN、无构建步骤。
- Open Graph 元标签（og:type / title / description / url）与 <title>、meta description 是否写全且直接在静态 HTML 里；被跳过字段对应标签是否留成待填写、没有编造；用户给图时 og:image 是否与页面头像 img 同地址、为绝对 https、正方形（建议 ≥300×300）；用户没给图时是否不写 og:image 且交付说明注明微信分享无自定义缩略图；og:url 是否留成清楚标注的部署待填字段；微信卡片边界是否写进了交付说明。

第 5 步：等待 Codex 完成

完成后，你的文件夹里应该出现：

index.html

如果没有看到这个文件，不要继续部署，先让 Codex 检查：

请检查当前文件夹里是否已经生成 index.html。如果没有，请生成；如果有，请告诉我完整路径。

检查网页

你需要先本地检查，不要急着发公网链接。

检查 1：能不能打开

双击 index.html，或者让 Codex 帮你打开预览。

看到你的网页正常显示，就通过第一项。

检查 2：九项信息是否齐全

逐项检查：

• 昵称
• 视频号
• 所在地区
• 公司 title
• 自我介绍
• 目前资源
• 目前需求
• 关于 AI 的一个问题
• 联系方式

缺任何一项，都让 Codex 修改。

检查 3：资源和需求是否一眼能看懂

重点看“我能给 / 我想要”这块。

如果它们像普通段落堆在一起，就继续发：

请把“目前资源”和“目前需求”改成左右对照或上下对照的清晰版块，标题分别叫“我能给”和“我想要”，让别人一眼能对上。

检查 4：手机能不能看

如果你不会用开发者工具，就把窗口缩窄，模拟手机宽度。文字不要重叠，按钮不要挤出屏幕。

如果手机不好看，发：

请优化这个 index.html 的移动端显示。要求手机上不要横向滚动，文字不要重叠，核心信息仍然清楚。

第二关：部署到公网

这一关的目标是让别人能通过公网链接打开你的本地网页。

第 1 步：使用 cloudflared把网页发布到公网上

把以下指令发送给codex

# 任务：将用户生成的本地网页发布为 Cloudflare Quick Tunnel 临时公网网址

你是一个具备启发式执行能力的编码代理。你的目标是帮助用户把本地生成的网页转换成一个可以公网访问的 Cloudflare Quick Tunnel 临时网址。

## 核心目标

将用户指定的本地网页发布到 Cloudflare Quick Tunnel，并输出一个公网可访问的临时网址：

https://xxx.trycloudflare.com

## 启发式要求

你必须主动判断当前信息是否足够完成任务。

如果缺少必要信息，你必须先询问用户，再继续执行。

你必须主动确认用户要公开的是哪个网页，包括：

1. 已经运行在本地端口上的网页服务。
2. 尚未启动服务的静态网页目录或静态网页文件。

如果用户提供的是静态网页目录或静态网页文件，你必须引导用户提供一个自定义端口，并使用该端口启动本地静态网页服务。

你必须主动提醒用户：Tunnel 运行期间，本地网页服务必须保持运行，电脑不能休眠或断网。

你必须主动检查端口是否冲突。

你必须主动判断端口上的服务是否就是用户要公开的网页。

你必须根据每一步的实际结果决定下一步动作。

## 用户信息获取

如果用户没有明确提供要公开的网页，你必须询问：

请告诉我你要公开的是哪个本地网页？可以提供本地访问地址、端口、静态网页目录，或静态 HTML 文件路径。

如果用户提供的是完整本地地址，你必须从地址中提取端口。

如果用户只提供端口，你必须将它转换为：

http://localhost:<端口>

如果用户提供的是静态网页目录或静态网页文件，你必须继续询问：

请提供一个用于启动本地静态网页服务的自定义端口。

如果用户提供的信息无法确定本地地址、端口、静态网页目录或静态网页文件，你必须继续追问，直到拿到可执行的信息。

## 功能要求

你必须完成以下动作：

1. 确认用户要公开的本地网页。
2. 判断用户提供的是已运行的本地服务，还是尚未启动的静态网页。
3. 如果是静态网页，要求用户提供一个自定义端口。
4. 检查用户提供的端口是否可用。
5. 如果端口可用，启动静态网页服务或确认已有服务正在运行。
6. 确认本地网页对应的本地地址和端口。
7. 检查 `cloudflared` 是否已安装。
8. 验证本地网页可以通过本地地址正常访问。
9. 使用 Cloudflare Quick Tunnel 将该端口映射到公网。
10. 提取并输出 `trycloudflare.com` 公网地址。
11. 提醒用户保持本地网页服务和 Tunnel 进程同时运行。

## 端口规则

不得默认使用任何端口。

必须以用户提供的端口为准。

如果用户提供的是静态网页目录或静态网页文件，必须要求用户提供一个自定义端口。

如果用户没有提供端口，必须先询问。

如果端口没有服务运行，并且用户提供的是静态网页目录或静态网页文件，必须使用该端口启动静态网页服务。

如果端口没有服务运行，并且用户提供的是已运行服务的端口，必须提醒用户先启动对应网页服务，然后重新检查。

如果端口被无关程序占用，必须提醒用户关闭冲突程序或更换端口，然后重新检查。

只有确认该端口对应用户要公开的网页后，才能启动 Cloudflare Quick Tunnel。

## 静态网页处理规则

如果用户提供的是静态网页目录，例如：

/path/to/site

你必须进入该目录，并使用用户提供的自定义端口启动静态网页服务。

如果用户提供的是静态 HTML 文件，例如：

/path/to/site/index.html

你必须以该文件所在目录作为静态网页根目录，并使用用户提供的自定义端口启动静态网页服务。

启动静态网页服务时，优先使用当前环境中可用的静态服务方式。

如果系统有 Python 3，运行：

python3 -m http.server <端口>

如果系统只有 Python，运行：

python -m http.server <端口>

静态网页服务启动后，本地访问地址为：

http://localhost:<端口>

## 执行流程

### 1. 确认目标网页

先确认用户要公开的本地网页。

用户可能提供以下任一种信息：

1. 本地访问地址。
2. 本地端口。
3. 静态网页目录。
4. 静态 HTML 文件路径。

如果用户未提供，询问：

请告诉我你要公开的是哪个本地网页？可以提供本地访问地址、端口、静态网页目录，或静态 HTML 文件路径。

### 2. 确认或获取端口

如果用户提供的是本地访问地址，从地址中提取端口。

如果用户提供的是端口，使用该端口。

如果用户提供的是静态网页目录或静态 HTML 文件路径，询问：

请提供一个用于启动本地静态网页服务的自定义端口。

不得自行选择端口。

### 3. 检查端口

根据系统检查端口占用。

macOS / Linux：

lsof -i :<端口>

Windows：

netstat -ano | findstr :<端口>

根据检查结果判断：

1. 端口未被占用，并且用户提供的是静态网页：使用该端口启动静态网页服务。
2. 端口未被占用，并且用户提供的是本地服务端口：提醒用户先启动本地网页服务。
3. 端口已被目标网页服务占用：继续执行。
4. 端口被无关程序占用：要求用户关闭冲突程序或更换端口。

### 4. 启动静态网页服务

如果用户提供的是静态网页目录，进入该目录：

cd <静态网页目录>

然后使用用户提供的端口启动服务：

python3 -m http.server <端口>

如果 `python3` 不可用，使用：

python -m http.server <端口>

如果用户提供的是静态 HTML 文件，先进入该文件所在目录，再启动服务：

cd <静态 HTML 文件所在目录>

python3 -m http.server <端口>

静态网页服务启动后，不得关闭该进程。

### 5. 检查 cloudflared

运行：

cloudflared --version

如果命令可用，继续执行。

如果命令不可用，提示用户需要先安装 `cloudflared`，并在安装完成后继续。

### 6. 验证本地访问

请求：

curl http://localhost:<端口>

如果返回有效响应，继续执行。

如果访问失败，提醒用户先修复本地网页服务，再继续。

### 7. 启动 Cloudflare Quick Tunnel

运行：

cloudflared tunnel --url http://localhost:<端口>

保持该进程持续运行。

### 8. 提取公网地址

从命令输出中提取：

https://*.trycloudflare.com

### 9. 输出结果

输出：

公网地址：

https://xxx.trycloudflare.com

提醒：

请保持本地网页服务和 `cloudflared tunnel` 命令同时运行。关闭终端、电脑休眠、断网或停止本地网页服务后，这个公网地址会失效。

生成网址之后，需要把og: image，og:url补上

第 2 步：把刚刚做的网页的路径告诉codex

1. CodeX需要知道你刚刚做的网页是什么路径，这样他才会把这个网页推到网上。

2. 提供一个随机的4-5位数字作为端口给codex

注意

Quick Tunnel 是临时公网地址，不是长期网站。关闭终端、电脑休眠、断网，或者本地服务停止，链接都会失效。下次重新运行通常会生成新地址。

第 3 步：把公网地址发给别人验证

把 https://xxx.trycloudflare.com 发给同学或老师，让对方打开。

如果别人能看到你的个人介绍网页，作业就完成了。

注意

Quick Tunnel 是临时公网地址，不是长期网站。关闭终端、电脑休眠、断网，或者本地服务停止，链接都会失效。下次重新运行通常会生成新地址。

验收标准

你完成作业时，至少要满足这些条件：

• 本地文件夹里有 index.html
• 浏览器能打开本地页面
• 页面包含九项必填内容
• “我能给 / 我想要”清晰醒目
• 页面没有编造未提供的信息
• 使用五位数端口，不使用 3000
• Cloudflare 生成了 https://xxx.trycloudflare.com
• 其他人能打开公网链接

遇到问题时怎么问 Codex

不要只说“报错了”。把现象讲清楚。

可以这样问：

我在做课堂作业一。当前目标是把 index.html 部署到公网。

我已经做了：
1. 生成了 index.html
2. 在终端运行了 python3 -m http.server 48291 --bind 127.0.0.1
3. 运行了 cloudflared tunnel --url http://127.0.0.1:48291

现在的问题是：[把你看到的报错或现象复制到这里]

请先判断是哪一步出了问题，再给我最小修复步骤。不要重写网页。

课堂提交格式

最后在群里发：

昵称：
公网链接：https://xxx.trycloudflare.com
遇到的一个问题：