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

最新推荐文章于 2025-07-10 23:12:12 发布

原创

最新推荐文章于 2025-07-10 23:12:12 发布 · 923 阅读

CC 4.0 BY-SA版权

文章标签：

该文章已生成可运行项目，

本文将详细指导你如何设置 GitHub Actions，以实现 Hugo 静态网站的自动化构建，并将其部署到 Netlify。我们将采用一种安全且易于管理的方式，通过一个集中的、以 JSON 格式存储的 GitHub Secret 来管理 Netlify 的部署凭据。

我们将通过以下步骤完成部署流程的搭建：

开始之前，请确保你已具备：

GitHub 账户及仓库: 你的 Hugo 项目代码应托管在 GitHub 上。
Netlify 账户: 用于托管你的静态站点 (netlify.com)。
Node.js 和 npm/yarn: Netlify CLI (将在 GitHub Actions 中使用) 是一个 Node.js 包。建议本地也安装 Node.js (nodejs.org)。
Hugo (本地安装): 用于本地开发、构建和测试你的 Hugo 站点 (gohugo.io/installation)。如果你的主题或内容使用 SASS/SCSS, 请确保安装 Hugo 的 extended 版本。

在我们可以通过 GitHub Actions 部署之前，需要在 Netlify 上进行一些设置。

登录 Netlify: 访问 app.netlify.com。
导入项目创建站点:
- 从你的团队仪表板，点击 “Add new site” -> “Import an existing project”。
- 选择 “GitHub” 作为你的 Git 提供商。
- 授权 Netlify 访问你的 GitHub 账户并选择你的 Hugo 项目仓库。
配置初始构建设置 (稍后将由 Actions 控制):
- Netlify 可能会尝试自动检测项目类型。
- 对于 “Build command” 和 “Publish directory”，你可以暂时接受其建议 (例如 hugo 和 public) 或留空。
- 点击 “Deploy site”。Netlify 可能会进行一次初始部署。
关键步骤：禁用 Netlify 的自动构建: 由于我们将使用 GitHub Actions 进行构建和部署，我们需要阻止 Netlify 在每次 Git 推送时自动构建。
- 导航到你新创建的 Netlify 站点。
- 进入 “Site configuration” (或 “Site settings”) -> “Build & deploy”。
- 在 “Continuous Deployment” -> “Builds” 部分，点击 “Edit settings” 并选择 “Stop builds”。
- 保存更改。这将确保只有我们的 GitHub Action 会触发部署。

为了让 GitHub Actions 能够代表你部署到 Netlify，你需要两项凭据：

A. Netlify 个人访问令牌 (Personal Access Token - PAT):
1. 在 Netlify UI 中，点击右上角你的用户头像，然后选择 “User settings”。
2. 在左侧导航栏中，选择 “Applications”。
3. 向下滚动到 “Personal access tokens” 部分，点击 “New access token”。
4. 为该 Token 提供一个描述性的名称，例如 GitHub Actions Hugo Deployer。
5. 点击 “Generate token”。
6. 立即复制生成的 Token。它只显示一次。请将其安全保存，稍后将添加到 GitHub Secrets。
B. Netlify 站点 ID (API ID):
此 ID 唯一标识了你在 Netlify 上的目标部署站点。
1. 导航到你在 Netlify 上的目标 Hugo 站点。
2. 进入站点的 “Site configuration” (或 “Site settings”)。
3. 在 “Site details” (或 “General” -> “Site details”) 部分，找到并复制 “API ID” 的值。