VVibeCoding 助手
🚀 第 04 阶段 · 独立完成项目

发布上线：让你的网站变成网址

三种免费发布方案对比、发布前检查清单，以及怎么把网址发给朋友。

⏱ 30 分钟 · ✅ 4 个实操任务

为什么要发布

做出来的网页只存在你电脑里，别人看不了。发布就是把项目放到一台「永远开着的电脑」上，任何人都能通过网址访问。

三种免费方案怎么选

方案难度国内访问适合谁
Cloudflare Pages低相对稳定推荐，免备案，免费
Vercel低不稳定有海外网络时可用
GitHub Pages中一般顺便学 GitHub 的人

本教程以 Cloudflare Pages 为例，其他两个原理一样。

用 Cloudflare Pages 发布（简版）

  1. 注册/登录 dash.cloudflare.com，免费。
  2. 打开 Workers & Pages → Create → Pages → Connect to Git。
  3. 授权 GitHub，选择你的项目仓库，分支选 master。
  4. 构建设置：Build command 填 npm run build，输出目录填 out（如果是纯 HTML 项目，这一步可以跳过）。
  5. 点 Deploy，等一两分钟，会得到一个 xxx.pages.dev 的网址。
  6. 以后每次推送代码，它会自动重新部署。

发布前检查清单

  • 手机和电脑打开都不乱
  • 所有按钮、链接都能点
  • 没有残留的「测试」「占位」字样
  • 图片能正常显示
  • 标题文字没有错别字

绑定自己的域名（进阶）

xxx.pages.dev 能用，但不好记。买了域名后：

  1. 把域名托管到 Cloudflare（免费）。
  2. 在 Pages 项目 → Custom domains → 添加你的域名。
  3. Cloudflare 会自动配置 DNS，等几分钟生效。

发给朋友的正确姿势

拿到网址后：

看！我用 AI 做的网站，零基础也能做：https://你的网址

朋友打不开时，先确认：手机自带浏览器打开；网址复制完整，没有多空格。

发布成功 = 你的第一个项目真正「毕业」了。截图留念，这是你应得的。

下一步

你已经完整走完一个项目。最后一节，挑战自己：不跟着教程，独立完成第二个项目。