Hugo 自动化部署实战-部署 Hugo 到 Vercel

最新推荐文章于 2025-09-14 07:36:21 发布

原创

最新推荐文章于 2025-09-14 07:36:21 发布 · 909 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#自动化 #运维 #独立站 #人工智能 #AI工具

欢迎来到 Hugo 自动化部署实战系列教程！在本系列中，我们将逐步探索如何使用 GitHub Actions 将你的 Hugo 静态网站自动化部署到各种流行的托管平台。

本篇作为系列的第一部分，将详细指导你如何设置 GitHub Actions 工作流，以自动化构建你的 Hugo 站点并将其部署到 Vercel。我们将特别关注一种安全且易于管理的凭据管理方式——通过一个集中的 JSON 格式的 GitHub Secret。

后续教程将涵盖部署到 GitHub Pages, Netlify, Cloudflare Pages, 和 Firebase Hosting。

概述：Vercel 部署流程

对于 Vercel 部署，我们将遵循以下主要步骤：

前置准备: 确保你拥有必要的账户和工具。
项目设置: 确认你的 Hugo 项目结构。
Vercel 配置: 设置 Vercel 项目并获取部署所需的凭据。
GitHub Secrets 配置: 安全地存储 Vercel 凭据在一个集中的 JSON 对象中。
创建 GitHub Actions 工作流: 定义自动化构建和部署到 Vercel 的流程。
提交、测试和验证: 触发部署并检查结果。

1. 前置准备

在开始之前，请确保你已准备好以下各项：

1.1. GitHub 账户和仓库: 你的 Hugo 项目代码应托管在 GitHub 仓库中。
1.2. Vercel 账户: 你需要一个 Vercel 账户 (vercel.com) 来托管你的静态站点。
1.3. Node.js 和 npm/yarn: Vercel CLI 是一个 Node.js 包，它将在 GitHub Actions 环境中被用于部署。本地安装 Node.js (nodejs.org) 也有助于进行一些本地 CLI 操作。
1.4. Hugo 安装 (本地): 在本地安装 Hugo (gohugo.io/installation)，以便能够本地开发和测试你的站点。如果你的主题或内容使用了 SASS/SCSS，请确保安装 Hugo 的 extended 版本。

2. 项目设置 (你的 Hugo 站点)

本教程假设你已经有一个正在运行的 Hugo 项目。

2.1. Hugo 项目初始化: 如果你从头开始，可以使用 hugo new site <site-name>。
2.2. 主题集成: 确保你的 Hugo 主题已正确安装和配置在你的项目中。

在本地运行 hugo server，确认你的 Hugo 站点能够正常构建和预览。

3. Vercel 配置

我们需要在 Vercel 上设置一个项目来接收我们的部署，并获取部署所需的 API 凭据。

3.1. 创建或选择 Vercel 项目

登录到你的 Vercel 账户。
点击仪表板上的 “Add New…” -> “Project”。
选择 “Continue with Git Repository”，然后从列表中选择你的 Hugo 项目所在的 GitHub 仓库。
Vercel 可能会尝试自动检测框架并配置构建设置。你可以暂时接受默认设置，因为我们稍后会在 Vercel 项目设置中禁用其自动构建，以便让 GitHub Actions 完全控制。
完成项目的导入。

3.2. 获取 Vercel API Token, Project ID, 和 Org ID

这些凭据对于 GitHub Actions 以编程方式与 Vercel API 交互至关重要。

VERCEL_TOKEN (Access Token):
1. 在 Vercel Dashboard，点击右上角你的头像，然后选择 “Settings”。
2. 在左侧导航栏中，选择 “Tokens”。
3. 点击 “Create” 按钮。
4. 为你的 Token 指定一个描述性名称，例如 GitHub Actions - Hugo Vercel Deploy。
5. 选择 Token 的范围 (Scope)。通常，这会是你的个人账户或你希望部署到的特定 Vercel Team。
6. （可选但推荐）设置一个过期日期。
7. 点击 “Create Token”。重要：立即复制生成的 Token 值。它只显示一次。请将其安全保存，稍后会用到。
VERCEL_ORG_ID 和 VERCEL_PROJECT_ID (推荐使用 Vercel CLI):
使用 Vercel CLI 是获取与特定项目关联的 orgId 和 projectId 的最可靠方法。
1. 安装 Vercel CLI (如果尚未安装):
```
npm install -g vercel
```
2. 登录 Vercel CLI: 在你的终端运行：
```
vercel login
```
  按照提示在浏览器中完成授权。
3. 链接本地项目到 Vercel 项目: 在你的本地 Hugo 项目的根目录下，运行：
```
cd path/to/your/hugo-site # 替换为你的项目路径
vercel link
```
  CLI 将引导你：
  - 确认设置当前目录。
  - 选择你的 Vercel scope (这将是你的 orgId 所属的个人账户或团队)。
  - 选择链接到你在 Vercel UI 上为该 Hugo 项目创建的现有项目（或让 CLI 为你创建一个新项目）。
4. 查看生成的配置: 成功链接后，Vercel CLI 会在你的项目根目录下创建 .vercel/project.json 文件。打开此文件，其内容将类似：
```
{
       
       
  "orgId": "team_xxxxxxxxxxxxxxxxx"
```

最低0.47元/天解锁文章