前言

之前每次部署 Hexo 都需要运行 hexo cl & hexo g & hexo d 指令三件套完成推送到远程仓库,换一台电脑还要重新部署环境,而且随着文章越来越多,编译的时间也会越来越长。现在通过 Github Actions,我们只需要在每次完成博客的编写或修改以后,将改动直接 push 到远程仓库,之后的编译部署的工作统统交给 CI 来完成即可。

本文假设你已经有了自己的 hexo 静态博客,因此只介绍自动化部署的过程合设置。

一.创建GitHub仓库

  1. 创建 blog 仓库用来存放 Hexo 源码,仓库的类型是 private
  2. 创建 yourname.github.io 仓库用来存放静态博客页面,仓库类型是 public(yourname修改为自己GitHub用户名)

二.部署密钥

1.生成密钥

Git Bash Here 终端 中执行以下命令,一路按回车直到生成成功

$ ssh-keygen -f github-deploy-key

将会在当前目录下生成 github-deploy-keygithub-deploy-key.pub 两个文件

2.配置密钥

blog 仓库 Settings -> Secrets and variables -> Action 页面上点击 New repository secret 添加以下参数:

Name HEXO_DEPLOY_PRI
Secret github-deploy-key 文件内容

yourname.github.io 仓库 Settings -> Deploy keys 页面上点击 Add Deploy key 添加以下参数并勾选 Allow write access 选项保存:

Title HEXO_DEPLOY_PUB
key github-deploy-key.pub 文件内容

三.配置 Github Action

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

blog (repository)
└── .github
└── workflows
└── deploy.yml

deploy.yml 文件中粘贴以下内容:

name: 自动部署
# 当有改动推送到master分支时,启动Action
on:
push:
branches:
- master
release:
types:
- published

jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: 检查分支
uses: actions/checkout@v2
with:
ref: master

- name: 安装 Node
uses: actions/setup-node@v1
with:
node-version: "16.x"

- name: 安装 Hexo
run: |
export TZ='Asia/Shanghai'
npm install hexo-cli -g

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

- name: 安装依赖
if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
run: |
npm install gulp-cli -g #全局安装gulp
npm install --save

- name: 生成静态文件
run: |
hexo clean
hexo generate # 生成静态文件

- name: 部署到Github
uses: JamesIves/github-pages-deploy-action@v4
with:
ssh-key: ${{secrets.HEXO_DEPLOY_PRI}} # GitHub ssh-key
repository-name: # 推送的目标仓库:即第一步创建的yourname.github.io仓库
branch: master # 推送的目标仓库分支
folder: public # 要推送的文件夹下的内容
commit-message: "${{ github.event.head_commit.message }} Updated By Github Actions"

四.重新设置远程仓库和分支

在本地博客根目录下启动Git Bash Here 终端 ,使用 git 指令重设仓库地址:

git remote rm origin # 删除原有仓库链接
git remote add origin blog # github 源码仓库地址

推送本地源码到远程仓库:

git branch -M master # 切换到master分支,自行修改
git add .
git commit -m "github action update"
git push -u origin master

五.查看部署

进入存放源码的 blog仓库,点击Actions页面即可查看到自动部署的情况,每次本地推送到远程仓库时,会触发自动部署。当任务完成后查看yourname.github.io 仓库和您的博客 https://your.github.io,如果不出意外的话已经自动编译部署好了。