Vercel部署Hugo站点

1 背景

由于国内访问 GitHub Pages 速度较慢，而 Vercel 在国内的访问速度表现更好，因此选择使用 Vercel 来部署 Hugo 站点，实现快速、免费且自动部署的博客/文档站点。

2 部署步骤

2.1 （推荐）指定Hugo 版本

在 Hugo 项目根目录下创建或修改 vercel.json 文件，推荐显式指定 Hugo 版本，避免默认版本过旧或不兼容：

{
  "build": {
    "env": {
      "HUGO_VERSION": "0.155.3"
      // 或使用最新版："HUGO_VERSION": "latest"
    }
  }
}

• 版本号建议与 Hugo GitHub Releases 保持一致
• 使用 "latest" 会自动使用当前最新稳定版（不含 extended 版特殊需求时推荐）

更多说明可参考：

• Vercel 环境变量文档
• Vercel Hugo 部署经验分享

2.2 登录 Vercel

使用 GitHub 账号登录 Vercel 控制台（推荐 GitHub 登录，权限管理更方便）。

2.3 创建新项目

1. 点击右上角 Add New… → Project

2. 在 Import Git Repository 区域，选择要部署的 Hugo 仓库

3. 点击 Import

2.4 配置与部署

在配置页面：

• Application Preset（框架预设）：确认是否已自动选择为 Hugo。如果没有，请手动从下拉菜单中选择。

• Root Directory 确认是否正确（通常为 ./）

• Build and Output Settings（构建和输出设置）：
  • Build Command：保持默认的 hugo --gc --minify 即可（这会让 Vercel 生成并压缩你的站点）。
  • Output Directory：保持默认的 public。
  • Install Command：留空即可，Hugo 不需要像 Node.js 那样安装依赖。

• 点击 Deploy 按钮。

Vercel 会自动克隆仓库 → 安装 Hugo → 执行 hugo --minify → 部署。

2.5 部署成功

部署完成后显示如下页面，包含临时分配的 .vercel.app 域名，点击域名即可访问站点：

2.6 绑定自定义域名（可选但推荐）

1. 项目页面 → Domains → Add Domain

2. 输入域名（例如 blog.example.com）

3. Vercel 会提示你需要添加的 DNS 记录，通常为：

   • 类型：CNAME

   • 主机记录：blog（或 @）

   • 记录值：cname.vercel-dns.com（Vercel 会显示具体值）

   • （阿里云 / DNSPod 等控制台）添加解析示例：

4. DNS 生效后，回到 Vercel 域名列表，状态会变为 Valid Configuration

2.7 访问站点

使用自定义域名访问：

3 常见问题

• 构建失败，提示 Hugo 版本过旧？
  → 明确在 vercel.json 中指定较新版本（如 0.120+ 或 latest）

• 图片/资源 404？
  → 确认 hugo 命令是否正确生成了 public/ 目录，主题的 static/ 文件夹是否放置正确

• 想使用 Hugo extended 版本？
  → 目前 Vercel 默认提供 extended 版本，无需额外配置（0.81.0 之后基本都是 extended）

4 总结

通过以上步骤，你可以实现：

• GitHub 提交 → Vercel 自动构建 & 部署
• 国内访问速度快
• 免费自定义域名

祝部署顺利～

5 更新记录

• 2026-02-14 更新Hugo版本、补充新流程与截图。
• 2026-03-02 更新截图。