🛠️ 零基础用 Claude Code 做出第一个小程序 · 第 1 周:从零到第一个上线的网页

零成本把网页发布到网上:Cloudflare Pages / Vercel 免费部署(AI 编程作业)

有一个别人能打开的链接,才算做出来了

一句话先懂 · TL;DR

第一周作业:把 AI 帮你做的待办清单网页发布成一个公开链接。免费托管平台怎么选、发布流程、发布后必做的三项检查、作业提交格式。

为什么一定要发布

「在我电脑上能打开」和「有一个别人能打开的链接」之间,隔着大多数人放弃的那一步。发布之后你才会遇到真问题:手机上按钮太小、别人打开是空白、刷新数据没了。这些问题在你自己电脑上永远不会出现。

更重要的是,一个链接是你能拿给任何人看的东西。第二周的小程序也一样,做完要跑在手机上,不是跑在模拟器里。

免费发布,五分钟

静态网页(就是你这个 index.html)有很多免费托管:Cloudflare Pages、Vercel、GitHub Pages 都行。选一个注册,然后让 Claude Code 带你走:

「把这个项目发布到 Cloudflare Pages。我已经注册了账号。一步步告诉我要点什么、要在终端跑什么,每一步等我确认再进行下一步。」

它会引导你:把代码推到 GitHub(或直接上传文件夹)→ 在托管平台连接仓库 → 等一两分钟 → 得到一个 xxx.pages.dev 的链接。

⚠️发布是「项目之外」的动作,涉及你的账号。凡是它说「我将推送到远程仓库」「我将部署」,看一眼再允许。这正是第 1 课那条规则的实际应用。

发布后的三项检查,以及作业提交

拿到链接后,做三件事,一件都不能少:

1. 用手机的浏览器打开链接,不是电脑。
2. 添加两条待办,刷新,看还在不在。
3. 把链接发给一个朋友,让他打开截图给你。

三项都过,作业完成。把链接和三张截图(手机打开、刷新后、朋友截图)作为本周作业提交。

💡第 1 周结束时你手里应该有:一个公开链接、一个带 CLAUDE.md 的项目、至少三次 git 存档。这三样是第 2 周做小程序的地基。

自测 · 学完检查一下

想真正动手做题、记进度、攒连胜?到互动课里练。

小周的待办清单在自己电脑上完美运行,他觉得作业完成了。本课的观点是?

答案:没完成。没有发布就没有真实环境的验证,也没有可以给别人看的成果

作业的定义就是「一个别人能打开的链接」。本机跑通只证明代码没有语法错误,真机、别人的浏览器、刷新后的数据,都要发布后才知道。文档和测试不是这一课的验收项。

让 AI 帮忙发布时,指令里加上「每一步等我确认再进行下一步」的目的是?

答案:发布涉及账号和公开操作,出了项目范围,要逐步看清再放行

第 1 课的权限判断标准在这里落地:推送代码、部署上线都不在项目文件夹内、也不那么容易撤销。逐步确认不是慢,是把每一步的后果看清楚。

小陈发布后在自己电脑的浏览器上打开链接,一切正常,就提交了作业。他漏掉了哪个最可能暴露问题的检查?

答案:用手机真机打开。电脑上正常不代表手机上按钮够大、布局不乱

第 2 课的验收标准里就有「手机竖屏不用横向滚动」,这一项只能在真机上验。看源码、截图、重复部署都不会暴露布局问题。

判断:朋友打开链接说「页面是空白的」,但小陈自己打开好好的,所以是朋友的手机问题,不用管。

答案:

「我这里好的」是最常见的假象:可能是缓存让你看到的是旧版本,可能是朋友的浏览器不支持某个写法。别人打不开就是真问题。正确做法是让他截图,把现象原话交给 AI 排查。

想边练边学,而不只是读?

到互动课里答题、记进度、攒连胜——游客即可试学,无需注册。

进入互动课程 →

学点新东西,不错过更新

新课程、新功能、学习小技巧——偶尔一封,随时退订。