AI 生成网页部署上线教程：从 index.html 到公开网址的 5 步

云上的幻象2026-09-268 分钟阅读2,876 字10

100%

先说结论

AI 生成网页部署上线的最短路径是：把产物整理成一个含 index.html 的文件夹 → 推到 GitHub → 在 Netlify / Vercel / Cloudflare Pages 上一键导入 → 绑域名、开 HTTPS，全程不需要碰服务器。真正卡住人的往往不是部署这一步，而是部署前的三件事：首页文件名对不对、构建命令能不能跑通、环境变量有没有同步过去。

本文按”生成 → 本地自测 → 选平台 → 上线 → 上线后检查”的顺序讲，给出可以直接复制的命令与配置，也列出 AI 生成项目最常见的几类构建失败原因。

第一步：把 AI 的产物整理成可部署结构

AI 工具（Bolt 、 v0 、 Lovable 、各类对话式生成）吐出来的代码有两种形态，处理方式不同：

纯静态（HTML + CSS + JS，无框架）：只要保证首页叫 index.html、资源用相对路径引用，直接可传。
框架项目（Next.js / Vite / React）：需要 package.json 里有正确的 build 脚本，并先在本地跑通 npm run build。

让 AI 改了五轮以上之后样式开始错乱，八成是 CSS 重复定义。别再让它继续打补丁，直接下一条指令：”把 style 标签里的 CSS 重新整理一遍，去掉重复规则”，比让它定位问题快得多。

第二步：本地自检清单（跳过这步后面全是坑）

本地能正常打开、无控制台报错
npm run build（如有）成功，产物目录存在
依赖都写在 dependencies 而非 devDependencies——这是”本地能跑、线上构建失败”的头号原因
代码里没有硬编码的密钥；把需要的值写进 .env.example 备查
图片已压缩、格式统一（能用 WebP 就用 WebP）

第三步：平台怎么选

平台	最适合	免费额度	上手方式
Netlify	纯静态站、运营自己维护的落地页	100GB/月流量	拖拽文件夹即可发布
Vercel	Next.js 、需要服务端函数的全栈项目	100GB/月流量	关联 Git 仓库自动构建
Cloudflare Pages	要全球加速、流量较大的静态站	不限流量	关联 Git 或直传
GitHub Pages	文档、作品集、简单项目页	不限	GitHub Actions 构建
Cloud Run / 容器	Docker 化、需要长进程的服务	按量	需自己写 Dockerfile

第四步：三条上线路径

路径 A：拖拽部署（零命令行，推荐给非技术同学）

登录 Netlify 后台，把放好 index.html 的整个文件夹拖进指定区域，几十秒后拿到 xxx.netlify.app 地址。 Vercel 、 Cloudflare Pages 也支持类似方式。要绑自己的域名，在平台的域名设置里添加，然后去域名服务商后台加一条 CNAME 指向平台给的地址。

路径 B：Git 关联（推荐，改一次推一次自动发布）

git init
git add .
git commit -m "Initial commit"
gh repo create my-app --public --source=. --remote=origin --push

# Vercel
npm i -g vercel
vercel          # 先出预览地址
vercel --prod   # 确认无误再上生产

之后每次 push 都会自动重新构建，并生成一条独立的预览链接，方便给别人看效果再合并。