Hexo 博客部署到 Vercel 完整教程

Posted on In Word count in article: 1.6k Reading time ≈ 6 mins.
从零开始，手把手教你将 Hexo 博客免费部署到 Vercel，包含域名绑定、DNS 配置、HTTPS 证书等完整流程。

Hexo 博客部署到 Vercel 完整教程

📝 本文基于实战经验，记录了将 Hexo 博客从零部署到 Vercel 的完整过程，包含所有可能遇到的问题和解决方案。

📋 目录

为什么选择 Vercel

Vercel 的优势

特性 说明
🆓 免费 个人使用完全免费，无隐藏费用
🚀 快速 全球 CDN 加速，自动优化
🔒 HTTPS 自动签发 SSL 证书，无需手动配置
🔄 自动部署 推送到 GitHub 自动构建部署
📊 数据分析 提供访问统计和性能分析
🌍 全球可用 边缘网络覆盖全球

与其他平台对比

平台 费用 国内访问 自动部署 HTTPS
Vercel 免费 ⭐⭐⭐ ✅ ✅
GitHub Pages 免费 ⭐⭐ ✅ ✅
阿里云 OSS 付费 ⭐⭐⭐⭐⭐ ❌ ✅
腾讯云 COS 付费 ⭐⭐⭐⭐⭐ ❌ ✅

部署前准备

必需条件

可选条件

  • 📝 自定义域名（如 yourdomain.com）
  • 💳 域名购买账户（阿里云/腾讯云等）

步骤一：创建 GitHub 仓库

1.1 创建新仓库

  1. 登录 GitHub：https://github.com
  2. 点击右上角 + → New repository
  3. 填写仓库信息：
1
2
3
4
Repository name: your-blog-name
Description: 我的 Hexo 技术博客
Visibility: Private（推荐）或 Public
☐ Initialize this repository with a README（不勾选）
  1. 点击 Create repository

1.2 配置本地 Git

在你的 Hexo 博客根目录执行：

1
2
3
4
5
6
7
8
9
10
11
12
# 初始化 Git（如果还没有）
git init

# 添加所有文件
git add .

# 创建 .gitignore（如果还没有）
# 确保包含以下内容：
node_modules/
public/
*.log
.DS_Store

1.3 处理大文件

⚠️ 重要：GitHub 有 100MB 单文件限制，需要移除大文件（如音乐、视频）：

1
2
3
4
5
6
7
8
9
10
# 查看大文件
git ls-files | grep -E "\.(flac|mp4|zip)$"

# 从 Git 历史中移除大文件
git rm --cached path/to/large-file.flac

# 更新 .gitignore，忽略大文件类型
echo "*.flac" >> .gitignore
echo "*.mp4" >> .gitignore
echo "*.ncm" >> .gitignore

1.4 提交并推送

1
2
3
4
5
6
7
8
# 提交
git commit -m "Initial commit: Hexo blog setup"

# 添加远程仓库（替换为你的仓库地址）
git remote add origin https://github.com/yourusername/your-repo.git

# 推送到 GitHub
git push -u origin main

步骤二：创建 Vercel 配置文件

2.1 创建 vercel.json

在博客根目录创建 vercel.json：

1
2
3
4
5
6
7
8
{
  "version": 2,
  "buildCommand": "npm run build",
  "outputDirectory": "public",
  "devCommand": "npm run dev",
  "installCommand": "npm install",
  "framework": null
}

2.2 提交配置

1
2
3
git add vercel.json
git commit -m "Add Vercel configuration"
git push origin main

步骤三：配置 Vercel

3.1 导入项目

  1. 登录 Vercel：https://vercel.com/dashboard
  2. 点击 Add New… → Project
  3. 在 “Import Git Repository” 页面找到你的仓库
  4. 点击 Import

3.2 配置构建设置

在 “Configure Project” 页面：

设置项 值 说明
Framework Preset Other Hexo 不是内置框架
Root Directory ./ 默认
Build Command npm run build 从 vercel.json 读取
Output Directory public 从 vercel.json 读取
Install Command npm install 从 vercel.json 读取

3.3 点击 Deploy

点击 Deploy 按钮，等待 2-5 分钟构建完成。

3.4 验证部署

部署成功后，你会看到：

  • ✅ 绿色成功提示
  • 🌐 预览链接：https://your-project.vercel.app

点击链接访问你的博客！

步骤四：绑定自定义域名

