Vercel部署

Vercel 部署

Vercel 是一个现代化的前端部署平台，支持自动部署、预览分支、自定义域名等，比 GitHub Pages 更强大。

为什么选择 Vercel

• ✅ 免费额度充足（个人博客完全够用）
• ✅ 全球 CDN 加速
• ✅ 自动 HTTPS
• ✅ 支持自定义域名
• ✅ 每次推送自动部署
• ✅ 预览部署（PR 预览）

准备工作

1. 一个 GitHub 账号
2. 博客代码已推送到 GitHub 仓库

注册 Vercel

1. 访问 vercel.com
2. 点击 Sign Up
3. 选择 Continue with GitHub 使用 GitHub 账号登录

导入项目

1. 登录 Vercel 后，点击 Add New… → Project
2. 选择你的博客仓库，点击 Import
3. 配置项目：
   • Framework Preset：选择 Hexo
   • Build Command：hexo generate
   • Output Directory：public
   • Install Command：npm install
4. 点击 Deploy

配置文件

在博客根目录创建 vercel.json（可选）：

1
2
3
4
5

{
  "buildCommand": "hexo generate",
  "outputDirectory": "public",
  "installCommand": "npm install"
}

自动部署

配置完成后，每次向 GitHub 仓库推送代码，Vercel 都会自动部署：

1
2
3
4
5
6

# 本地修改并提交
git add .
git commit -m "new post: my article"
git push origin main

# Vercel 会自动检测到推送并开始部署

自定义域名

1. 在 Vercel 项目 Settings → Domains
2. 添加你的域名，例如 blog.example.com
3. 按照提示配置 DNS：
   • 添加 CNAME 记录：blog.example.com → cname.vercel-dns.com
4. 等待 DNS 生效（通常几分钟）

Vercel 会自动为你的域名配置 HTTPS 证书。

预览部署

Vercel 会为每个分支和 PR 创建预览部署：

• 推送到 main 分支 → 生产环境
• 推送到其他分支 → 预览环境
• 创建 PR → PR 预览

环境变量

如果需要配置环境变量：

1. 项目 Settings → Environment Variables
2. 添加变量名和值
3. 选择生效环境（Production / Preview / Development）

常见问题

部署失败

检查构建日志，常见原因：

• 依赖安装失败：检查 package.json
• 构建命令错误：确认 hexo generate 能在本地正常执行
• Node.js 版本不兼容：在 Settings 中指定 Node.js 版本

页面空白

检查 _config.yml 中的 url 配置：

1

url: https://your-domain.vercel.app

自定义域名 HTTPS 问题

Vercel 会自动配置 HTTPS，如果遇到问题：

• 确认 DNS 配置正确
• 等待几分钟让证书签发
• 在 Vercel 项目 Settings → Domains 中检查状态

💡 提示：Vercel 免费版支持无限静态站点，带宽 100GB/月，对于个人博客完全够用。