Flexiston's Blog
 时间轴
 标签
 分类
 友链
 实验室
 关于

 

 Dev  GitHub  2.3k words in 10 min

前言

当博客文章越来越多时，使用 hexo g 生成需要的时间也越来越长。电脑性能差的话要等更久。此时我们就可以用自动部署。这样我们能够只推送 Hexo 源文件，让自动部署来将 Hexo 源文件编译成静态文件（懒人必备哟）

介绍

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

GitHub Actions 相对其他持续集成服务来说，第一，GitHub旗下的，肯定是很好的啦

第二，可以直接在 GitHub 源代码仓库里配置，很方便，不用像 Travis CI 那样需要注册个账号配置也比较麻烦（个人观点）

Gulp 压缩就不用说了，我是觉得非常好用

开始

这就开始吧！

新建 GitHub 仓库

首先，到 GitHub 新建一个用来放博客源文件的仓库，用来存放 Hexo 的源文件、执行 Actions

新建仓库

建好仓库

私有仓库

不想暴露隐私就选 Private（私有）仓库

有时间限制，2000 分钟，一般足够用

公共仓库

如果想要开源，或者想没有时间限制，也可以用公共仓库

使用 sed 命令替换内容

比如我的 _config.yml 文件中的百度推送 Token

1
2
3
4
5
baidu_url_submit:
  count: 200
  host: blog.JalenChuh.cn
  token: .TOKEN
  path: baidu_urls.txt

那么我们可以使用 .TOKEN 将 token 代替

而之后在编写的 Action 的时候将 token 存入仓库设置里的 secrets，用 sed 命令把 .TOKEN 替换就可以了

1
sed -i "s/.TOKEN/${baiduToken}/" _config.yml

sed -i 的用法为 sed -i 's/原字符串/新字符串/' 文件路径

结合 secrets 在 Actions 里使用：

1
2
3
4
5
baidu_url_submit:
  count: 200
  host: blog.JalenChuh.cn
  token: .TOKEN
  path: baidu_urls.txt
1
2
3
4
5
- name: env
  env:
    baiduToken: ${{ secrets.baiduToken }}

  run: sed -i "s/.TOKEN/${baiduToken}/" _config.yml

生成 Token

为确保 hexo d 时有足够的访问权限，我们需要创建 Token

因为我需要同时部署到 Github 和 Coding 上，就需要创建两个 Token（你可以选择你需要的来创建）

GitHub

  1. 进入 GitHub，点击 右上角头像 -> Settings

    点击设置

  2. 找到 Developer settings

    Developer settings

  3. 点左边的 Personal access tokens

  4. 然后点上面的 Generate new token

    生成Token

  5. 然后 Note 写备注

    一定要勾上 repo，获取所有仓库权限

  6. 生成好了

​ 生成好了

注意这个 Token 只会显示一次，所以要保存好 弄丢了还能再生成啊，对不对🙄

Coding

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

  2. 点击 访问令牌

    新建令牌

    img

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

    img

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

P.S:

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

img

编辑 _config.yml

编辑根目录下的 _config.yml ，找到 deploy 字段，编辑

针对 Github 和 Coding 填入相应的 Token

1
2
3
4
5
6
7
deploy:
  - type: git
    repo: 
      github: https://你的GitHub用户名:生成的Token@github.com/你的GitHub用户名/仓库名.git
      coding: https://令牌用户名:生成的Token@e.coding.net/你的Coding用户名/项目名/仓库名.git # 新版，一个项目可以有多个代码仓库
      # coding: https://令牌用户名:生成的Token@e.coding.net/你的Coding用户名/仓库名.git # 旧版
    branch: master

配置 GitHub Actions

重点来了！！

在博客根目录新建 .github 文件夹（别忘了那个 .）

里面再新建一个 workflows 文件夹

新建文件夹

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

里面写 GitHub Actions 的配置内容：

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
name: Deploy # 部署

on: # 触发条件
  push:
    branches:
      - master # 推送到 master 分支

  release:
    types:
      - published # 推送新版本号

  workflow_dispatch: # 手动触发

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout # Checkout 仓库
      uses: actions/checkout@v2
      with:
        ref: master

    - name: Setup Node # 安装 Node.js
      uses: actions/setup-node@v1
      with:
        node-version: "12.x"

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

    - name: Cache Modules # 缓存 Node 插件
      uses: actions/cache@v1
      id: cache-modules
      with:
        path: node_modules
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

    - name: Install Dependencies # 如果没有缓存或 插件有更新，则安装插件
      if: steps.cache-modules.outputs.cache-hit != 'true'
      run: | # **如果仓库里没有 package-lock.json，上传一下，npm ci 必须要有 package-lock.json**
        npm ci

    - name: Generate # 生成
      run: |
        hexo clean
        hexo generate

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

        export TZ='Asia/Shanghai'
        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
name: Deploy

