差点翻车

前言

GithubAction作为Github提供的免费的CI/CD服务,让开发者感受到了自动化的爽,相比起Travis CI来说,GitHubAction集成方便,非常适合快速部署的操作,本教程便是一篇如何利用GithubAction对于GithubPage+Hexo博客进行自动化部署,并利用gulp进行压缩。

配置GithubAction

生成key

首先依旧是申请key,

1
2
cd ~/.ssh
ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""
image-20200724215856700
image-20200724215856700

此时会生成.pub的公钥与没有后缀的私钥

成功生成密钥
成功生成密钥

配置仓库

首先新建一个空仓库,用于存放你的博客根目录,新建完成后将博客根目录所有文件都上传到这个仓库中,传完项目结构大体如下:

image-20200724220337436
image-20200724220337436

然后开始配置仓库,首先

image-20200724220449987
image-20200724220449987
image-20200724220517055
image-20200724220517055

配置成你的公钥,然后在上传博客的仓库中,上传你的私钥:

image-20200724220651398
image-20200724220651398

注意这里的私钥名字一定要跟后面Action里面设置的一样!(不知道就跟我一样)

配置workflow

在博客根目录新建.github文件夹,再在.github文件夹里新建workflows文件夹,新建完在workflows文件夹里新建deploy.yml文件,然后按照如下编写:

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
# workflow name
name: Deploy To Github Pages

# 当有 push 到仓库就运行
on: [push]

jobs:
deploy:
name: Deploy Hexo Public To Pages
runs-on: ubuntu-latest
env:
TZ: Asia/Shanghai

steps:
# 切换到master
# from: https://github.com/actions/checkout
- name: Checkout Repository master branch
uses: actions/checkout@master

# 安装node
# from: https://github.com/actions/setup-node
- name: Setup Node.js 11.x
uses: actions/setup-node@master
with:
node-version: "11.x"

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

# 安装hexo并生成
- name: Setup Hexo Dependencies
run: |
npm install hexo-cli -g
npm install
hexo generate

# 部署到GitHubPage
# from https://github.com/peaceiris/actions-gh-pages
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
# 这里写你自己的仓库名
external_repository: xmmmmmovo/xmmmmmovo.github.io
publish_branch: master
publish_dir: ./public
commit_message: ${{ github.event.head_commit.message }}

好了,这样就已经配置完成了,你每次提交到此仓库,便会自动帮你运行部署到GithubPage上去。

测试

image-20200724221510619
image-20200724221510619
image-20200724221450653
image-20200724221450653

可以看到,已经成功运行了。

配置gulp

我们随便点开一个文件:

image-20200724221832348
image-20200724221832348

可以看到,里面充斥着大量的空格,积少成多,这会占用非常多的时间,让你的博客感觉加载起来很慢,所以既然我们都是全自动化部署了,我们不如直接在进行一遍压缩操作,这样使你博客加载的更加迅速,体验更加良好。

安装gulp

首先进到博客根目录,然后打开命令行,输入(这里其实你直接在package.json里面写也行(因为node_modules已经没用了),但是我比较懒):

1
npm install gulp@3.9.1 gulp-minify-css gulp-htmlmin gulp-htmlclean --save-dev

待完成后,改写deploy.yml

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
# workflow name
name: Deploy To Github Pages

# 当有 push 到仓库就运行
on: [push]

jobs:
deploy:
name: Deploy Hexo Public To Pages
runs-on: ubuntu-latest
env:
TZ: Asia/Shanghai

steps:
# 切换到master
# from: https://github.com/actions/checkout
- name: Checkout Repository master branch
uses: actions/checkout@master

# 安装node
# from: https://github.com/actions/setup-node
- name: Setup Node.js 11.x
uses: actions/setup-node@master
with:
node-version: "11.x"

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

# 安装hexo并生成
- name: Setup Hexo Dependencies
run: |
npm install hexo-cli -g
npm install
hexo generate
gulp

# 部署到GitHubPage
# from https://github.com/peaceiris/actions-gh-pages
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
# 这里写你自己的仓库名
external_repository: xmmmmmovo/xmmmmmovo.github.io
publish_branch: master
publish_dir: ./public
# 这里我改成了与原格式相似格式的commit message
commit_message: 'Site updated: ${{ github.event.head_commit.timestamp }}'

然后编写gulpfile.js文件用来加载gulp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'))
});
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true
}))
.pipe(gulp.dest('./public'))
});
gulp.task('default', ['minify-html', 'minify-css']);

此时再次提交,等待GithubAction完成之后,便可以查看效果了~

image-20200724222548668
image-20200724222548668

可以看到800多行瞬间变为了16行,是不是很爽~