“AI 能帮你写代码”这句话，大家已经听腻了。真正让大多数不会写代码的人卡住的，从来不是“生成代码”，而是生成完之后怎么办。
我见过太多朋友在 ChatGPT 里要到一个很漂亮的网站源码，复制粘贴到本地，双击打开没问题，然后就没有然后了——不知道怎么放上网，不知道怎么让别人访问，更不知道免费的托管到底有哪些坑。代码是 AI 写的，但上线这一步，没人替你做。
这篇文章要讲的就是一条完整链路：用 Claude Code 生成一个可以实际运行的网站，再把它免费部署到互联网上。我会把三种免费托管方式——GitHub Pages、Vercel、Netlify——全部走一遍，并且说清楚各自的适用场景、操作步骤和踩坑点。读完你不仅能照做，还能明白为什么有些教程根本不提部署这件事。
先说结论：Claude Code 的本质，是把你从“会写代码”变成“会验收代码”。门槛确实大幅降低了，但你要补上的，是判断力和基本的工程常识。
1. 这篇文章真正要解决的问题
很多人在 2026 年仍然以为“AI 建站 = 问一句就能上线”。实际上，一条能跑的网站从 0 到 1 至少经过三个环节：
- 生成：用自然语言让 AI 写出网页代码。
- 验收：在本地打开、检查、修正，确认没有明显问题。
- 托管：把文件上传到服务器，生成一个公网可以访问的地址。
普通聊天式 AI 能帮你搞定第 1 步，但它在第 2 步就开始力不从心：你没法看它改文件的过程，也没法让它替你跑命令。第 3 步更是完全不属于聊天 AI 的范畴。
Claude Code 是一个跑在终端里的 AI 编程代理。它不仅能写代码，还能直接访问你的文件系统、读取项目目录、执行命令行、替你做 Git 提交。因此它天生适合把第 1 步和第 2 步串起来。而托管这件事，只要掌握三种免费方案中的任意一种，就能自己完成。
所以这篇文章适合三类人：
- 完全没有编程基础的产品、运营、设计师：想做一个品牌展示站、活动落地页、个人作品集。
- 刚入门的前端学习者：想知道 AI 生成的代码怎么被可靠发布到一个正式网址。
- 已经在用 Claude Code 的开发者：想比较三种常见免费托管，找到最省心的一种。
一句话总结：这篇文章帮你把“AI 生成网站”从演示阶段推到正式上线阶段。
2. Claude Code 的核心概念与适用边界
先把这个工具讲清楚。
Claude Code 是 Anthropic 推出的命令行 AI 编程代理。它不是一个网页对话框，而是装在你电脑里的一个工具，你在终端里启动它之后，它会以对话方式理解你的需求，然后实际动手修改文件、创建项目、运行命令。
它和 ChatGPT、Claude 网页版的区别，是本质性的。网页聊天 AI 只输出文本，你需要自己复制粘贴、新建文件、管理目录；Claude Code 则能直接操作你的本地项目，相当于你多了一个“坐在终端里帮你干活”的同事。
具体能力包括：
- 读取当前项目目录下的多份文件，理解整体结构。
- 在已有代码基础上做修改，而不是每次从头生成。
- 执行 shell 命令，比如运行构建脚本、启动本地服务。
- 创建、重命名、删除文件。
- 整理代码、添加注释、生成 Git 提交。
下图是一个直观对比：
| 能力维度 | 网页版聊天 AI | Claude Code |
|---|---|---|
| 生成代码片段 | 支持 | 支持 |
| 读写本地文件 | 不支持 | 支持 |
| 运行终端命令 | 不支持 | 支持 |
| 感知项目整体结构 | 弱 | 强 |
| 多文件同步修改 | 需要手动复制 | 自动完成 |
| 上手门槛 | 低 | 需要会用终端 |
但这也带来了它的边界。Claude Code不具备真正的审美能力，它能按你的描述搭出结构合理的页面，但配色、间距、视觉细节往往需要你自己提出修改意见。它也没有“验收责任”，生成的代码里可能有无效链接、占位图片、错误的联系方式，这些只能靠你检查。此外，Claude Code 本身不是免费工具，通常依赖 Claude 账号订阅或 API 按量计费，虽然生成一个小网站的消耗不大，但反复迭代较大项目时，费用需要提前有心理准备。
理解到这一层，你就明白为什么我强调“不会写代码 ≠ 不需要验收”。Claude Code 真正替代的是编码执行，它不会替代你对需求的思考和对结果的判断。
3. 环境准备：Node.js 与 Claude Code 安装配置
Claude Code 通过 npm 分发，因此第一步是安装 Node.js。建议到 Node.js 官网下载最新 LTS 版本，不要装在系统盘深处，保持默认路径即可。具体版本要求以 Anthropic 官方文档为准，总体思路是“装新不装旧”。
安装完成后，验证环境：
node -v npm -v能看到版本号，说明 Node.js 环境正常。Windows 用户如果提示“node 不是内部或外部命令”，通常是安装时没有勾选“添加到 PATH”，重装一次即可。
接着全局安装 Claude Code：
npm install -g @anthropic-ai/claude-code安装成功后验证：
claude --version如果能输出版本号，说明核心程序已经就位。接下来是登录认证。Claude Code 支持两种方式：
- 使用 Claude 账号登录：首次运行
claude时，终端会给出一个登录链接，浏览器确认后自动授权。 - 使用 API Key：把密钥写入环境变量，Linux/macOS 在
~/.bashrc或~/.zshrc中添加：
export ANTHROPIC_API_KEY="你的API密钥"Windows PowerShell 则写入：
$env:ANTHROPIC_API_KEY="你的API密钥"这里有个安全提醒：API Key 属于敏感信息，不要提交到 Git 仓库，也不要截图发到群里。配置完后运行claude /status可以查看当前账号和模型状态。
4. 用 Claude Code 生成咖啡店官网：提示词与工作流
环境就绪后，进入正题。我们做一个非常典型的小型网站：一家咖啡店的品牌官网。这个例子足够小、足够真实，能完整跑通“生成→验收→上线”的链路。
先在本地创建项目目录：
mkdir morning-brew-site cd morning-brew-site然后在当前目录启动 Claude Code：
claude启动后进入交互式对话界面。不要在界面上直接说“帮我做个网站”，那等于让 AI 猜需求。更好的做法是先把需求写完整，一次性粘贴进去。可以参考下面这个提示词模板：
我想做一个咖啡品牌官网，品牌名叫“晨光咖啡 Morning Brew”。 需求： 1. 首页：品牌宣传语、招牌饮品展示区、营业时间。 2. 关于页：品牌故事和创始团队简介。 3. 菜单页：饮品列表和价格表格。 4. 联系我们：电话、邮箱、地址和地图占位。 要求： - 纯静态 HTML/CSS/JS，不使用框架。 - 界面是中文，文案要有品牌感，不要用 Lorem ipsum。 - 移动端优先，手机上看要整齐。 - 图片先用可靠的占位图链接，之后我会自己替换。 - 文件结构清晰，代码加注释。粘贴后，Claude Code 通常有两种行为：直接开始写，或者先向你确认细节。如果你希望它先问清楚再动手，可以按Shift+Tab切换“澄清模式”。初次使用建议开启，因为它会就配色、风格、是否需要表单等问题先和你对齐，避免反复返工。
生成过程需要一段时间，你会看到它创建文件、写入代码。结束后，项目目录可能长这样：
morning-brew-site/ ├── index.html ├── about.html ├── menu.html ├── contact.html ├── css/ │ └── style.css └── js/ └── main.js看到这个结构，说明 Claude Code 完成了多文件协作——这是它和网页聊天 AI 最直观的区别。如果你对生成的视觉风格不满意，先不要急着改代码，直接在对话里继续提要求：
整体风格太暗了，我想换成温暖的奶油色系；首页的宣传语再短一点，更有冲击力；菜单页的价格用表格展示。Claude Code 会直接修改对应文件，而不是给你一段新代码让你自己替换。这种“连续对话式开发”正是它的核心体验。
5. 本地验收：上线前的代码检查清单
很多人生成完代码，迫不及待就想去托管。先停一下，本地验收比想象中重要。
在项目目录启动本地服务：
cd morning-brew-site npx serve .如果你更习惯 Python，也可以用：
python3 -m http.server 8080浏览器访问http://localhost:3000或http://localhost:8080，然后逐页检查。下面这个清单是我建议的验收项：
- 首页、关于页、菜单页、联系页是否都能正常打开。
- 页面上的导航链接点击后是否跳转到正确页面。
- 缩小浏览器窗口到手机宽度，检查布局是否错乱。
- 图片是否能加载，有没有裂图。
- 文案有没有明显错误、联系方式是否是占位内容。
- 打开浏览器开发者工具，切到 Console，看有没有红色报错。
AI 生成网站最常见的两类问题，一是图片链接失效，二是导航路径写错。比如页面里写了href="about.html"，但实际文件名可能是about-us.html，这种问题只有人工点击才能发现。
发现问题后，回到 Claude Code 对话里直接描述现象，比如“菜单页里的拿铁图片裂了，请换成 Pexels 上咖啡类的真实图片链接”。它会继续修改文件，你刷新浏览器即可看到结果。
验收标准很简单：四页都能打开，导航能跳转，手机上不难看，没有任何明显的红错。达标之后再进入托管环节。
6. 免费托管方案一：GitHub Pages
GitHub Pages 是 GitHub 提供的静态网站托管服务，最适合个人主页、项目介绍、开源文档这一类场景。优点是免费、稳定、跟 Git 天然集成；缺点是只支持静态文件，不能跑后端逻辑。
前置条件：注册一个 GitHub 账号，并安装 Git 工具。Windows 下安装 Git 时一路默认即可，安装完在终端确认：
git --version然后进入项目目录，把代码提交到 Git：
cd morning-brew-site git init git add . git commit -m "初始化：晨光咖啡官网（Claude Code 生成）" git branch -M main接下来去 GitHub 网页端新建一个仓库。仓库名可以叫morning-brew-site。注意不要勾选“Add a README file”，否则仓库里会多一个初始提交，给首次推送造成麻烦。新建完成后，终端里关联远程仓库并推送：
git remote add origin https://github.com/你的用户名/morning-brew-site.git git push -u origin main推送成功后，回到仓库页面，依次点击Settings → Pages，在 “Build and deployment” 区域把 Source 改为 “Deploy from a branch”，Branch 选择main，目录保持/root，然后点 Save。
等待一分钟左右，访问下面的地址：
https://你的用户名.github.io/morning-brew-site/看到咖啡店官网，就说明上线成功。之后每次更新代码，只需要重复提交并推送：
git add . git commit -m "更新菜单页样式" git pushGitHub Actions 会自动重新构建发布，不需要手动操作。这里有个特殊命名规则：如果你建的仓库名是用户名.github.io，那么访问地址就是https://用户名.github.io/，不用带子路径。适合想要一个专属域名式主页的人。
7. 免费托管方案二：Vercel
Vercel 是前端托管领域的主流平台，对 React、Vue、Next.js 这类现代前端框架支持极好，纯静态站点更是天然兼容。它比 GitHub Pages 多一个重要优势：Push 之后自动部署，并且自带预览地址，团队协作时很舒服。
Vercel 有网页端和命令行工具两种使用方式。对不会写代码的人来说，网页端更直观；对愿意学一点命令行的读者，CLI 更高效。这里我重点讲 CLI，因为它能让你理解部署的底层逻辑。
先全局安装 Vercel CLI：
npm install -g vercel然后回到项目目录执行：
cd morning-brew-site vercel首次运行会要求在浏览器中登录 Vercel 账号，之后是一连串交互式提问。它会依次询问你是否设置并部署当前目录、项目名称、是否需要链接已有项目、选择框架预设等。
针对我们的静态网站，一般这样回答：
- Set up and deploy?
Y - Which directory? 直接回车，使用当前目录。
- Link to existing project?
N - Project name:
morning-brew-site - Framework Preset: 选择
Other - Output Directory: 直接回车留空
完成后，Vercel 会先给出一个预览地址，然后再执行：
vercel --prod这一次你会得到正式的生产地址，形如：
https://morning-brew-site.vercel.app打开这个地址，网站就已经在公网上了。Vercel 会自动配置 HTTPS 证书，不用你碰任何服务器配置。
不习惯命令行的读者，可以走网页端路线：登录 vercel.com → 点击Add New Project→ 导入你刚推送到 GitHub 的那个仓库 → Framework Preset 选 Other → Deploy。效果与 CLI 完全一致。
8. 免费托管方案三：Netlify
Netlify 是另一个老牌静态网站托管平台，它对纯静态站点极其友好，甚至提供了“拖拽部署”这种零命令行的方案，特别适合完全不想碰终端的用户。
最有名的功能叫Netlify Drop。操作流程简单到令人意外：
- 打开
app.netlify.com/drop，按提示用 GitHub 账号或邮箱登录。 - 把本地的
morning-brew-site整个文件夹直接拖进浏览器窗口。 - 等几秒钟，Netlify 会自动生成一个随机子域名，形如
https://xxx.netlify.app。 - 大功告成，你的网站已经在线。
拖拽方案适合一次性发布和快速演示。但如果你后续还要更新内容，更推荐 Git 集成方式：在 Netlify 控制台选择Add new site → Import an existing project → GitHub，选择对应仓库，Build command 留空，Publish directory 留空（因为我们的 HTML 在仓库根目录），点击 Deploy。
之后每次git push，Netlify 都会自动重新发布。如果你想把随机域名改成好看一点的，可以在 Site settings 里修改子域名，例如morning-brew.netlify.app。
Netlify 比较打动人的地方是上手成本极低。哪怕你完全不会命令行，也能在几分钟内把网站放上网。这也是很多产品原型和活动落地页团队选择它的原因。
9. 三种免费托管方案对比与选型建议
三种方案都能免费上线，但侧重点各不相同。放在一起看会更清楚：
| 维度 | GitHub Pages | Vercel | Netlify |
|---|---|---|---|
| 定位 | 静态站点 / 项目主页 | 前端应用托管 | 静态站点 / Serverless |
| 免费额度 | 公开仓库免费，带宽有软限制 | Hobby 套餐免费，含带宽额度 | 免费套餐，含带宽额度 |
| HTTPS 证书 | 自动 | 自动 | 自动 |
| 自定义域名 | 支持 | 支持 | 支持 |
| 部署方式 | Git 推送 | Git 或 CLI | Git 或拖拽 |
| 前端框架支持 | 一般 | 极好 | 好 |
| 上手难度 | 中 | 中 | 低 |
| 最适合场景 | 个人主页、开源项目文档 | React/Vue 应用、博客 | 落地页、作品集、快速原型 |
免费额度的具体数值会随平台政策调整，建议在实际使用时以官方页面为准。对于个人小型网站，三种方案都远远够用。
选型的核心判断，看你未来要不要升级：
- 如果只是想做一个长期稳定的个人主页，GitHub Pages最省心，跟代码仓库关系最紧密。
- 如果你以后打算学 React、Vue 或者用现代框架做更复杂的站点，Vercel的体验最顺滑。
- 如果你完全不懂命令行，又想让网站在几分钟内上线，Netlify Drop的拖拽方案没有对手。
一个常见组合是把 GitHub 当“代码老家”，Vercel 或 Netlify 当“线上发布口”。Push 一次，自动上线一次，改坏了还能靠 Git 回滚。
10. 常见问题与排查方法
这一节把最容易踩的坑集中列出来。遇到问题时，先按表格里的顺序排查，基本能覆盖 90% 的失败场景。
| 问题现象 | 可能原因 | 排查方式 | 解决方案 |
|---|---|---|---|
运行claude提示 command not found | Node.js 未安装，或 npm 全局目录不在 PATH | 执行node -v、npm root -g | 重装 Node.js LTS，或手动配置 PATH |
| Claude 对话中提示授权失败或额度受限 | API Key 无效、额度不足 | 运行claude /status查看状态 | 重新登录账号，或检查 API 计费余额 |
| GitHub 推送被拒绝 | 远程仓库有初始 README，本地和远程历史不一致 | 查看git status和推送报错信息 | 先git pull --rebase origin main，再重新 push |
| GitHub Pages 打开是 404 | Pages 未开启，或分支目录配错 | Settings → Pages 查看 Source 配置 | 改为 Deploy from branch + main + /root |
| 页面更新后线上没变化 | 构建未完成或浏览器缓存 | 强制刷新 Ctrl+F5；查看 Actions 状态 | 等待 1 到 2 分钟，或清除缓存 |
| Vercel 部署后白屏 | 框架预设选错，导致构建流程异常 | 打开 Deployment 的 Build Logs | 框架预设改成 Other，重新部署 |
| Netlify 页面能开但没样式 | Publish directory 指向了错误目录 | 浏览器检查 CSS 文件是否 404 | 重新设置 Publish directory 为根目录 |
| 图片显示不出来 | 图床链接失效或反盗链 | 浏览器 Network 面板查看图片请求 | 换成稳定图床，或替换为本地图片 |
如果你部署的是纯静态网站，遇到“白屏”时先检查浏览器 Console 里的报错，绝大多数是路径问题。路径问题在静态站点里非常典型：./css/style.css和/css/style.css在子路径部署下表现完全不同。Claude Code 一般能处理好相对路径，但替换图片或修改目录时，还是值得多看一眼。
11. 最佳实践与工程建议
工具用顺之后，更要建立工程意识。下面几条是我认为最值得遵守的规则。
第一条：AI 生成的内容必须人工复核。联系方式、营业时间、价格表这些信息尤其容易编造。上线前逐页核对，替换掉占位内容。搜索引擎对虚假信息零容忍，你自己的品牌也不能靠 AI 瞎编。
第二条：网站文件不要堆在一个目录里。哪怕是一个简单站点，也建议按css/、js/、images/、pages/分目录。Claude Code 在结构清晰的项目里表现会好很多，以后扩展新页面也更方便。
第三条：敏感信息绝不进仓库。网站代码里不要出现 API Key、数据库密码、内部地址。如果 Claude Code 生成的代码里意外出现了密钥，要立即撤销该文件并轮换密钥，而不是简单删掉继续用。
第四条：用 Git 管理版本，而不是用“最终版 v3”管理版本。每次修改后都提交一个带说明的 commit，例如fix: 修正首页导航错位。坏了好回滚，也好复盘。
第五条：定期备份。虽然 GitHub、Vercel、Netlify 都是大平台，但自己的内容只有自己负责。最简单的方式是定期把整个项目目录压缩存档，或者把仓库克隆到另一台机器。
第六条：留意免费额度边界。免费托管一般够个人站使用，但不要在上面存放超大视频、大量高清原图或高流量下载文件。这部分资源应放到对象存储或视频平台，而不是塞进静态站点。
第七条：不要在完全没有本地验证的情况下直接上线。托管平台虽然会自动构建，但构建成功 ≠ 页面正确。改了代码，先本地跑通，再 push，这是最稳妥的节奏。
12. 总结与后续学习方向
回到文章开头的问题：不会写代码的人，能不能用 AI 做一个网站并且免费放上网？答案是可以，而且流程比想象中短。Claude Code 负责把需求变成文件，三种托管方案负责把文件变成网址，中间只隔着一道验收关卡。
但请记住一个判断：AI 没有降低“验收”的要求，它只是降低了“写”的要求。一个能读懂页面结构、能说出“这里导航错了”“手机上布局有问题”的人，才是这套流程里真正不可替代的环节。这个能力不需要你会写代码，但它需要你愿意认真打开网页去看，去点击，去怀疑。
下一步如果你想继续深入，可以按这个顺序尝试：
- 给网站绑定自己的域名，三家平台都有对应的域名管理入口。
- 添加 SEO 基础配置，包括页面标题、描述、favicon 和
sitemap.xml。 - 接入免费的表单服务或评论区，让静态网站具备基础交互能力。
- 在网站上挂一个访问统计脚本，观察用户从哪里来、看了哪些页面。
这条链路再往后走，就是前端开发和部署运维的正式领域。届时你回头看今天用 Claude Code 生成的第一个网站，大概率会觉得简陋，但它证明了一件事：你已经完成了从“不会写代码”到“能上线一个真正的网站”的跨越。剩下的，只是继续往前迭代而已。
