将 Hexo 博客部署到 Vercel

本文介绍如何将 Hexo 博客部署到 Vercel，实现本地 Git 提交后自动构建部署。完成配置后，每次写完文章或修改代码，只需一次 git push，即可在 1 分钟内看到线上效果，非常高效。

1. 登录 Vercel 并绑定 Git 账号

官网地址：Vercel 官网

打开官网后，建议直接使用 GitHub 账号登录，这样后续导入项目时无需再额外绑定。

image.webp

2. 导入项目并部署

2.1 选择项目

点击右上角 Add New… 并选择 Project，在列表中选择要部署的 GitHub 仓库。如果尚未绑定 GitHub 账号，需要先完成授权，然后点击 Import 导入项目。

选择要部署的项目

2.2 配置构建

Vercel 提供了多种框架的预设模板，这里选择 Hexo，它会自动填充默认的构建配置。点击 Build and Output Settings 可以查看预设命令，也可按需修改。后续还可以通过项目根目录的 vercel.json 文件自定义部署指令（后文会详细介绍）。

部署

2.3 验证部署结果

部署成功后会进入项目控制面板，包含域名设置、环境变量、流量监控等功能入口。点击 Domains 下方的域名即可访问你的站点。

如果部署过程中出现错误，点击 Deployments 标签页可以查看每次部署的详细日志，方便排查问题。

控制面板

3. 配置自定义域名

为什么需要自定义域名？

  1. 提升访问体验与品牌形象：自定义域名更正规、更易记忆。一串无规律的默认域名容易让访客产生不信任感。
  2. 灵活的资源管理：通过 DNS 解析可以自由配置域名指向，还能添加子域名前缀，用一个域名管理多个站点。
  3. 安全保障：域名提供商通常会提供额外的安全服务，例如阿里云的容灾切换、防火墙、链路监控等。

我的域名是在阿里云购买的，后续 ICP 备案等操作可以一站式完成。下面以阿里云为例进行说明，Cloudflare 的操作流程大同小异。

3.1 购买域名

注意：在阿里云等国内平台购买域名后，必须完成实名认证才能使用 DNS 解析服务。认证审核通常在 1 天内完成。

image.webp

3.2 配置 DNS 解析

DNS 解析是将域名转换为 IP 地址的过程，类似于互联网的”电话簿”——域名是人名，IP 地址是电话号码，DNS 负责完成查询和映射。

image.webp

DNS 解析涉及三个核心参数：

参数 作用 常见填写示例
记录类型 决定域名指向的目标类型 A 记录：指向 IPv4 地址
CNAME：指向另一个域名
MX：邮箱解析
主机记录 决定域名的前缀，即解析哪个子域名 www：解析 www.example.com
@：直接解析主域名 example.com
*：泛解析，匹配所有子域名
记录值 最终指向的目标地址，格式随记录类型而定 A 记录填 IP（如 192.0.2.1）
CNAME 填域名（如 example.com）

具体配置步骤：

  1. 回到 Vercel 控制面板，打开 Domains，点击添加域名并填入你的域名（建议不勾选添加 WWW 域名的选项）。
  2. Vercel 会显示需要设置的 DNS 记录，只需将 A 记录那条在阿里云上对应配置即可，记录值填写 Vercel 提供的 IP 地址。

image.webp

  1. 配置完成后大约等待 1 分钟，Vercel 会提示解析成功，此时即可通过自定义域名访问站点。

4. 自定义部署配置

前文提到可以通过 vercel.json 自定义部署命令，这样做的好处是：配置完成后基本不需要再登录 Vercel 网站，后续部署命令的修改也只需提交代码即可生效，操作逻辑简洁高效。

一个典型的应用场景是集成 Algolia 站内搜索——部署时需要执行 hexo algolia 命令来上传文章索引，否则搜索数据不会更新。此时可以修改 package.json 中的构建脚本，将 Algolia 命令集成进去，实现一体化构建。

vercel.json 配置示例：

1
2
3
4
5
6
{
  "buildCommand": "pnpm build",
  "outputDirectory": "public",
  "installCommand": "npm install -g pnpm && pnpm install",
  "framework": null
}

package.json 构建脚本：

1
2
3
4
5
{
  "scripts": {
    "build": "hexo clean && hexo generate && hexo algolia"
  }
}

这样每次 Vercel 构建时会自动执行 pnpm build，依次完成清理缓存、生成静态文件、上传 Algolia 索引三个步骤，无需手动干预。