零基础网页部署保姆级教程，搞定上线最后一公里
现在很多人不是做不出网页，而是卡在最后一步：AI 已经帮你把页面写好了，你自己电脑上也能打开，但你不知道怎么让别人通过一个链接访问它。
这一步就叫部署，也就是网页上线的最后一公里。
今天这篇文章就教你怎么用免费、简单、快速的方式，把你 Vibe Coding 出来的网页部署到线上，让朋友、客户，或者任何人，都能直接打开访问。
我会按最常见的几种情况来讲：纯静态网页用什么，AI 小工具用什么，不想折腾 GitHub 又该怎么办。
你不需要懂服务器，也不需要先学一堆后端知识。
跟着步骤做就行。
一. 部署前先判断你手里是什么项目
很多新手一上来就卡住，是因为不知道自己应该选 GitHub Pages、Cloudflare Pages，还是 Vercel。
先别急着看平台。
你先看自己的项目文件夹。
如果里面主要是这几个文件：
- index.html
- style.css
- script.js
那它基本就是纯静态网页。个人主页、网页版简历、小游戏、作品集，大部分都属于这一类。
如果里面有这些东西：
- package.json
- next.config.js
- vite.config.js
- src/
- app/
应用程序/ - pages/
页面/
那它大概率是 React、Vue、Next.js 这类现代前端项目。
如果你的项目还用到了 OpenAI、DeepSeek、Claude 这类大模型 API，那你还要多注意一件事：API Key 绝对不能写在前端代码里。
这个坑后面会单独讲。
先把方案跑一遍。最后我会放一张对比图，帮你快速选。
二. 方案一：最基础的静态页面，用 GitHub Pages
GitHub Pages 适合很简单的页面。
比如你写了一个个人介绍页、网页版简历、浏览器小游戏，整个项目就是 HTML、CSS、JS，没有后端，也不需要登录、数据库、AI 接口。
这种项目用 GitHub Pages 就够了。
它的优点是：免费、稳定、和 GitHub 仓库绑定得很紧。
它的缺点也很明显：你需要先把代码放到 GitHub 上，而且如果你在国内访问，有时候体验不一定稳定。
第一步：新建一个 GitHub 仓库
打开 GitHub，点击右上角的 New，新建一个仓库。
仓库名可以随便起，但建议用英文，比如 my-website、personal-page、ai-tool-demo。
然后把你的项目文件上传进去。
创建好仓库之后，点击 Add file，再点 Upload files。
把你的网页项目拖进去。
这里有一个小细节：index.html 最好放在项目根目录。
很多人部署之后打不开，就是因为首页文件没放对位置。
第二步：打开 GitHub Pages
进入仓库页面之后，点击顶部的 Settings。
在左侧菜单里找到 Pages。
然后在 Build and deployment 下面找到 Branch。
分支选择 main，目录一般选择 /root，然后点 Save。
第三步：等它生成网址
等一两分钟，刷新页面。
如果看到 Your site is live at…，说明部署成功了。
点进去，你的网页就已经能被别人访问。
这个方案适合学习、展示和小作品。
如果你只是想把一个 HTML 页面发给别人看，GitHub Pages 完全够用。
三. 方案二：纯静态页面，我更推荐 Cloudflare Pages
如果你做的是纯静态网页，但又不想太依赖 GitHub Pages，我会更推荐 Cloudflare Pages。
原因很简单：它也免费，而且静态页面的访问体验通常更友好。
它还支持直接上传静态文件。
这对零基础用户很重要，因为你不一定非要先学会 Git。
第一步：注册并登录 Cloudflare
打开 Cloudflare 官网，注册账号并登录。
进入控制台之后，在左侧菜单找到 Workers & Pages。
第二步：创建 Pages 项目
进入 Workers & Pages 后，切换到 Pages 页面。
然后点击 Create application 或 Create project。
这里通常会有两种方式：
- 连接 Git 仓库
- 直接上传静态文件
如果你只是要部署一个普通网页，直接选择 Upload your static files。
第三步：上传你的项目文
选择你要部署的那个项目文件夹。
比如个人主页、小游戏、简历网页，都可以这么传。
上传前再检查一遍项目目录。
普通 HTML 项目一般会有这些文件：
- index.html
- style.css
- script.js
最关键的是 index.html。
它相当于你网站的首页。
没有它，或者它不在正确的位置，部署之后很可能打不开首页。
第四步：点击部署
上传好之后，点下一步。
然后直接点 Deploy。
部署完成之后，Cloudflare 会给你一个网址。
这个网址就可以直接发给别人访问。
这个方案最适合两类人：
- 想部署纯静态页面
- 不想一开始就学 Git 和命令行
如果你刚开始 Vibe Coding，只是做了一个页面，Cloudflare Pages 是很舒服的选择。
四. 方案三：AI 小工具和现代前端项目，用 Vercel
如果你用的是 Next.js、React、Vue，或者做了一个需要调用大模型 API 的 AI 小工具，Vercel 通常是最顺手的选择。
尤其是 Next.js 项目。
Vercel 对 Next.js 的支持非常完整，导入仓库之后，很多配置它会自动识别。
你要做的是把项目接上去，填好环境变量，然后部署。
第一步：登录 Vercel
打开 Vercel 官网：
建议直接用 GitHub 账号登录。
因为后面导入项目时，Vercel 会从你的 GitHub 仓库里读取代码。
第二步：导入项目
进入 Vercel 工作台之后，点击右上角的 Add New…。
然后选择 Project。
第三步：连接 GitHub 仓库
Vercel 会列出你 GitHub 里的仓库。
找到你想部署的项目，点击 Import。
第四步：配置环境变量
这一步很多新手会忽略，但它非常重要。
如果你做的是 AI 工具，用到了 OpenAI、DeepSeek、Claude 或其他大模型的 API Key，千万不要把 Key 写进前端代码。
错误做法是这样的：
const apiKey = “sk-xxxxxx”
只要这段代码出现在浏览器能看到的前端文件里，别人打开开发者工具，就有机会把你的 Key 拿走。
正确做法是把 Key 放到 Vercel 的 Environment Variables 里。
比如：
- OPENAI_API_KEY
- DEEPSEEK_API_KEY
- ANTHROPIC_API_KEY
然后你的后端接口从环境变量里读取它。
这个动作可以省掉很多后面的麻烦。
不是怕你代码写错，是怕你的额度被别人刷光。
第五步：点击部署
配置完成后，点击 Deploy。
Vercel 会自动安装依赖、打包项目、生成线上网址。
等它跑完之后，你会看到一个
的地址。
点开能访问，就说明部署成功。
Vercel 的好处是，对现代前端项目和 AI 小工具非常友好。
但它也有一个现实问题：一旦你的项目有后端接口、有 AI 请求、有流量，就要开始看额度。
后面我会讲。
五. 方案四：让 Codex 直接帮你部署
如果你连 GitHub、环境变量、部署后台都不想碰，还有一种更省事的方式：让 Codex 帮你做。
前提是你的 Codex 环境已经接入了 Vercel 相关能力，或者已经安装并授权了对应插件。
Codex 下载链接：
第一步：打开 AI 助手
在你的 AI 编程工具里打开对话框。
比如你正在用 Codex、Cursor，或者其他支持项目级操作的 AI 编程工具。
第二步：直接下指令
你可以直接说：
请帮我把当前正在写的这个项目通过 Vercel 部署上线。
如果插件和授权都没问题，它会自动分析项目结构，然后帮你走部署流程。
第三步：拿到线上网址
部署完成后，AI 会在对话框里给你一个网址。
类似
。
你点开看一下，确认页面能正常访问，再发给别人。
这个方案最适合懒得折腾后台的人。
但是我建议你至少要知道它背后在做什么。
因为一旦部署失败，你要能看懂它卡在哪一步：是 GitHub 没授权，是 Vercel 没登录，还是环境变量没配。
六. 想长期使用，必须算清楚这笔现实账
如果你只是发一个小作品给朋友看，前面几个方案已经够了。
但如果你想把这个网页当成正式产品、个人主页、作品集，或者一个长期运行的 AI 工具，就不能只看一键部署。
上线只是开始。
接下来你要关心三件事：域名、免费额度、API 安全。
七. 绑定自己的域名
平台送你的网址一般都带尾巴。
比如：
这些网址能用，但不够好记。
如果你要发给客户、写进简历、放到小红书或公众号里，最好配一个自己的域名。
怎么买域名
你可以去阿里云、腾讯云、Namecheap 这类域名注册商买。
普通域名一年几十块钱就够。
比如：
以腾讯云为例：
怎么绑定域名
进入 Vercel 或 Cloudflare 的项目后台。
找到 Settings -> Domains。
把你买好的域名填进去。
平台会给你一到两条 DNS 记录，常见的是 CNAME 或 A 记录。
你再回到买域名的地方，把这些记录复制到解析设置里。
等几分钟，新的域名就能访问你的网站。
这里最容易踩的坑是填错 DNS。
如果绑定之后迟迟打不开，不要急着重来。
先等 10 到 30 分钟，再检查记录类型、主机记录和值有没有填反。
八. 免费额度不是无限额度
部署平台愿意给免费额度，是为了让你学习、试用、跑小项目。
它不是让你拿来跑高流量产品的。
这个判断很重要。
以 2026 年 6 月前后的官方文档为例，Vercel Hobby 计划有 100GB Fast Data Transfer、100 万次函数调用、100GB-Hours Function Duration 等免费额度。GitHub Pages 有每月 100GB 的软带宽限制。Cloudflare Pages 免费计划也有文件数量、单文件大小、构建次数等限制。
平台规则会变，发布前最好去后台 Usage 或官方文档再看一眼。我核对的是这几个官方页面：
、
、
。
对静态网页来说，免费额度通常够用。
但如果你的网站里有很多高清图片、视频，或者你做的是 AI 小工具，情况就不一样了。
月流量和带宽
网页每被打开一次，浏览器都会下载 HTML、CSS、JS、图片等资源。
如果你的首页很轻，只有几百 KB，问题不大。
但如果你首页有很多高清图，一次打开就几十 MB，流量会消耗得很快。
比如一个作品集首页 80MB：
- 访问 1000 次，大约就是 80GB
- 访问 2000 次，大约就是 160GB
这时候免费额度很容易顶不住。
Serverless 函数和 AI 请求
AI 工具更麻烦。
普通静态网页，用户打开一次，主要消耗网页流量。
AI 工具里，用户点一次生成，可能同时消耗：
- Vercel 后端函数运行时间
- Vercel 请求次数
- Vercel 流量
- 大模型 API 费用
- 数据库读写费用
你不只是消耗部署平台额度，还可能消耗大模型账户里的钱。
比如用户点一次生成：
- 前端请求你的 /api/chat
- 你的 Serverless Function 开始运行
- 它调用 OpenAI、DeepSeek 或 Claude
- 模型返回结果
- 接口再把结果返回给用户
如果模型 10 秒才返回，你的函数就可能占用 10 秒资源。
用户多了以后，这笔账会变得很真实。
九. 免费项目最怕的几个坑
下面这几件事，新手最容易踩。
坑一：网页图片太大
如果你做的是作品集，首页放了很多高清图，页面体积会非常大。
解决方式很简单：
- 压缩图片
- 尽量用 WebP 或 AVIF
- 不要直接上传相机原图
- 视频不要直接放部署平台
- 大文件放对象存储或视频平台
图片是很多免费网站超额度的第一原因。
坑二：AI 接口没有限制
比如你做了一个 AI 文案生成器，任何人打开都可以无限生成。
危险点在这里：
- 别人可以一直点
- 别人可以写脚本刷
- 你的接口会一直调用大模型
- 平台额度和 API 余额都会被消耗
解决方式：
- 加登录
- 限制每个用户每天使用次数
- 限制同一个 IP 每分钟请求次数
- 加验证码
- 限制输入长度
- 限制输出长度
- 设置 API 预算上限
哪怕只是一个小工具，也建议至少做一个最基础的限流。
坑三：把 API Key 写在前端
这是最危险的新手错误。
错误写法：
const apiKey = “sk-xxxxxx”
只要这段代码在前端文件里，别人就有可能看到。
正确链路应该是：
- 前端页面请求你自己的后端接口
- 后端接口读取环境变量里的 API Key
- 后端接口再去调用大模型
- 后端把结果返回给前端
记住一句话就行：
API Key 只能放后端环境变量，不要放前端。
坑四：没有设置预算提醒
很多平台不会像手机流量一样，天天弹窗提醒你快用完了。
所以你最好主动设置：
- 用量提醒
- 消费上限
- 账单提醒
- API 限额
- 每日限额
尤其是 AI API，一定要设置预算上限。
这个动作一点都不高级，但很有用。
写在最后
如果你只想快速选方案，可以这么记：
- GitHub Pages：最适合纯静态小页面，前提是你愿意把代码放到 GitHub。
- Cloudflare Pages：也适合纯静态页面，对零基础用户更友好，可以直接上传文件。
- Vercel：适合 Next.js、React、Vue 和 AI 小工具，环境变量、后端接口、自动构建都更顺手。
- Codex + Vercel：适合你不想手动点后台，希望 AI 直接帮你部署，但前提是插件和授权都配好了。
现在再看这张对比图，会比一上来就看更容易理解。
如果还是懒得判断，就按下面这张路线图走。
先把网页发出去。
等你真的有人访问了，再去考虑域名、额度、限流和更复杂的架构。
