Improve this page

在 GitHub Actions 上自动部署 Jekyll

GitHub Pages 默认使用 Jekyll 构建站点时，为了提高安全性和简化设置，GitHub做了一些处理，标准流程受到了一些限制。如果想用 GitHub Pages 来托管你的 Jekyll 网站又需要更多的控制权，你可以使用 GitHub Actions。

使用 Actions 的优势Permalink

控制 gemsetPermalink

  • Jekyll 版本 — 你可以使用任何版本的 Jekyll，并非只能使用 GitHub Pages 默认提供的经典版本 3.9.3。例如，可以使用 4.3.3，或者直接指向 Jekyll 的仓库。
  • 插件 — 你可以使用任何 Jekyll 插件，不用担心想要的插件是否包含在GitHub Pages 支持的版本列表中，甚至可以使用放在站点 _plugins 目录中的 *.rb 文件。
  • 主题 — 虽然不使用 Actions 可以使用自定义主题，但有了 Actions，这个过程会变得更加简单。

工作流管理Permalink

  • 自定义 — 你可以创建一个工作流文件来运行 Actions，指定要使用的环境变量，自定义的构建步骤。
  • 构建日志 — 可以查看构建记录的日志，你可以将其设置为详细模式，这样调试错误会更容易。

Workspace 设置Permalink

首先需要一个托管在 GitHub 上的 Jekyll 项目。

选择一个现有的 Jekyll 项目，或者按照快速入门指南创建一个新的项目，并将其推送到 GitHub。

接下来，我们将使用一个简单的 Jekyll 站点，该站点最初只包含一个 _config.yml 文件、一个 index.md 页面和一个 Gemfile。文件内容分别如下：

# _config.yml

title: "Jekyll Actions 演示"

---
---

欢迎来到我的主页

{% assign date = '2024-06-20T10:20:00Z' %}

- 原始日期 - {{ date }}
- 使用 timeago filter（过滤器） - {{ date | timeago }}

# Gemfile

source 'https://rubygems.org'

gem "jekyll", "~> 4.2"

group :jekyll_plugins do
  gem "jekyll-timeago", "~> 0.13.1"
end

演示站点使用 Jekyll 4 和一个第三方插件 jekyll-timeago，这两者目前都未被 GitHub Pages 白名单列入使用。 该插件允许我们描述一个日期距离今天有多远。 例如，如果给定日期是 2020-03-23T10:20:00Z，当前日期是 2024-04-13T10:20:00Z，则输出会是 4 years and 3 weeks ago（4 年零 3 周前）。

我们使用的 Action 会负责安装 Ruby gems 和依赖项。这让设置变得简单，但如果你同时提交了 Gemfile.lock 文件，而它是用旧版本的 Bundler 生成的，可能会遇到问题。

设置 ActionPermalink

  1. 打开你的仓库的 Settings 标签。
    1. 在 Code and automation 下点击 Pages。
    2. 在 Build and deployment 下将 Source 从 Deploy from a branch 改为 GitHub Actions。
  2. 打开你的仓库的 Actions 标签。
    1. 开始一个 New workflow，搜索 Jekyll。
    2. 在 Jekyll 工作流下点击 Configure（不是 GitHub Pages Jekyll 工作流）。
    3. 检查更改并点击 Commit changes。

构建和部署Permalink

每次将本地的更改推送到 git 默认分支时，Action 就会被触发并开始构建你的站点。

要查看进度和任何构建错误，可以通过以下方法检查构建状态：

  • 通过提交查看（View by commit）
    • 在 GitHub 中查看仓库级别视图（repository level view）。在最新的提交（recent commit）旁（顶部附近），你会看到一个状态符号（√或 X）在提交消息旁边。悬停在它上面并点击 details 链接。
  • Actions 标签（Actions tab）
    • 打开仓库的 Actions 标签，点击 jekyll 工作流（workflow）标签。

如果一切顺利，所有步骤都会变成绿色，构建的资源将上传到 GitHub Pages。

要查看 实时站点（live site），请打开仓库的 Deployments 标签，点击部署站点的 URL。

当你需要对站点进行进一步 更改（changes） 时，提交到默认分支并推送。工作流将再次构建和部署你的站点。