当博客文章的越来越多时,使用hexo g生成需要的时间也越来越长。电脑性能差的话要更长时间、我们等的也要更久。此时我们就需要一个能够只推送hexo源文件、能够自动将Hexo源文件编译成静态文件来达到自动部署。听不懂?直接看教程吧!

介绍

GitHub Actions 是 GitHub 的持续集成服务,于2018年10月推出

使用

创建仓库

我们需要一个私有仓库用来存放Hexo的源文件、用来执行Action

生成Token

为确保 hexo d 有足够的访问权限、我们需要创建token

因为我需要同时部署到 Github 、Coding和Gitee上、就需要生成三个token(你可以选择你需要的来创建)

  • Github

    进入Github 、点击头像 -> Settings

    找到 Developer settings

    点击 Personal access tokens

    点击 Generate new token

    名字随便取、一定要勾选repo

    请复制生成token、因为只会生成一次、如果忘记了、记得重新生成

  • Coding

    1. 进入Coding 、 点击头像 -> 个人账户设置

    2. 点击访问令牌

      新建令牌

      名字随便取、勾选project:depot 读/写 完整的仓库控制权限

      请复制好生成的token和令牌用户名

      ps:

      Coding的仓库地址在如下图中复制

  • Gitee

    进入Gitee 、 点击头像 -> 设置

    点击安全设置 -> 私人令牌

    生成私人令牌 、勾选projects 查看、创建、更新你的项目

    请复制好生成的token

编辑 _config.yml

编辑根目录下的 _config.yml 找到 编辑

针对Github、Coding(老版本的、新版本不知道)和Gitee、填入相应的token

1
2
3
4
5
6
7
8
deploy:
- type: git
repo:
gitHub: https://你的Github用户名:生成的Token@github.com/你的Github用户名/仓库名.git
gitee: https://你的Gitee用户名:生成的Token@gitee.com/你的Gitee用户名/仓库名
coding: https://令牌用户名:生成的Token@e.coding.net/你的Coding用户名/仓库名.git
branch: master
message: 'Deloyed by Github Actions: {{ now("YYYY-MM--DD HH:mm:ss") }}'

配置Github Action

在博客根目录新建 .github 文件夹、然后在里面再新建一个 workflows 文件夹

在里面新建一个 yml 格式的文件,名字随便起

里面写 Github Actions 的配置内容:

当然下面的部分内容需要根据自己配置如:

  • branches 分支: master 改成 main
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
name: 自动部署

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: "12.x"

- name: 缓存依赖
uses: actions/cache@v2.1.1
id: cache-dependencies
with:
path: node_modules
key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

- name: 安装 Hexo
run: |
npm install hexo-cli -g

- name: 安装依赖
if: steps.cache.outputs.cache-hit != 'true'
run: |
export TZ='Asia/Shanghai'
npm install --save

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

- name: 部署
run: |
git config --global user.name "你的用户名"
git config --global user.email "你的邮箱"
git clone 博客静态文件仓库地址 .deploy_git # clone 静态文件仓库,防止 Hexo 推送时覆盖整个静态文件仓库,只推送有更改的文件
hexo deploy

这下面是我的配置、仅供参考(如果和我的配置不一样请不要复制):

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
name: 自动部署

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: "12.x"

- name: 安装 Hexo Gulp
run: |
npm install hexo-cli -g
npm install gulp-cli -g

- name: 缓存依赖
uses: actions/cache@v2.1.1
id: cache-dependencies
with:
path: node_modules
key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

- name: 安装依赖
if: steps.cache.outputs.cache-hit != 'true'
run: |
export TZ='Asia/Shanghai'
npm install --save

- name: 生成静态文件
run: |
hexo clean
hexo bangumi -u
hexo generate
gulp

- name: 部署
run: |
git config --global user.name "我的用户名"
git config --global user.email "我的邮箱"
git clone 博客静态文件仓库地址 .deploy_git # clone 静态文件仓库,防止 Hexo 推送时覆盖整个静态文件仓库,只推送有更改的文件
hexo deploy

- name: 同步到 Gitee
uses: wearerequired/git-mirror-action@master
env:
# 注意在 Settings->Secrets 配置 GITEE_RSA_PRIVATE_KEY
SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
with:
# 注意替换为你的 GitHub 源仓库地址
source-repo: "git@github.com:xxx/xxx.github.io.git"
# 注意替换为你的 Gitee 目标仓库地址
destination-repo: "git@gitee.com:xxx/xxx.git"

- name: 构建 Gitee Pages
uses: yanglbme/gitee-pages-action@master
with:
# 注意替换为你的 Gitee 用户名
gitee-username: xxx
# 注意在 Settings->Secrets 配置 GITEE_PASSWORD
gitee-password: ${{ secrets.GITEE_PASSWORD }}
# 注意替换为你的 Gitee 仓库
gitee-repo: xxx/xxx

推送仓库

如果主题目录下有 .git 文件夹(隐藏文件夹) 、部署可能会失败、需要采取以下三种方法:

  1. 方法1:把主题目录下 .git 文件夹(隐藏文件夹)删掉、或者将 .git 文件夹 移动到其他地方、自动部署完成之后再移动回来

  2. 方法2:重新设置远程仓库地址和分支

1
2
3
4
5
6
git remote rm origin
git remote add origin [url] #url为新的存放源码的github仓库
git checkout -b master
git add .
git commit -m "github action update"
git push origin master
  1. 方法3:submodule 高级操作 Flex大佬的方法
1
git submodule add 主题GitHub仓库地址 themes/主题文件夹名  

用 submodule 会直接从主题 GitHub 仓库获取主题文件,所以如果有魔改就不会生效(也可以 Fork 主题仓库再魔改,然后 submodule add 你Fork的地址)

在博客根目录下创建.gitignore文件、用来忽略上传文件

node_modules .deploy_git public/ 这些大文件可以不用上传

1
2
3
4
5
6
7
8
.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy_git*/
.idea

最后在博客根目录下执行(都是git命令啦、不会去学习一下)

1
2
3
4
5
git init
git add .
git commit -m "first commit"
git remote add origin 你的仓库地址.git
git push -u origin master

提交完成之后、进入你的私有仓库、点击Action

进入之后点击提交信息再次进入查看

点击deploy就可以查看状态了

都打上了绿勾就说明部署成功了

结语

到这里、你已经成功完成了自动部署、是不是很简单呢!虽然我也部署了4次才成功的、都是因为coding仓库的地址填写错误、呜呜呜

参考: