一、为什么你的网站只有你自己能看到?
你用 AI 写了一个很漂亮的网页——用 HTML、CSS、JavaScript 做了一个个人主页、工具页面或者博客模板。你在浏览器输入 http://localhost:5500 或者 http://127.0.0.1:8000,效果完美。你兴冲冲地发给朋友看,朋友却说"打不开"。
这不是你的问题,是你还差最后一步:把你的网站部署到互联网上。
localhost 的意思是"本机地址",只有你自己的电脑能访问。想让全世界都能看,你需要把你的网站文件放到一台24 小时开机的服务器上,然后通过一个域名让别人找到它。
好消息是:现在有很多免费的方案,操作比你想象的简单得多。
二、理解几个关键概念
2.1 本地(localhost) vs 线上(Server)
| 本地开发(localhost) | 线上部署(Server) | |
|---|---|---|
| 谁可以访问 | 只有你自己 | 全世界 |
| 需要什么 | 电脑 + 编辑器 | 服务器 + 域名 |
| 是否 24 小时 | ❌ 电脑关机就没了 | ✅ 服务器一直在线 |
| 费用 | 免费 | 可以免费(有免费方案) |
2.2 静态网站 vs 动态网站
简单的区分标准:
静态网站:纯 HTML + CSS + JavaScript,没有后台数据库。
- 例子:个人主页、产品展示页、工具页面
- 部署难度:⭐ 极简单
动态网站:需要后端程序(Python/Node.js/PHP)和数据库。
- 例子:博客后台、电商网站、论坛
- 部署难度:⭐⭐⭐⭐ 较复杂
本文主要针对静态网站,这也是大多 AI 工具生成的网站类型。
2.3 需要的东西
把你的网站上线,只需要三样东西:
① 网站文件(HTML/CSS/JS 等)
② 一台服务器(放文件的地方)
③ 一个域名(别人访问你的地址)第②和第③都有免费方案。
三、方案一:Vercel(最推荐,连域名都送你)
Vercel 是目前最简单的静态网站托管平台,对个人开发者完全免费。
3.1 准备工作
- 注册一个 GitHub 账号:https://github.com
- 注册一个 Vercel 账号:https://vercel.com(可以用 GitHub 直接登录)
3.2 步骤
方式 A:直接把文件夹拖进去(最简单)
① 打开 vercel.com,点击 "Add New → Project"
② 点击 "Continue with Git" 下方的 "Import Third-Party Git Repository"
或直接找到 "Deploy without Git" 选项
③ 把你的网站文件夹拖拽到上传区域
④ 点击 Deploy
⑤ 等待几秒 → ✅ 你的网站上线了!Vercel 会自动给你一个域名:你的项目名.vercel.app
方式 B:关联 GitHub 仓库(推荐,更新方便)
① 把你的网站文件推送到 GitHub 仓库
② 登录 Vercel,点击 "Add New → Project"
③ 选择你的 GitHub 仓库
④ 框架选择 "Other"(如果是纯静态)
⑤ 点击 "Deploy"
⑥ ✅ 上线!
以后每次往 GitHub 推送代码,Vercel 会自动重新部署。3.3 绑定自定义域名
① 在 Vercel 项目设置中点击 "Domains"
② 输入你的域名(比如 myblog.com)
③ 去你的域名管理后台添加 CNAME 记录指向 cname.vercel-dns.com
④ 等几分钟 DNS 生效
⑤ ✅ 用你自己域名访问了!Vercel 核心优势:
- 全球 CDN,访问速度快
- 自动 HTTPS(免费的 SSL 证书)
- 推代码自动部署
- 免费额度对个人完全够用
四、方案二:Netlify(Vercel 的强力对手)
Netlify 和 Vercel 类似,也是极好用的免费托管平台。
4.1 上传部署
① 登录 https://app.netlify.com
② 把网站文件夹拖到 "Sites" 页面的上传区域
③ 几秒后自动部署完成
④ Netlify 给你域名:xxx.netlify.app4.2 关联 GitHub
① 在 Netlify 点击 "Add new site → Import an existing project"
② 连接 GitHub,选择仓库
③ 部署设置基本不用改,直接 Deploy
④ ✅ 上线Netlify 特色功能:
- 表单处理(不需要后端就能接收表单提交)
- 函数计算(Serverless Functions)
- 分阶段部署(分支预览)
五、方案三:GitHub Pages(完全免费,无广告)
如果你不想注册新平台,直接用 GitHub 就能部署。
5.1 个人主页/项目主页
① 在 GitHub 创建一个仓库
仓库名必须叫:你的用户名.github.io
比如我的用户名是 zhangsan,仓库名就是 zhangsan.github.io
② 把你的网站文件推送到这个仓库的 main 分支
③ 等 1-2 分钟,访问 https://你的用户名.github.io
✅ 上线!5.2 项目页面
① 创建一个普通仓库(比如叫 my-tool)
② 把网站文件推送到 main 分支的根目录
③ 进入仓库 Settings → Pages
④ 在 "Branch" 选择 main,点击 Save
⑤ 访问 https://你的用户名.github.io/my-tool
✅ 上线!GitHub Pages 优势:
- 完全免费
- 不需要额外注册
- 支持自定义域名
- 没有广告
限制:
- 仓库最大 1GB
- 每月带宽 100GB
- 构建次数有限
六、方案四:自己买服务器(进阶)
如果你想自己掌控一切,可以买一台云服务器。
6.1 购买服务器
| 国内主流云服务商: | 服务商 | 最低配置 | 价格 | 适合场景 |
|---|---|---|---|---|
| 阿里云 | 2核2G | 99元/年(新用户) | 动态网站、后端服务 | |
| 腾讯云 | 2核2G | 99元/年(新用户) | 同上 | |
| 华为云 | 2核2G | 类似价格 | 同上 |
6.2 用 Nginx 部署静态网站
购买服务器后,通过 SSH 连接:
# 安装 Nginx
apt update && apt install nginx -y
# 把网站文件上传到 /var/www/html
# 可以用 scp 或 FTP 工具上传
# 重启 Nginx
systemctl restart nginx
# 现在访问 http://你的服务器IP 就能看到了6.3 用 1Panel 面板
如果你不熟悉命令行,可以用1Panel这类面板工具:
# 安装 1Panel(一条命令)
curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh -o quick_start.sh && bash quick_start.sh安装后通过浏览器访问面板,可视化操作:
- 新建网站
- 上传文件
- 申请 SSL 证书
- 绑定域名
七、域名的选择与购买
7.1 免费域名方案
| 平台 | 域名 | 说明 |
|---|---|---|
| Vercel | xxx.vercel.app | 自动分配,免费 |
| Netlify | xxx.netlify.app | 自动分配,免费 |
| GitHub Pages | xxx.github.io | 自动分配,免费 |
| Freenom(已停止) | — | 以前有免费顶级域名 |
7.2 购买自定义域名
如果你想要一个自己的名字,比如 myname.com:
| 服务商 | 价格(.com) | 特点 |
|---|---|---|
| Namesilo | 约 $9/年 | 价格透明,免费隐私保护 |
| Cloudflare | 成本价 | 不赚差价,赠送 DNS 和安全服务 |
| 阿里云/腾讯云 | 约 ¥60/年 | .cn 域名需要备案 |
| GoDaddy | 约 $12/年 | 经常有首年优惠 |
域名购买的万能规律:
.com最通用,但也最常见.net、.org也不错.cn便宜但需要备案.xyz、.top等新顶级域名很便宜(¥10 以内)
7.3 绑定域名到托管平台
通用步骤(以 Cloudflare 为例):
① 在 Cloudflare 添加你的域名
② Cloudflare 会给你两个 DNS 服务器地址
③ 在你的域名注册商那里把 DNS 改成 Cloudflare 的
④ 在 Cloudflare 添加一条 CNAME 记录:
主机记录: @
目标: xxx.vercel.app(你的托管地址)
代理状态: 开启(橙色云朵)
⑤ 等几分钟 DNS 生效
⑥ ✅ 用你的域名访问八、国内访问的重要问题:备案
如果你的目标用户在中国大陆,你必须了解这个概念。
8.1 什么是备案
备案就是向中国工信部登记你的网站信息。所有使用中国大陆服务器的网站都必须备案。
8.2 什么情况需要备案
| 服务器位置 | 是否需要备案 | 说明 |
|---|---|---|
| 国内服务器(阿里云/腾讯云等) | ✅ 必须 | 不备案就拦截 |
| 国外服务器(Vercel/Netlify/GitHub) | ❌ 不需要 | 直接访问 |
| 绑定国内域名到国外服务器 | ⚠️ 域名需备案 | 看服务商要求 |
8.3 免备案的解决方案
如果你的用户在国内,又不想备案:
方案一:用 Vercel/Netlify(国外服务器)→ 不需要备案 → 但速度可能慢
方案二:用 GitHub Pages → 不需要备案 → 国内访问可能不稳定
方案三:用国内服务器 + 备案 → 访问速度最快
方案四:用国内 CDN 加速国外源 → 折中方案个人推荐:先用 Vercel 上线,觉得 OK 再考虑国内服务器。很多人的个人网站用 Vercel 就够了。
九、快速启动指南(从零到上线 10 分钟)
如果你手上有网站文件,想最快的速度上线:
第1分钟:注册 GitHub(如果还没有)
第2分钟:注册 Vercel(用 GitHub 一键登录)
第3分钟:把网站文件推到 GitHub 仓库
第4分钟:在 Vercel 导入仓库
第5分钟:点击 Deploy
第6分钟:等待部署(喝杯水)
第7分钟:✅ 你的网站上线了!
第8分钟:把 xxx.vercel.app 链接分享给朋友如果是多页静态网站,注意以下几点:
# Vercel 的配置文件 vercel.json(放在项目根目录)
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}这个配置确保你直接访问子页面(如 /about)不会 404。
十、常见问题
Q1:我的网站是 .html 文件,不是某宝上的项目能用吗?
完全可以用。纯 HTML 是最基础的形式,Vercel、Netlify、GitHub Pages 全都原生支持。
Q2:部署后发现样式不对/图片不显示?
常见原因和解决方法:
# ① 路径问题
# 本地用 ./images/logo.png 可能没问题
# 线上应该用 /images/logo.png(绝对路径)或相对路径正确
# ② 文件名大小写
# 本地 Windows 不区分大小写,但线上 Linux 区分
# IMG.JPG 和 img.jpg 是不同文件
# ③ 资源未上传
# 检查是不是漏传了 CSS/JS/图片文件Q3:更新了代码,线上怎么没变化?
- GitHub Pages:等 1-2 分钟,或重新触发部署
- Vercel/Netlify:推送到 GitHub 会自动触发部署
- 自己服务器:需要手动覆盖文件
Q4:我的网站要后端数据库怎么办?
AI 生成的纯静态页面没有后端。如果需要数据库:
① 学一点后端(Python Flask/FastAPI、Node.js Express)
② 用云服务商的函数计算(阿里云函数计算、Vercel Serverless)
③ 用 BaaS 平台(Supabase、Firebase)
④ 购买一台云服务器,前后端一起部署Q5:上线后被人攻击怎么办?
① 用 Cloudflare CDN(免费)→ 隐藏真实 IP
② 不要用弱密码
③ 保持软件更新
④ 个人网站一般没人攻击,别太担心十一、写在最后
AI 让你在 10 分钟内写出了以前可能要学一个月的网站。但代码写完了,别让它永远留在你的电脑里。
localhost 是摇篮,不是终点站。花 10 分钟注册一个 Vercel,把你的作品发出去——给朋友看、放简历上、甚至作为个人项目留下来。这才是 AI 写代码的意义:让想法被看见。
文章里提到的所有平台和工具:
| 工具 | 用途 | 费用 |
|---|---|---|
| GitHub | 代码托管 | 免费 |
| Vercel | 网站托管(推荐) | 免费 |
| Netlify | 网站托管(备选) | 免费 |
| GitHub Pages | 网站托管(纯静态) | 免费 |
| Cloudflare | DNS + CDN + 安全 | 有免费版 |
| 1Panel | 服务器管理面板 | 免费 |
| 阿里云/腾讯云 | 云服务器 | 最低 99元/年 |
现在就去把你的网站上线吧。🚀