遇见时光

Keep Looking , Don't Settle
Stay Hungry , Stay Foolish

GitHub Actions自动部署Hexo

发表于 分类于 阅读次数： Valine：
本文字数： 7.8k 阅读时长 ≈ 7 分钟

介绍

我们可以使用Github Actions很方便的实现CI/CD工作流，我们可以实现一系列自动化的操作。在GitHub Actions中，当我们运行jobs时会触发workflow文件中定义的 action 。当一个workflow被触发后，GitHub Actions会创建一个新的虚拟环境来运行workflow文件中定义的Action。这个虚拟环境可以是预设的操作系统和软件环境，也可以是自定义的Docker镜像。

在执行Action的过程中，GitHub Actions会按照workflow文件中定义的步骤依次执行不同的操作，如下载代码仓库、安装依赖包、编译打包等。最终，Action的执行结果将被输出到日志中，用户可以通过查看日志来了解Action的详细执行情况。如果Action执行成功，workflow将继续执行下一步或结束；如果Action执行失败，workflow将停止执行并输出错误信息。

本文将介绍使用Github Actions实现自动部署hexo到Github Pages。接下来会简要说明一下原始的博客部署方案以及存在的问题，并且使用GitHub Actions是如何解决这些问题的。

原本方案：在自己的笔记本上安装hexo环境，先将需要发布的博客md文件放到_post目录中，然后在目录下使用Git bash here执行如下指令，

1
2
3
4
5
6
# 本地4000端口预览：
hexo s
# 清理生成页面并预览
hexo clean && hexo g && hexo s
# 自动部署配置：
hexo clean && hexo g && hexo d

但是这种情况下只能在单机上进行博文的撰写，在其他的设备上发文则需要另外配置相同的hexo环境，并进行文件的同步。此外，我们还可能遇到本地的Node.js版本和Hexo不兼容的问题，若是使用Github Actions进行部署，文章都是通过同一个容器的环境进行渲染，不会出现上述的问题。

自动化部署

本文假设你已经拥有了自己的hexo博客，此处只介绍自动化部署的设置，博客搭建的教程请详见其他教程。

创建代码仓库

新建一个blog仓库用来存放Hexo项目的源码，仓库的类型为private。

rocky

勾选Add a README file完成repository的初始化

生成部署秘钥

本地桌面已安装Git，在新建文件夹中右击Git Bash here生成秘钥：

1
2
# 生成秘钥
ssh-keygen -f github-deploy-key

一直回车直到成功并结束。

当前目录下会有两个文件，私钥文件 github-deploy-key 和 公钥文件github-deploy-key.pub 。

rocky

配置部署秘钥

复制 github-deploy-key 文件内容，在 blog 仓库 Settings -> Secrets -> Add a new secret 页面上添加。

  1. 在 Name 输入框填写 HEXO_DEPLOY_PRI。
  2. 在 Value 输入框填写 github-deploy-key 文件内容。

rocky

rocky

rocky

复制 github-deploy-key.pub 文件内容，在 your.github.io 仓库 Settings -> Deploy keys -> Add deploy key 页面上添加。

  1. 在 Title 输入框填写 HEXO_DEPLOY_PUB。
  2. 在 Key 输入框填写 github-deploy-key.pub 文件内容。
  3. 勾选 Allow write access 选项。

rocky

同步代码

进入原来Hexo目录下，将目录下的文件提交到blog仓库。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 把文件添加到版本库中
git add .

# 把文件提交到仓库。引号内为提交注释
git commit -m '第一次提交'

# 关联到远程库
git remote add origin https://github.com/Joyrocky/blog.git

# 把本地库的内容推送到远程
## 第一次使用加上了-u参数，是推送内容并关联分支。
git push -u origin main

# 下次直接提交
git push origin main

# 强制更新
git push -f origin main

如果要同步到本地，可以执行下面的命令进行拉取

1
2
# 同步下拉代码
git pull origin main

使用Git进行提交时可能会出现这样的错误：

rocky

出现此种错误的原因是，在当前的git的项目中，存在其中的子文件夹隶属于别的git项目地址，即存在git文件夹。

rocky

解决方法就是，即删除子文件夹中的git目录即可。如果仍然想要保留子文件夹原git的地址，可以将原来的git文件夹中config拷贝出来保留下来，里面有git原地址相关信息。

编写GitHub Actions代码

在 blog 仓库根目录下创建 .github/workflows/deploy.yml 文件，目录结构如下。

1
2
3
4
blog (repository)
└── .github
    └── workflows
        └── deploy.yml

deploy.yml 的内容如下：

