Sweet RX's blog

人生在勤 不索何获

0%

经验技术 - hexo博客使用Github Action自动部署

Posted on Edited on In

hexo博客使用Github Action自动部署

Hexo 博客的Github Action自动化部署是什么？

简单说，就是把hexo博客的源代码上传到github代码仓库，github在代码发生变动的时候，自动通过安装一系列nodejs环境和相关依赖，生成html页面到github pages仓库。

再简单点说，就是把本地生成博客的工作，全部交给github执行。

总体步骤：

1. 使用Github令牌部署hexo博客
2. Github新建一个私有仓库，并上传hexo博客源码
3. 配置Github Action实现自动化部署

使用Github令牌部署hexo博客

登陆GitHub，右上角Settings,

设置界面左下`Developer settings -- Personal access tokens -- Generate new token`,

创建一个全权限的`token`,名称随意,

记录好此token。

更改根目录配置deploy的仓库地址

在Hexo博客根目录下打开_config.yml找到

1
2
3
4
5
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo:

修改成

1
2
3
4
5
6
7
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: 
    github: https://令牌@github.com/rxsweet/rxsweet.github.io.git
  branch: master

Github新建一个私有仓库，并上传hexo博客源码

下载个人使用的Hexo博客源码
源码链接 1
源码链接 2

创建私有库

上传hexo博客源码,在博客源码中删除.git文件夹(隐藏文件夹)，删除themes里面主题目录.git文件夹

提交完毕后，仓库代码如上图

配置Github Action实现自动化部署

新建workflow

点击博客源码仓库的Action

配置action，代码如下（记得修改自己的地址）：

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
name: blogDeploy # 部署
 
on: # 触发条件
  push:
    branches:
      - main # 推送到 main 分支（这里的分支名很重要，不要弄错了,这里main指的是Hexo源库的branch）
 
  release:
    types:
      - published # 推送新版本号
 
  workflow_dispatch: # 手动触发
 
jobs:
  build:
    runs-on: ubuntu-latest
 
    steps:
    - name: Checkout # Checkout 仓库
      uses: actions/checkout@v2
      with:
        ref: main
 
    - 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 "rxsweet"
        git config --global user.email "sweetrx@pm.me"
        git clone https://github.com/rxsweet/rxsweet.github.io.git .deploy_git
        export TZ='Asia/Shanghai'
        hexo deploy

查看状态

点击action即可看到部署状态

这样就代表自动部署成功了。

注意

branch: master

自己部署的时候创建的xxx.github.io目录默认branch: main,要自己创建一个branch: master设为默认，
或者等自动部署完成后，把master设为默认，删除main

Github Actions里面的# 触发条件 后面的main

Github Actions里面的`# 触发条件 后面的main（这里的分支名很重要，不要弄错了,这里main指的是Hexo源库的branch）`

缺少package-lock.json

package-lock.json作用：

主要解决问题场景：
前景：
比如你的packgae.json的依赖是”react”: “^17.0.2”，因为有标识符^，所以如果react模块有在17大版本下更新的小版本17.0.3，npm install时候会自动安装17下的最新版本17.0.3
现象：
在前景情况下，你本地是”react”: “^17.0.2”，如果这时候react更新”react”: “^17.0.3”，别人npm install的时候，安装就是”react”: “^17.0.3”。这样导致你们版本不一致，可能引起一些相关错误。
解决：
package-lock.json：简单来说就是锁定安装模块的版本号。
就是在npm install的时候，记录各个模块的版本信息和下载路径，这样别人拉项目npm install时候， 就会依据packgae-lock.json去安装”react”: “^17.0.2”，保证大家依赖一致并且安装模块速度也能提高。
注意点:
1.npm安装，没有package-lock.json文件，如果npm版本是5+，会自动生成package-lock.json。有的话会默认依据该文件进行安装而不是package.json。cnpm不支持（忽略）依据package-lock.json文件安装模块，默认依赖package.json进行安装。
2.需要更新版本，得去更新package.json里的模块版本，然后npm install，才能同步更新到package-lock.json
3.该功能基于npm5+

参考

参考了heson大佬的文章和方法黑石博客 - 利用Github Action实现hexo博客的自动部署