零基础用 AI 编程部署正式网站：从 GitHub 到 Vercel 再到域名绑定的完整实操
2025 年 9 月 16 日，WaytoAGI 社区「晚八点共学」邀请到 AI 编程实践者彭骋（Ben）做了一场分享。Ben 曾就职于飞书多维表格，目前专注于网站出海，他并非专业程序员，而是产品经理出身，但已用 AI 工具完成了二十多个网站、多个浏览器插件和多个多维表格插件的开发。这场分享面向完全零基础的文科生，完整演示了如何用 AI 编程工具制作网站、同步代码到 GitHub、通过 Vercel 部署，并绑定自己购买的域名，最终上线一个正式网站。以下是分享内容的完整梳理。
核心思路：四个工具，一条流水线
Ben 把整个流程概括为四个环节，每个环节对应一个工具，各司其职：
- GitHub：代码的存储和版本管理平台。Ben 形容它「就是用来存代码的百度云盘」，网站代码同步到 GitHub 后，可以在本地修改再上传，也方便追溯历史版本。
- Lovable（可选）：在线 AI 编程平台，适合快速做出美观的网页。生成的代码可以绑定 GitHub 账号后自动同步。
- Vercel：网站部署平台。把 GitHub 上的项目导入 Vercel，它会自动帮你托管代码并部署成网站，流量不大时基本免费，对新手非常友好，不需要了解虚拟机或云服务器的细节。
- Spaceship：域名注册服务商。支持中文界面，可以用支付宝和国内信用卡付款，买完域名后绑定到已部署的网站上，完成上线。
Ben 特别强调，这套流程的核心价值在于「正式」：「如果你不弄自己的域名的话，就是 lovable 的一个二级域名，不是那么的正式。如果说你要自己注册一个域名，并且上线自己的网站的话，就会更正式一点。」
实操演示：从五子棋游戏到正式上线
Ben 在直播中用一个五子棋游戏网站作为案例，完整走了一遍从制作到上线的流程。
第一步：用 Lovable 生成网站
打开 Lovable 平台，直接输入需求「写一个简单的五子棋游戏网站」，平台会自动生成代码和预览页面。Lovable 免费用户每天有 5 次使用额度，每次与 AI 对话算一次；通过 Ben 提供的邀请链接注册，每天可增加到 10 次额度。
生成后可以继续让 AI 修改，比如 Ben 演示了「把五子棋的背景换成彩色」，AI 会自动修改代码。Lovable 的一个特点是，如果它写完代码发现 bug，会自己先修复，且修复 bug 不额外消耗 token。
第二步：同步代码到 GitHub
在 Lovable 中点击「Connect a project」，绑定 GitHub 账号后，生成的代码会自动在 GitHub 上创建一个项目并同步过去。默认情况下代码是 private（私有）的，只有自己可见；也可以改成 public，让别人参考或复制。
第三步：用 Vercel 部署
打开 Vercel（需提前绑定 GitHub 账号），点击「Add New Project」，导入刚才在 GitHub 上新建的项目，然后点击 Import 和 Deploy，Vercel 会自动完成部署。部署成功后，Vercel 会免费提供一个二级域名（格式为 项目名.vercel.app），此时网站已经可以访问。
Ben 解释了为什么不在 Lovable 直接绑定域名：「这边绑定域名是 Lovable 的付费高级功能，所以用 Vercel 去搞会比较方便简单一点。」
第四步：购买域名并绑定
在 Spaceship 首页搜索想要的域名关键词，比如「gofund」，会列出所有可注册的后缀及价格。Ben 演示中购买了一个 gofund.space 域名，首年价格 6.98 美元。他提醒：「点 AI 的域名比较贵，500 块钱一年，一次卖两年，除非那个东西能挣钱，不然不建议直接用。」
购买完成后，域名会出现在 Spaceship 的域名管理器列表中。接下来在 Vercel 的项目设置里找到 Domains 选项，输入自己的域名（不建议加 www 前缀），Vercel 会生成对应的 DNS 配置信息——Ben 打了个比方：「这玩意就有点像邮编地址，你得知道对应的邮编才能把信寄过去。」
然后回到 Spaceship 的高级 DNS 设置，新增一条 A 记录，把 Vercel 提供的 IP 地址填进去，Name 保持默认的 @。配置完成后等待生效（全球 DNS 生效有时间差），Vercel 会自动检测绑定状态并生成 HTTPS 证书。绑定成功后，访问自己的域名就能打开网站了。
后续更新：全自动部署
Ben 特别演示了后续更新的流程：在 Lovable 里让 AI 修改代码（比如换背景色），修改完成后代码会自动同步到 GitHub，GitHub 的提交会自动触发 Vercel 重新部署，整个过程不需要手动登录 Vercel 后台。他在 GitHub 的提交记录里展示了多个版本，每个版本旁边都有 Vercel 部署成功的勾选标记。
常见问题与避坑建议
关于工具选择
有观众问现在最专业的 AI 编程工具组合是什么，Ben 给出了自己的判断：「做网站比较好用的是 Lovable，做后端比较好、或者说通用能力都比较好的话是 Claude Code，Cursor 现在已经不算第一，算次要选择了。最近 OpenAI 的 Codex 也很不错，推荐大家试一试。」
关于后端需求
Ben 解释了如何判断网站是否需要后端：「下五子棋这种纯前端实现功能的，刷新一遍就完全重置了，不需要后端。如果需要保存数据、有排行榜、历史记录、最高分最低分，就需要后端去存数据。如果涉及大量计算，比如音频转文字、视频转换，要么调 AI 接口，要么自己部署服务，也需要后端。」
他建议：「判断不准要不要后端，直接让 AI 帮你做判断。尽量先做纯前端能搞定的事情，但凡涉及后端都会复杂一点，没必要。」
关于 Vercel 的定位
Vercel 主要用于前端部署，「比较复杂的后端，涉及后端的东西它都不太能行。后端的话只能调个 API、调一调 Supabase 什么的没问题，但重后端的话可能需要自己买服务器来搞。」
关于域名选择
「整体的原则是用常见的后缀，但凡你没见过的后缀尽量都不要用。点 com、点 AI、点 net、点 IO 这些都比较常见，点 APP 也没问题。一些奇奇怪怪的、你从来没见过的后缀尽量不要买。」
关于备案
Ben 特别提到海外域名注册商的好处：「不用备案。在国内买域名就要搞备案，个人搞起来比较麻烦。如果业务主要在国内做，建议在国内域名商买域名并备案；如果只是自己用着玩或做小项目，就不要在国内买，备案的时间都够你做好多事情了。」
现场问答
问：Lovable 每天 5 次额度，是只能建 5 个项目吗？
答：每次跟它说一句话算一次额度。从零建项目，一次把需求写完整，可以建 5 个网站。后续修改、加主题也都算额度。免费额度不太够用，但 Lovable 做出来的网页比较好看，所以推荐使用。
问：如果每天都要更新，每天都要在 Vercel 发布吗？
答：不需要。通过 GitHub 把代码传上去以后会自动触发部署。未来更新只需要在 AI 编程工具里修改代码，提交到 GitHub 就能自动部署，不用去 Vercel 后台操作。
问：GitHub、Lovable、Vercel 之间的联系一直搞不懂。
答：GitHub 是存代码的地方，相当于代码的云盘；Vercel 是部署的地方，相当于微信公众号这种发布平台；Lovable 是 AI 编程的地方，用来写东西。三个工具各管一段。
问：从 GitHub 拉项目到本地修改后，怎么同步回 GitHub？
答：在本地 Terminal 里登录 GitHub 账号，就能把本地修改的代码同步回 GitHub 项目。也可以直接问 AI「怎么登录 GitHub 账号、怎么把代码上传」，AI 会帮你全部搞定。
问：用 n8n 代码 + Vercel 部署 + 买域名，可以云部署 n8n 吗？
答：Vercel 主要搞简单的前端，复杂后端不太行。n8n 这种重后端的可能需要自己买服务器来部署。
问：Coze 空间生成的网页能绑定自己的域名吗？
答：Coze 空间生成的网页可能属于 Coze 平台，不属于你自己。用这套流程做出来的网站，源代码全部存在 GitHub 上，网站所有权完全属于你，换平台或换工具都能继续用。
要点回顾
- 完整流程四步走：Lovable 生成网站 → 同步到 GitHub → Vercel 部署 → Spaceship 买域名并绑定。
- Lovable 免费用户每天 5 次额度，通过邀请链接注册可增至 10 次；每次对话算一次。
- GitHub 默认代码为 private，可自行改为 public 分享。
- Vercel 流量不大时免费，支持自动部署，GitHub 提交代码后无需手动操作。
- 域名推荐在 Spaceship 购买，支持中文和支付宝，海外域名无需备案。
- 域名后缀选常见的（.com、.ai、.net、.io），避开生僻后缀。
- 简单功能网站不需要后端；需要存数据、排行榜或大量计算时才需要后端。
- 判断是否需要后端，直接让 AI 帮你判断即可。
- 后续课程将覆盖爬虫、浏览器插件、后端服务、商业化网站等内容，一般每周二晚 8 点直播。