主要修改的位置是env和dependencies；依赖安装指定版本与本地一致

本地查看hexo插件命令：Npm ls -dept 0

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
# Action 的名字
name: Hexo Auto Deploy

on:
  # 触发条件1：main 分支收到 push 后执行任务。
  push:
    branches:
      - main
  # 触发条件2：手动按钮
  workflow_dispatch:

# 这里放环境变量,需要替换成你自己的
env:
  # Hexo 编译后使用此 git 用户部署到 github 仓库
  GIT_USER: Joyrocky
  # Hexo 编译后使用此 git 邮箱部署到 github 仓库
  GIT_EMAIL: kevin009008@outlook.com
  # Hexo 编译后要部署的 github 仓库
  GIT_DEPLOY_REPO: Joyrocky/Joyrocky.github.io
  # Hexo 编译后要部署到的分支
  GIT_DEPLOY_BRANCH: master
  
  # Hexo 编译后使用此 gitee 用户部署到gitee仓库
  GITEE_USER: Joyrocky
  # Hexo 编译后要部署的 gitee 仓库
  GITEE_DEPLOY_REPO: Joyrocky/Joyrocky.github.io
  # Hexo 编译后要部署到的分支
  GITEE_DEPLOY_BRANCH: master
  
  # 注意替换为你的 GitHub 源仓库地址
  GIT_SOURCE_REPO: git@github.com:Joyrocky/Joyrocky.github.io.git
  # 注意替换为你的 Gitee 目标仓库地址
  # GITEE_DESTINATION_REPO: git@gitee.com:Joyrocky/Joyrocky.github.io.git

jobs:
  build:
    name: Build on node ${{ matrix.node_version }} and ${{ matrix.os }}
    runs-on: ubuntu-latest
    if: github.event.repository.owner.id == github.event.sender.id
    strategy:
      matrix:
        os: [ubuntu-18.04]
        node_version: [14.x]

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Checkout deploy repo
        uses: actions/checkout@v3
        with:
          repository: ${{ env.GIT_DEPLOY_REPO }}
          ref: ${{ env.GIT_DEPLOY_BRANCH }}
          path: .deploy_git

      - name: Use Node.js ${{ matrix.node_version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node_version }}

      - name: Configuration environment
        env:
          HEXO_DEPLOY_PRI: ${{secrets.HEXO_DEPLOY_PRI}}
        run: |
          sudo timedatectl set-timezone "Asia/Shanghai"
          mkdir -p ~/.ssh/
          echo "$HEXO_DEPLOY_PRI" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan -t rsa github.com >> ~/.ssh/known_hosts
          # coding 已取消同步
          ssh-keyscan -t rsa e.coding.net >> ~/.ssh/known_hosts
          ssh-keyscan -t rsa gitee.com >> ~/.ssh/known_hosts
          git config --global user.name $GIT_USER
          git config --global user.email $GIT_EMAIL

      - name: Install dependencies
        run: |
          npm install hexo-cli -g
          npm install
		  # 根据你安装的组件进行安装
          npm install hexo-cli@4.3.0 -g
          npm install
          # 根据你安装的组件进行安装
          # npm uninstall hexo-generator-index --save
          npm install @upupming/hexo-renderer-markdown-it-plus@2.0.2 file-uri-to-path@1.0.0 core-js@3.23.3 bindings@1.5.0 canvas-nest.js@2.0.4 hexo-generator-index2 hexo-blog-encrypt --save
          npm install hexo-abbrlink@2.2.1 hexo-baidu-url-submit@0.0.6 hexo-deployer-git@3.0.0 hexo-generator-archive@1.0.0 hexo-generator-feed@3.0.0 hexo-generator-index@2.0.0 hexo-generator-searchdb@1.4.0 hexo-generator-sitemap@3.0.1 hexo-generator-tag@1.0.0 hexo-helper-live2d@3.1.1 hexo-helper-live2d@3.1.1 hexo-neat@1.0.9 hexo-renderer-ejs@2.0.0 hexo-renderer-markdown-it-plus@1.0.5 hexo-renderer-markdown-it@6.0.1 hexo-renderer-stylus@2.1.0 hexo-server@3.0.0 hexo-symbols-count-time@0.7.1 hexo-wordcount@6.0.1 hexo@6.2.0 live2d-widget-model-hijiki@1.0.5 markdown-it-emoji@2.0.2 --save
          
          # 复制中文语言包，解决菜单英文的问题
          cp zh-CN.yml node_modules/hexo-theme-next/languages/

      - name: Deploy hexo
        run: |
          npm run deploy
		  
      # 以下为发布到gitee
      - name: Sync to Gitee
        uses: wearerequired/git-mirror-action@master
        env:
          # 直接使用了 HEXO_DEPLOY_PRI
          SSH_PRIVATE_KEY: ${{ secrets.HEXO_DEPLOY_PRI }}
        with:
          # GitHub 源仓库地址
          source-repo: ${{ env.GIT_SOURCE_REPO }}
          # Gitee 目标仓库地址
          destination-repo: ${{ env.GITEE_DESTINATION_REPO }}

      - name: Build Gitee Pages
        uses: yanglbme/gitee-pages-action@main
        with:
          # 你的 Gitee 用户名
          gitee-username: ${{ env.GITEE_USER }}
          # 注意在 Settings->Secrets 配置 GITEE_PASSWORD
          gitee-password: ${{ secrets.GITEE_PASSWORD }}
          # 你的 Gitee 仓库，仓库名严格区分大小写，请准确填写，否则会出错
          gitee-repo: ${{ env.GITEE_DEPLOY_REPO }}
          # 要部署的分支，默认是 master，若是其他分支，则需要指定（指定的分支必须存在）
          branch: ${{ env.GITEE_DEPLOY_BRANCH }}