on: 
  push:
    branches:
      - master

  release:
    types:
      - published

  workflow_dispatch:

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout
      uses: actions/checkout@v2
      with:
        ref: master

    - name: Setup Node
      uses: actions/setup-node@v1
      with:
        node-version: "12.x"

    - name: Install Hexo & Gulp
      run: |
        npm install hexo-cli gulp-cli -g

    - name: Cache Modules
      uses: actions/cache@v1
      id: cache-modules
      with:
        path: node_modules
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

    - name: Install Dependencies
      if: steps.cache-modules.outputs.cache-hit != 'true'
      run: |
        npm ci

    - name: Generate & Compress
      run: |
        hexo cl
        hexo generate
        gulp

    - name: Deploy
      run: |
        git config --global user.name "我的用户名"
        git config --global user.email "我的邮箱"
        git clone 博客静态文件仓库地址 .deploy_git
        
        export TZ='Asia/Shanghai'
        hexo deploy

配置 Gulp

全局安装 gulp-cli

1
npm install gulp-cli -g

在博客根目录安装 Gulp 所需依赖

1
npm install gulp terser gulp-autoprefixer gulp-clean-css gulp-cssnano gulp-htmlclean gulp-htmlmin gulp-uglify --save-dev

在博客根目录新建一个 gulpfile.js，复制粘贴以下内容：

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
const gulp = require('gulp');
const cssClean = require('gulp-clean-css');
const htmlMin = require('gulp-htmlmin');
const htmlClean = require('gulp-htmlclean');
const terser = require('terser');
const composer = require('gulp-uglify/composer');
const pump = require('pump');
const terserMinify = composer(terser, console);
const autoprefixer = require('gulp-autoprefixer');
const cssnano = require('gulp-cssnano');

const htmlMinify = () => (
    gulp.src('./public/**/*.html')
        .pipe(htmlClean())
        .pipe(htmlMin({
            removeComments: true,
            collapseWhitespace: true,
            collapseBooleanAttributes: true,
            removeEmptyAttributes: true,
            removeScriptTypeAttributes: true,
            removeStyleLinkTypeAttributes: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true
        }))
        .pipe(gulp.dest('./public'))
);

const jsMinify = (cb) => (
    pump([
        gulp.src(['./public/**/*.js', '!./public/**/*.min.js']),
        terserMinify({}),
        gulp.dest('./public')
    ], cb)
);

const cssMinify = () => (
    gulp.src('./public/**/*.css')
        .pipe(cssClean({
            compatibility: 'ie9'
        }))
        .pipe(cssnano({
            zindex: false,
            reduceIdents: false
        }))
        .pipe(autoprefixer())
        .pipe(gulp.dest('./public'))
);

module.exports = {
    htmlMinify: htmlMinify,
    cssMinify: cssMinify,
    jsMinify: jsMinify
};

gulp.task('dist', gulp.parallel( // 异步压缩
    htmlMinify,
    cssMinify,
    jsMinify
));

gulp.task('default', gulp.series('dist'));

本地运行 gulp 测试一下，确定没有报错了就可以了

然后 Github Actions 的配置项加上命令

1
npm install gulp-cli -g
1
gulp

完整的 Github Actions 配置文件如下：

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
name: Deploy # 部署

on: # 触发条件
  push:
    branches:
      - master # 推送到 master 分支

  release:
    types:
      - published # 推送新版本号

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout # Checkout 仓库
      uses: actions/checkout@v2
      with:
        ref: master

    - name: Setup Node # 安装 Node.js
      uses: actions/setup-node@v1
      with:
        node-version: "12.x"

    - name: Install Hexo # 安装 Hexo；更改时区
      run: |
        export TZ='Asia/Shanghai'

        npm install hexo-cli -g
        npm install gulp-cli -g

    - name: Cache Modules # 缓存 Node 插件
      uses: actions/cache@v1
      id: cache-modules
      with:
        path: node_modules
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

    - name: Install Dependencies # 如果没有缓存或 插件有更新，则安装插件
      if: steps.cache-modules.outputs.cache-hit != 'true'
      run: | # **如果仓库里没有 package-lock.json，上传一下，npm ci 必须要有 package-lock.json**
        npm ci

    - name: Generate # 生成
      run: |
        hexo clean
        hexo generate
        gulp

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

推送仓库

先把主题目录下 .git 文件夹（隐藏文件夹）删掉，不然会报 Warning，上传上去主题目录会是空的

当然，可以用下面这两种方法的任意一种，可以不用删除主题目录下 .git 文件夹：

  1. 重新设置远程仓库地址和分支

    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

  2. 用 submodule（高级操作了）：

    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
9
CODE
.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

推送成功

查看状态

推送上去之后，进入你的博客源文件仓库，点击 Actions

![](https://rmt.dogedoge.com/fetch/Flexiston/storage/屏幕截图 2020-09-30 081315.png?w=1280)

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

打上绿勾就说明成功了

点击 build 可以查看详细信息

![](https://rmt.dogedoge.com/fetch/Flexiston/storage/屏幕截图 2020-09-30 081552.png?w=1280)

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

![](https://rmt.dogedoge.com/fetch/Flexiston/storage/屏幕截图 2020-09-30 081845.png?w=1280)

结语

到这里，你已经成功完成了自动部署，是不是很简单难呢！

版权说明

封面图来自：https://blog.jalenchuh.cn/posts/use-github-action/

本文作者：Flexiston

本文链接：https://blog.flesx.cn/posts/17931.html

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 ( BY-NC-SA 4.0) 协议

Dev GitHub Dev GitHub Actions Hexo
Comment

评论如无特殊原因均不会被删除，请对自己的言论负责。

立即行动吧，未来要自己争取

✨ Flexiston 的快递已送达 🚀 点击签收