第 12 章 综合演练 · 从空文件夹到上线网址

easycode · Agent Skill

本册所有技能，一次串起来。这套十步，也是你未来一切新项目的骨架。

1. 新建文件夹 hello-web，用 VS Code 打开它。
2. 让 Claude 插件生成一个最小的个人主页，就一个 index.html，越简单越好（这个文件本身，第三册第 2 章正好拿来解剖）。
3. 在源代码管理面板点"初始化仓库"，背后就是 git init，给这个文件夹装上时间机器。
4. add、commit，写下第一条存档说明，"最小主页"。
5. GitHub 网页建一个空仓库 hello-web（复习一遍，不勾任何初始化选项）。
6. 念三行咒语，remote add origin、branch -M main、push -u origin main。刷新网页，确认代码上云。
7. 打开 Vercel，Add New Project，Import 这个仓库，一路默认，Deploy。
8. 一分钟后，拿到一个 xxx.vercel.app 网址，拿手机打开看看，再发给一个朋友。这是你从零上线的第一个网站。
9. 回到 VS Code，把主页标题改一个词，add、commit、push。切到 Vercel 看着它自动重新构建、部署。第一册第 11 章画的那条流水线，此刻在你眼前真实转动。
10. 彩蛋，可选，做完等于提前修了第四册第一课。去 Cloudflare，给我们的域名加一条 CNAME 记录指向这个 Vercel 项目，让它拥有一个真正属于我们的网址。

走完这十步回头看，VS Code 在第 1、2、9 步，Git 四步循环在第 3、4、9 步，GitHub 建仓上传在第 5、6 步，部署流水线在第 7、8、9 步，DNS 在第 10 步。本册和第一册在这里合龙。

关键领悟

从空文件夹到全世界可访问，十步，半小时。这件事在十年前需要一个团队。门槛已经消失了，剩下的只是把这十步走熟。