这段时间，用 AI 做网站的人越来越多了。
以前做一个网站，需要先学 HTML、CSS、JavaScript，还要研究框架、服务器和数据库。现在用 Codex、WorkBuddy 等工具，只要把需求描述清楚，AI 就能帮我们完成页面设计、功能开发和代码修改。
比如你可以直接告诉 AI：
“帮我做一个测试打工人班味浓度的网站，要有结果页，还能生成适合分享的图片。”
以前这可能是一个完整的开发需求，现在和 AI 来回聊几轮，网站基本就能做出来。
但很多新手会卡在最后一步：
网站在自己电脑里能打开，怎么发给朋友，让别人也能看到？
这篇文章不展开讲 Codex（能自己把 Codex 配好跑起来，大概率不会卡在“怎么部署上线”这一步），而是以对新手更友好的 WorkBuddy 为例，分享两种免费部署网站的方法：
- 直接让 WorkBuddy 帮你部署，适合完全不懂技术的新手。
- 使用 GitHub Pages 部署，稍微进阶，但更方便长期保存和管理。
先看我的两个真实案例
WorkBuddy 部署案例
项目：不想上班研究所
访问地址：https://4ed9036bc729437ca1fcdfab4929f6cd.app.codebuddy.work
GitHub Pages 部署案例
项目：江南 GEO 笔记单页面
访问地址：https://jn-growth.github.io/
前者是一个给打工人使用的趣味工具网站，后者是我的个人服务和案例展示网站。两个网站都没有单独购买服务器，也能直接把网址发给别人访问。
注：测试站点没有做优化，由一句话生成。有需要可以关注公众号并私信获取提示词。
一、为什么你发的链接，别人打不开？
很多人让 AI 做完网站后，会看到一个类似这样的地址：
http://localhost:3000
http://127.0.0.1:5173自己点开完全正常，但是发到微信群里，别人打开却显示无法访问。
原因很简单：这个地址只是你自己电脑里的临时地址，并不是互联网上的公开网站。
可以把它理解成：你在自己家里做了一块招牌。你自己当然看得到，但别人想看到，就需要把它搬到一个大家都能到达的公共场所。
“部署网站”，做的就是这件事。
部署完成后，你会获得一个公开网址，例如：
随机字符.app.codebuddy.work
用户名.github.io
项目名称.pages.dev
项目名称.vercel.app别人不需要安装软件，也不需要拿到你的项目文件，直接在浏览器或者微信里打开网址就能看到。
二、是不是必须买域名和服务器？
不一定。
如果你准备建设正式企业官网、品牌官网，或者准备长期运营一个内容网站，后期确实最好购买独立域名，并选择更稳定的托管方案。
但很多 Vibe Coding 项目，本身只是：
- 做一个小工具；
- 验证自己的想法；
- 发给朋友体验；
- 给客户预览页面；
- 发到群里收集反馈；
- 做一个趣味测试网站；
- 临时做一个活动页面。
这些项目不一定需要做 SEO 和 GEO 优化，不需要通过搜索引擎获得大量流量，只是作为团队内部或小范围分享。
它可能只需要满足一个要求：
我把链接发给别人，别人可以正常打开和使用。
这种情况下，平台免费提供的二级域名已经足够了。没必要网站刚做出来，还不知道有没有人用，就先去购买域名、服务器，研究备案、解析和各种配置。
先免费发布，先让别人用起来，通常更重要。
方案一：直接让 WorkBuddy 帮你部署
这是最适合新手的方法。
如果网站本身就是在 WorkBuddy 里面做的，最省事的方式，就是继续告诉它：
帮我把这个网站部署上线。
WorkBuddy 部署，照着这四步做
第一步：先确认网站基本做好了
在 WorkBuddy 里打开项目，自己简单点一遍：
- 首页能不能打开；
- 按钮能不能点击；
- 页面能不能跳转；
- 图片有没有正常显示；
- 手机预览有没有明显错位。
发现问题也不用自己修代码，直接用大白话告诉 WorkBuddy：
请检查一下当前网站。
我发现首页的按钮点击后没有反应，请找到原因并修复。
不要重新设计页面，也不要修改其他正常功能。第二步：直接让 WorkBuddy 部署
下面这段提示词可以直接复制：
请帮我把当前网站部署上线。
我的要求是：
1. 部署后要生成一个可以公开访问的网址；
2. 别人不登录 WorkBuddy 也可以打开；
3. 不购买域名和服务器，优先使用免费部署方式；
4. 不要修改现在的网站内容和页面设计；
5. 部署完成后，把可以访问的网址直接发给我；
6. 帮我检查首页、按钮、页面跳转和手机端能否正常使用；
7. 告诉我以后修改网站后，应该怎么重新发布。
第三步：按照页面提示确认发布
WorkBuddy 可能会自动处理，也可能提示你点击“确认部署”“确认发布”“允许公开访问”等按钮。只要确认发布的是当前项目，按照页面提示继续即可。
第四步：复制网址并测试
部署完成后，复制 WorkBuddy 提供的网址，然后做三次检查：
- 在自己的浏览器打开；
- 使用浏览器无痕模式打开；
- 把网址发到手机微信里打开。
为什么要用无痕模式？因为你自己的浏览器可能已经登录了 WorkBuddy。无痕模式更接近其他普通用户打开网站时的状态。
部署后页面有问题怎么办？
最常见的问题包括：
- 页面打开后是空白；
- 图片没有显示；
- 某个按钮失效；
- 手机端排版错乱；
- 修改内容后网站没有更新。
继续把问题交给 WorkBuddy：
当前网站已经部署，但是公开网址打开后存在问题。
请检查线上版本和当前项目的区别，重点检查：
1. 图片和字体是否正常加载；
2. 页面按钮是否可以点击；
3. 页面跳转是否正常；
4. 手机端排版是否正常；
5. 当前部署内容是否为最新版本。
请只修复部署和显示问题，不要重新设计网站。
修复完成后重新发布，并把最新网址发给我。WorkBuddy 部署的优缺点
| 优点 | 缺点 |
|---|---|
| 对新手友好，不用学 GitHub、服务器和命令行 | 网址比较长，不方便记忆 |
| 制作和部署都在同一个工具里完成 | 对平台有一定依赖 |
| 可以快速获得公开网址 | 不适合涉及支付、用户隐私和复杂后台的正式业务 |
方案二：使用 GitHub Pages 部署
如果你愿意多学习一点，或者希望网站代码掌握在自己手里，可以使用 GitHub Pages。
简单理解：GitHub 负责保存网站文件，GitHub Pages 负责把这些文件变成一个可以访问的网站。
GitHub Pages 适合什么网站？
它比较适合：
- 个人主页；
- 作品集；
- 公司介绍页；
- 活动页面；
- 简单计算器；
- 趣味测试；
- 纯前端小工具。
如果网站必须使用 PHP、Python 后台，或者需要服务器长期连接数据库，就不适合只用 GitHub Pages。
不知道自己的项目能不能用，也不用自己判断，直接让 AI 检查：
我准备把当前网站部署到 GitHub Pages。
请帮我检查和整理项目，要求：
1. 判断当前网站是否适合 GitHub Pages；
2. 如果适合，请整理成可以直接上传的静态网站文件；
3. 确保首页文件名称为 index.html；
4. 检查图片、字体和样式文件路径；
5. 避免部署后出现页面空白或样式丢失；
6. 不要改变网站现有设计和功能；
7. 最后告诉我应该上传哪个文件夹里的内容。GitHub Pages 部署，照着这六步做
第一步：注册 GitHub 账号
注册并登录 GitHub，记住自己的用户名。后面的网址会用到它。
第二步：创建一个新仓库
点击右上角加号，选择 New repository。
如果想获得最简单的个人网站地址，仓库名称填写：
你的GitHub用户名.github.io例如用户名是 xiaoming，仓库名就填写 xiaoming.github.io。
第三步：上传网站文件
进入仓库后，点击 Add file → Upload files，把 AI 帮你整理好的文件上传。
最容易犯错的地方：通常要上传文件夹里面的内容，而不是把整个文件夹再套一层上传。
正确情况：仓库首页直接看到：
index.html
assets
images
容易出错的情况：
dist/index.html
项目名称/dist/index.html第四步：打开 GitHub Pages
进入仓库顶部的 Settings，然后在左侧找到 Pages。
按照下面设置：
- Source：
Deploy from a branch； - Branch：
main； - Folder：
/（root）； - 最后点击
Save。
第五步：等待网站生成
保存后等待一会儿，再刷新 Pages 设置页面。看到 Your site is live at 就说明已经发布成功。
第六步：打开网址检查
- 电脑浏览器能否打开；
- 无痕模式能否打开；
- 手机微信能否打开；
- 图片和样式是否正常；
- 主要按钮是否可用。
GitHub Pages 常见问题
打开后显示 404
检查仓库根目录是否有 index.html，以及 Pages 是否选择了 main 和 /root。
页面有文字，但没有样式
通常是 CSS、图片或 JavaScript 路径有问题。可以把问题交给 AI：
当前网站上传到 GitHub Pages 后可以打开，但是样式和图片没有正常显示。
请检查资源路径，修复 GitHub Pages 部署后的路径问题。
不要修改页面设计，只处理资源无法加载的问题。网站打开是一片空白
可能上传了项目源代码，却没有上传构建后的 dist 或 build 文件。让 AI 明确告诉你最终需要上传哪个目录。
修改网站后怎么更新
最简单的方式是重新上传修改后的文件并覆盖旧文件。经常更新的话，可以再学习 GitHub Desktop。
GitHub Pages 的优缺点
| 优点 | 缺点 |
|---|---|
| 网站代码掌握在自己手里 | 第一次操作稍有门槛 |
| 适合长期积累作品 | 主要适合静态网站 |
| 免费获得 github.io 地址 | 公开仓库中的代码可能被别人看到，不能上传密码和密钥 |
| 以后可以绑定独立域名或迁移平台 | — |
三、Cloudflare 和其他免费方案
除了 WorkBuddy 和 GitHub Pages，还可以使用 Cloudflare Pages、Vercel、Netlify 等平台。
这里不展开详细教程，只简单说一下。
Cloudflare Pages
可以连接 GitHub 仓库，每次更新代码后自动重新部署。部署完成后通常会获得“项目名称.pages.dev”地址。适合 Astro、React、Vue 和各种静态项目。
Vercel
对 Next.js 项目比较友好，也可以部署常见前端项目，通常会获得“项目名称.vercel.app”地址。
Netlify
也适合静态网站和前端项目，可以连接 GitHub，也可以上传构建后的文件。
但刚开始做 Vibe Coding 项目的人，没必要一次研究所有平台。
先学会 WorkBuddy 直接部署，再掌握 GitHub Pages，已经能满足大部分个人项目的分享需求。
四、两种方案怎么选？
| 你的情况 | 推荐方式 |
|---|---|
| 完全不懂技术，只想赶快发给别人 | WorkBuddy 直接部署 |
| 网站就是在 WorkBuddy 里做的 | WorkBuddy 直接部署 |
| 只是临时测试或小范围分享 | WorkBuddy 直接部署 |
| 想长期保留网站代码 | GitHub Pages |
| 想积累自己的项目作品 | GitHub Pages |
| 以后可能绑定独立域名 | GitHub Pages 或 Cloudflare Pages |
| 正式企业官网或长期商业项目 | 独立域名 + 稳定托管方案 |
WorkBuddy 适合先把网站发出去，GitHub 适合把项目真正保存下来。
五、不要让“部署”成为项目永远无法发布的理由
很多人使用 AI 做网站时，前面的过程非常兴奋。
页面做出来了，功能也能用了，但一看到域名、服务器、备案、DNS 解析这些词，就决定：
“等我有时间研究清楚再上线。”
然后这个项目就永远留在了自己的电脑里。
其实很多 Vibe Coding 项目根本不需要一开始就考虑得那么复杂。
如果网站只是用于：
- 发给朋友玩；
- 放到微信群里；
- 展示自己的想法；
- 给客户看初稿；
- 验证是否有人需要；
- 做成自己的作品案例。
那么免费的二级域名已经完全够用。
先完成最简单的闭环：
产生想法 → 用 AI 做出来 → 免费部署上线 → 发给别人体验 → 收集真实反馈
如果根本没人使用，就没必要急着购买域名和服务器。
如果真的有人喜欢、有人传播、有人愿意长期使用，再去考虑购买独立域名、做 SEO、接入数据库、增加登录功能，或者迁移到更稳定的服务器。
最后想说：
Vibe Coding 最大的价值，不只是让普通人更容易写出代码。
它更重要的意义是，让一个原本只停留在脑子里的想法，可以更快变成一个别人真正能打开、能体验、能使用的网站。
所以网站做完之后，不要只停留在本地预览。
先把它发出去。哪怕暂时只是一个很长的 codebuddy.work 地址，或者一个免费的 github.io 地址。
从“我做了一个网站”，到“别人真的打开了这个网站”，才算真正完成了一个 Vibe Coding 项目。
— 江南 GEO 笔记 —
本文首发于公众号【江南GEO笔记】。
查看公众号原文