模版参数说明

  • name 为此 Action 的名字
  • on 触发条件，当满足条件时会触发此任务，这里的 on.push.branches.$.master 是指当 master 分支收到 push 后执行任务。
  • env为环境变量对象
    • env.GIT_USER 为 Hexo 编译后使用此 git 用户部署到仓库。
    • env.GIT_EMAIL 为 Hexo 编译后使用此 git 邮箱部署到仓库。
    • env.THEME_REPO 为您的 Hexo 所使用的主题的仓库，这里为 sanonz/hexo-theme-concise。
    • env.THEME_BRANCH 为您的 Hexo 所使用的主题仓库的版本，可以是：branch、tag 或者 SHA。
    • env.DEPLOY_REPO 为 Hexo 编译后要部署的仓库，例如：sanonz/sanonz.github.io。
    • env.DEPLOY_BRANCH 为 Hexo 编译后要部署到的分支，例如：master。
  • jobs为此 Action 下的任务列表
    • jobs.{job}.name 任务名称
    • jobs.{job}.runs-on 任务所需容器，可选值：ubuntu-latest、windows-latest、macos-latest。
    • jobs.{job}.strategy 策略下可以写 array 格式，此 job 会遍历此数组执行。
    • jobs.{job}.steps一个步骤数组，可以把所要干的事分步骤放到这里。
      • jobs.{job}.steps.$.name 步骤名，编译时会会以 LOG 形式输出。
      • jobs.{job}.steps.$.uses 所要调用的 Action，可以到 https://github.com/actions 查看更多。
      • jobs.{job}.steps.$.with 一个对象，调用 Action 传的参数，具体可以查看所使用 Action 的说明。

第三方 Actions

使用第三方 Actions 语法 {owner}/{repo}@{ref} 或者 {owner}/{repo}/{path}@{ref} 例如：

1
2
3
4
5
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

一、调用 actions/checkout@v2 可以实现 Checkout 一个 git 仓库到容器。

例如 Checkout 当前仓库到本地，with.repo 不填写默认为当前仓库。

1
2
3
4
5
6
7
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
        # with:
          # repository: ${{ github.repository }}

例如 Checkout 第三方仓库 git@github.com:sanonz/hexo-theme-concise.git 的 master 分支到容器 themes/concise 目录。

1
2
3
4
5
6
7
8
9
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - with:
          repository: sanonz/hexo-theme-concise
          ref: master
          path: themes/concise

二、调用 actions/setup-node@v1 可以配置容器 Node.js 环境。

例如安装 Node.js 版本 v12 到容器中，with.node-version 可以指定 Node.js 版本。

1
2
3
4
5
6
7
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/setup-node@v1
      - with:
          node-version: v12

可以在这里查找更多 Actions 以及使用方式 官方 Actions 市场。

触发部署

只要将 md 文件通过 Add file –> Upload files 上传到仓库，就会自动触发自动部署。发文地址地址指向了 blog 仓库中的 _post 目录。

rocky

rocky

目前的发布时间都在 3 分钟以内。

参考文档

利用 Github Actions 自动部署 Hexo 博客 | Sanonz
地址：https://sanonz.github.io/2020/deploy-a-hexo-blog-from-github-actions/

用GitHub Actions自动部署Hexo | 老苏的blog
地址：https://laosu.ml/2022/01/24/用GitHub Actions自动部署Hexo/?highlight=github#创建代码仓库

大爷，赏点？