零成本上线！用 Vercel 5 分钟部署你的第一个静态站点
（含动图演示，新手友好）
关键词：Vercel、静态站点、免费托管、GitHub Pages 替代品、零配置
1️⃣ 背景：为什么选 Vercel？
| 需求 | 传统方案 | Vercel 方案 |
|---|---|---|
| 免服务器 | 需买云主机 | ✅ 完全免费 |
| 全球 CDN | 需额外配置 | ✅ 全球边缘节点自动加速 |
| HTTPS | 需自己申请证书 | ✅ 自动颁发 Let’s Encrypt |
| 自定义域名 | 需手动解析 | ✅ 一键绑定 |
| CI/CD | 需写脚本 | ✅ Git Push 即部署 |
2️⃣ 你能在 Vercel 放什么？
- 纯 HTML / CSS / JS 作品集
- 基于 Vite、Parcel、Webpack 构建的前端项目
- Astro、Next.js、Nuxt、SvelteKit 的「静态导出」产物
- Hexo / Hugo / Jekyll / Docusaurus / VitePress 等静态博客
- 任何最终只产出
.html、.css、.js和静态资源的仓库
只要
npm run build之后生成的是纯静态文件，就适合。
3️⃣ 5 分钟实战：从 0 到上线
3.1 准备工作
- 一个 GitHub 账号（如无，点此注册）
- 一个包含静态文件的仓库（示例仓库：vercel-demo）
没有现成仓库？直接 Fork 上面的官方示例即可。
3.2 Fork 示例仓库（动图）
3.3 注册并连接 GitHub
- 打开 vercel.com/signup
- 选择 Continue with GitHub → 授权登录
3.4 一键导入并部署
- 点击 New Project
- 在列表中找到刚才 Fork 的仓库 → Import
- 保持默认配置（Build & Output Settings 为空即可，Vercel 会自动识别）
- 点击 Deploy 按钮
3.5 首次部署成功！
等待 30 秒左右，你会看到绿色 ✅
官方会生成一个形如 https://your-project-xxx.vercel.app 的域名，直接点开即可预览。
4️⃣ 进阶玩法
4.1 绑定自定义域名（免费）
- 进入项目 Dashboard → Settings → Domains
- 输入你的域名（如
blog.example.com）→ Add - 按提示在 DNS 解析一条 CNAME 记录到
cname.vercel-dns.com
4.2 自动更新：Push = 部署
以后每次 git push，Vercel 会自动触发 CI/CD，30 秒内更新线上网站，无需任何额外操作。
4.3 环境变量 & 构建命令
如果你的项目需要：
| 场景 | 做法 |
|---|---|
| 修改构建目录 | Settings → Build & Development Settings → Output Directory |
| 注入环境变量 | Settings → Environment Variables |
| 使用 Node 18 | Settings → General → Node.js Version |
5️⃣ 常见问题 FAQ
| 问题 | 解答 |
|---|---|
| 免费额度够吗？ | 每月 100 GB 流量 + 100 GB 带宽，个人博客完全够用 |
| 支持私有仓库吗？ | 免费版仅支持公开仓库，Pro 才支持私有 |
| 国内访问速度？ | 有香港节点，电信/联通速度尚可；移动略慢 |
| 可以放视频吗？ | 可以，但大文件建议放 OSS / CDN，再外链引用 |
6️⃣ 延伸阅读
- 官方文档：vercel.com/docs
- 部署 Hugo 博客：Hugo + Vercel 指南
- 部署 VitePress 文档：VitePress Deploy on Vercel
7️⃣ 一键复制仓库（可选）
想直接体验？Fork 这个极简示例：
https://github.com/vercel/vercel/tree/main/examples/static
8️⃣ 总结
| 步骤 | 耗时 |
|---|---|
| Fork 仓库 | 10 秒 |
| 连接 GitHub | 10 秒 |
| 一键 Deploy | 30 秒 |
| 绑定域名 | 2 分钟 |
| 总计 | < 5 分钟 |
从此告别服务器费用，专注内容创作 ✨
如果本文帮到了你，欢迎点个 ⭐ Star 支持！
也欢迎在评论区晒出你的域名，一起交流～