🚀 Vibe Coding 教程 · 第四课 变成一个链接
第四课 · 部署上线

把它变成一个链接。
一个能写进简历的链接。

第三课你的工具只能在自己电脑上跑。今天,我们让它上线——别人点一下链接就能用,你也能把它写进简历。

什么叫"部署"?你电脑里的网页,只有你自己能打开。把它放到互联网上的一个平台,别人通过一个链接也能打开——这就是部署。

上线之后,别人点一下链接就能用——
它才真正算一个「完成的作品」。

约 3 小时。今天用 Vercel 这个免费平台。请把第三课做好的工具准备好。

第 1 步

上线前检查清单

约 25 分钟

🔒 已解锁

上线之前,先确认工具是"准备好的"。对照下面 5 条,诚实勾选——勾不上的,先回第三课补。

工具在我自己电脑上能完整跑通:能填、能生成、能看到结果。
它有兜底:加载中有提示,失败了有友好提示和重试。
我用 5 条真实样本测过,大部分结果是"好"或"凑合"。
我的 sk- 钥匙没有写在网页文件里,是放在单独的配置里的。
这个工具有个清楚的名字,别人一看就知道它干嘛。
5 条全勾上,才能上线。勾不上的,回第三课补好——上线前补,比上线后补省事得多。

第 2 步

部署到 Vercel

约 35 分钟

🔒 先完成上一步

Vercel 是一个免费的平台,能把你的网页放到网上让别人打开。我们选它,是因为你的工具会调用 AI,需要一个地方悄悄保管钥匙、不让访客看到——Vercel 的后台正好能做这件事。

1
用电脑浏览器打开 vercel.com,注册一个账号(可以用刚才的 GitHub / 邮箱登录)。
2
回到 Codex,对它说:「请帮我把这个项目部署到 Vercel,我是新手,一步一步告诉我点哪里。」如果 Codex 反问你一些看不懂的问题,就回它:「我不懂这些,请先自己看一下这个项目是什么类型,再用最简单的话一步步教我。」
3
部署成功后,Vercel 会给你一个链接,长得像 你的项目名.vercel.app
📷 配图:Vercel 部署成功页 + 那个 .vercel.app 链接
✓ 已保存

⚠️ 先别急着高兴。这时候打开链接,工具大概率还不能用——因为钥匙还没配。这是正常的,下一步就配。

贴上你的线上链接,就能继续。

第 3 步

给线上的工具配钥匙

约 30 分钟

🔒 先完成上一步

在你电脑上,钥匙放在一个本地配置文件里。但上线后,那个文件不会跟着上去——所以线上的工具现在还没有钥匙,调不动 AI。

解决办法:Vercel 上有一个专门存钥匙的地方,叫环境变量(Environment Variables)。把钥匙填在那里,只有服务器用得到,访客永远看不到

1
问 Codex:「我的钥匙在线上要配成环境变量,这个变量该叫什么名字?」(它知道,因为代码是它写的。)
2
在 Vercel 项目里找到 Settings → Environment Variables(这就是那个"线上保险柜")。这里填两样:名字(Codex 上一步告诉你的,例如 OPENAI_API_KEY)、内容(你那串 sk- 钥匙)。填好点保存。
3
让 Vercel 重新部署一次(Codex 会告诉你点哪里)。这次链接打开,工具就能用了。
📷 配图:Vercel 环境变量设置页

⚠️ 一句话记住:钥匙只去两个地方——你电脑的本地配置、Vercel 的环境变量。永远不进网页文件、不进聊天群、不进截图。

✓ 已保存
记一句你的情况,就能继续。

第 4 步

线上测一遍

约 25 分钟

🔒 先完成上一步

"我电脑上能跑"和"别人也能用"是两回事。把下面 4 件事都做一遍,逐条勾。

手机打开链接,完整用了一遍,排版没乱。
另一个人用他的电脑/手机打开过,确认不是只有我能开。
故意乱填 / 不填就点生成,确认它有友好提示,不会白屏。
查钥匙没泄露:① 让 Codex「检查整个项目和线上文件里有没有出现 sk-」;② 自己用电脑浏览器打开线上链接,右键「查看网页源代码」,按 Ctrl+F(Mac Command+F)搜 sk-。两样都搜不到才安全。
4 件都做完、勾上,就能继续。

第 5 步

写一页「作品说明」

约 30 分钟

🔒 先完成上一步

一个链接,HR 点开只看到工具本身,看不到你怎么想出来、怎么做的。所以你要再写一页"作品说明"——它才是真正打动人的东西。

填下面 6 格,右边会自动拼成你的作品页内容。

✓ 已保存
✓ 已保存
✓ 已保存
✓ 已保存
✓ 已保存
✓ 已保存

你的作品页(可以复制走)

6 格都填上,就能继续。

第 6 步

打磨简历上的那一句话

约 20 分钟

🔒 先完成上一步

简历上,这个项目可能只占一两行。这一两行要把你做的事说成具体的、有数字的——而不是"熟悉 AI 工具"这种谁都会写的空话。

填下面的空,右边自动拼成简历句。

✓ 已保存
✓ 已保存
✓ 已保存

你的简历句

嫌它生硬?复制给 Codex,说"帮我把这句话润色得更像简历语言,保持里面的事实和数字不变"。

❌ 别这样写:"熟练使用 AI 工具,具备创新能力和学习能力。"——空话,HR 划走。

✅ 要这样写:"独立调研、开发并上线了一个 AI 小工具,有真实用户、有测试、有链接。"

3 个空都填上,就能继续。

第 7 步

收集第一个真实反馈

约 20 分钟

🔒 先完成上一步

最后一步,也是最像"做产品的人"的一步:把链接发给 2 个真实的人,看着他们用,记下他们说的话。

不要问"你觉得好不好"(还记得第二课的诱导吗)。就让他们用,你在旁边看——卡在哪、第一句话说什么,都记下来。

✓ 已保存
✓ 已保存
填上真实反馈和你的下一步,就能完成整门课。

🔒 先完成上一步
🎉 四节课全部完成

你做到了。

从完全不会编程,到独立找到真问题、做出 AI 工具、部署上线、收到真实反馈。这一整套,才是"会 Vibe Coding"的意思。

你的成果

🔗 在线链接

📄 简历句

记住这句
🎯 没上线的项目等于没做。
而上线了、有真实用户、讲得清楚的——那是你的作品。

想继续?第三周有选修课:学搭真正的 AI Agent,或学高阶产品经理的思路。