4.1 在 Vercel 添加域名

  1. Vercel Dashboard → 你的项目 → Settings → Domains
  2. 输入你的域名（如 yourdomain.com）
  3. 点击 Add

4.2 配置 DNS（以阿里云为例）

登录阿里云控制台 → 域名解析 → 添加记录：

记录 1：A 记录（主域名）

配置项 值
记录类型 A
主机记录 @
记录值 216.198.79.1
TTL 10 分钟

记录 2：CNAME 记录（www 子域名）

配置项 值
记录类型 CNAME
主机记录 www
记录值 cname.vercel-dns.com
TTL 10 分钟

4.3 等待 DNS 生效

  • ⏱️ 通常 5-30 分钟 生效
  • 🌍 全球 DNS 传播可能需要 24 小时

4.4 验证域名

在 Vercel 的 Domains 页面查看状态：

  • ⏳ “Configuring” → 正在验证
  • ✅ “Ready” → 验证成功

常见问题解决

❌ 问题 1：推送时提示大文件超限

错误信息：

1
remote: error: File xxx is 150.00 MB; this exceeds GitHub's file size limit of 100.00 MB

解决方案：

1
2
3
4
5
6
7
8
9
10
11
# 1. 从 Git 历史中彻底移除大文件
git filter-branch --force --index-filter \
  "git rm --cached --ignore-unmatch path/to/large-file" \
  --prune-empty --tag-name-filter cat -- --all

# 2. 清理 Git 缓存
git reflog expire --expire=now --all
git gc --prune=now --aggressive

# 3. 强制推送
git push origin main --force

❌ 问题 2：Vercel 部署失败

可能原因：

  • 构建命令错误
  • 依赖安装失败
  • 输出目录不正确

解决方案：

  1. 检查 package.json 中的构建命令：
1
2
3
4
5
{
  "scripts": {
    "build": "hexo generate"
  }
}

  1. 查看 Vercel 构建日志：

    • Dashboard → 项目 → Deployments → 点击失败部署 → View Build Logs

  2. 本地测试构建：

1
2
npm run build
# 检查 public 目录是否生成

❌ 问题 3：域名配置后无法访问

可能原因：

  • DNS 未生效
  • Vercel 验证未完成
  • HTTPS 证书签发中

解决方案：

  1. 检查 DNS 是否生效：
1
2
nslookup yourdomain.com
# 应该返回 Vercel 的 IP：216.198.79.1

  1. 在 Vercel 刷新域名状态页面

  2. 等待 10-15 分钟，Vercel 会自动签发 HTTPS 证书

❌ 问题 4：国内访问慢

解决方案：

  1. 使用自定义域名（比 vercel.app 域名稳定）

  2. 考虑备案（如果长期在国内使用）

  3. 使用 CDN 加速（需要备案）

自动部署工作流

配置完成后，每次更新博客只需：

1
2
3
4
5
6
7
8
9
10
11
12
# 1. 写新文章
hexo new post "我的新文章"

# 2. 编辑文章
# 在 source/_posts/ 中编辑 Markdown 文件

# 3. 生成并推送
git add .
git commit -m "新文章：我的新文章"
git push origin main

# 4. 等待 Vercel 自动部署（约 2-3 分钟）

Vercel 会自动：

  1. 检测 GitHub 推送
  2. 安装依赖
  3. 运行构建命令
  4. 部署到全球 CDN
  5. 更新你的域名

总结

✅ 完成检查清单

  • GitHub 仓库创建并推送代码
  • Vercel 项目导入并配置
  • 自定义域名绑定（可选）
  • DNS 配置完成
  • HTTPS 证书自动签发
  • 博客可正常访问

📊 部署时间线

步骤 耗时
创建 GitHub 仓库 2 分钟
推送代码 5 分钟
Vercel 配置 3 分钟
首次部署 3-5 分钟
域名绑定 5 分钟
DNS 生效 5-30 分钟
总计 约 30-60 分钟

💡 小贴士

  1. 私有仓库：GitHub 私有仓库也可以部署到 Vercel
  2. 环境变量：在 Vercel Settings → Environment Variables 配置
  3. 预览部署：每次 PR 都会生成预览链接
  4. 回滚：可以随时回滚到之前的部署版本

参考资源

🎉 恭喜！ 现在你的 Hexo 博客已经完全部署到 Vercel，可以开始写作了！

本文最后更新： 2026-03-24
作者： UE Developer Blog