利用 GitHub Actions 实现自动化部署 Hexo 到 Github Pages

利用 GitHub Actions 实现自动化部署 Hexo 到 Github Pages

创建 Github 仓库

我在 GitHub 建好两个仓库，为什么是两个？一个仓库也是可以的，直接参考Hexo 官方部署方案，流程简单很多。

两个仓库目的

1. 希望博客源码仓库私有化
2. Github Pages 仓库分开管理
  • Hexo 项目仓库
  • username.github.io 仓库
    • username 为 github 的账号名字。其他命名也是可以的，只是访问路径会变成 username.github.io/<仓库名>

创建个人访问令牌（Personal Access Token）

因为我们需要在 Hexo 项目仓库 执行 Github Actions 向 username.github.io 仓库推送代码，由于 Github 权限限制，我们需要在 GitHub 账户中创建一个具有足够权限的个人访问令牌（Personal Access Token，简称 PAT）。这个令牌需要有足够的权限来修改仓库。

创建 Github Actions 脚本

在你的 Hexo 项目根目录下创建一个 .github/workflows 文件夹（如果尚未存在）。

在该文件夹内创建一个新的 YAML 文件（例如 hexo-deploy.yml），定义 GitHub Actions 工作流, 每次推送代码到master分支,它将自动生成静态页面代码推送到 username.github.io 仓库 master 分支 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

name: 部署 Hexo 到 GitHub Pages

on:
  push:
    branches:
      - master # 或你使用的默认分支名称

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: 检出博客源代码
        uses: actions/checkout@v2
        with:
          path: blog

      - name: 设置 Node.js
        uses: actions/setup-node@v3
        with:
          node-version: "18" # 设置 Node.js 版本

      - name: 缓存依赖
        uses: actions/cache@v3
        with:
          path: node_modules
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: 安装依赖
        run: npm install
        working-directory: ./blog

      - name: 安装 Hexo CLI
        run: npm install -g hexo-cli
        working-directory: ./blog

      - name: 生成静态页面
        run: hexo generate
        working-directory: ./blog

      - name: 部署到 GitHub Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          personal_token: ${{ secrets.PERSONAL_TOKEN }}
          exclude_assets: false # false 不过滤文件 默认过滤.github 等文件
          cname: home.34462958.xyz # 配置 cname 文件
          publish_dir: ./blog/public
          external_repository: username/username.github.io # 更改为你的 GitHub Pages 仓库, username 是你的用户名
          publish_branch: master # 推送 GitHub Pages 分支

在你的 Hexo 项目source目录下创建一个 .github/workflows 文件夹（如果尚未存在）。

在该文件夹内创建一个新的 YAML 流程配置文件（例如 deploy-pages.yml），定义 GitHub Actions 工作流, 收到推送到 master 代码后将静态页面部署到 GitHub Pages

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43



# Simple workflow for deploying static content to GitHub Pages
name: Deploy to Pages

on:
  push:
    branches: ["master"]
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: 检出仓库代码
        uses: actions/checkout@v4

      - name: 设置 GitHub Pages 配置
        uses: actions/configure-pages@v5

      - name: 将整个仓库作为工件上传
        uses: actions/upload-pages-artifact@v3
        with:
          path: '.'
      - name: 部署到 GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4


Hexo配置文件 修改

_config.yml 配置文件参数 skip_render 和 include 忽略上面source目录下的流程配置文件（例如 deploy-pages.yml）

提交本地的 Hexo 项目代码到对应 Github 仓库即可触发 Github Actions 工作流实现自动部署，然后访问你的 username.github.io ！

1
2
3
graph LR
A[博客源码仓库提交代码到master分支] -->|触发配置hexo-deploy.yml工作流| B[推送静态页面到Github Pages项目master分支]-->|触发配置deploy-pages.yml工作流| C[页面部署到 GitHub Pages]--> C[访问username.github.io]