Skip to content

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

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

  1. 新建文件夹 hello-web,用 VS Code 打开它。
  2. 让 Claude 插件生成一个最小的个人主页——就一个 index.html,越简单越好(这个文件本身,第三册第 2 章正好拿来解剖)。
  3. 在源代码管理面板点"初始化仓库"(它背后就是 git init——给这个文件夹装上时间机器)。
  4. add、commit,写下第一条存档说明:"最小主页"。
  5. GitHub 网页建一个仓库 hello-web(复习:不勾任何初始化选项)。
  6. 念三行咒语:remote add originbranch -M mainpush -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)——本册和第一册在这里合龙。

关键领悟

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

由 Charles Tao 与 Claude 协作写成——这本身就是这套书讲的工作方式。 · 许可