Hexo + Github Action 实现推送后自动更新博客静态资源

这几天完成了hexo博客的自动化部署，实现了Hexo + Github Action 推送(git push)后自动更新博客静态资源，记录一下，主要是分享工作流的配置，话不多说，开干。

1. 创建Github仓库

首先，在Github上创建两个仓库，分别用于存放博客源文件和生成的静态资源。

• 博客源文件仓库：用于存放博客的源文件，例如：hexo-blog。
  这个仓库可以设置为私有的，防止_config.yml文件中某些隐私设置泄露。待会还需要再这个仓库中设置秘密变量和工作流。
• 静态资源仓库：用于存放生成的静态资源，格式为：Github用户名.github.io。 例如：我的就是 xswangcode.github.io。
  1. 注意：静态资源仓库的名称必须是 Github用户名.github.io，否则无法使用Github Action的部署功能。
  2. 两个仓库的主分支都为 main。

2. 配置工作流

Github Action 官方文档

2.1 创建工作流文件

在博客源文件仓库[hexo-blog]中，创建一个 .github/workflows/deploy.yml文件，内容如下：

name: Build and Deploy View 

on:
  workflow_dispatch:
  push:
    branches:
      - main 

  schedule:
    - cron: '0 4,16 * * *' # 每天12点和24点自动执行
    
permissions: read-all

jobs:
  build:
    runs-on: ubuntu-20.04
    permissions:
      contents: read
  
    steps:
    - name: Checkout repository
      uses: actions/checkout@v2
      with:
        ref: main
        repository: xswangcode/hexo-blog
        timezoneLinux: "Asia/Shanghai"


    - name: Set up Node.js
      uses: actions/setup-node@v1
      with:
        node-version: 20

    - name: Cache node_modules 
      uses: actions/cache@v2 
      env:
        cache-name: cache-node-modules
      with:
        path: ~/.npm
        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: Install dependencies
      run: npm i  package.json -g 
    
    - name: Install Hexo-cli # 安装 Hexo
      run: |
        npm install hexo-deployer-git 
        npm install  hexo-cli -g
        echo "install hexo successful"
      
    - name: Build Blog
      run: |
        hexo clean
        hexo g
        echo "build blog successful"

    - name: Deploy DoubleAm's Blog # 设置 git 信息并推送静态博客文件
      env:
        GIT_NAME:  xswangcode
        GIT_EMAIL: ${{ secrets.GH_EMAIL }}
        GH_TOKEN:  ${{ secrets.GH_TOKEN }}
      run: |
          git config --global user.name "$GIT_NAME"
          git config --global user.email "$GIT_EMAIL"
          sed -i -e "s/https:\/\/github.com/https:\/\/${{ env.GH_TOKEN }}@github.com/g" _config.yml
          hexo deploy
      
    - run: |
        echo "Deploy Successful!"
        echo "Visit website: https://xswangcode.github.io !"
        echo "Visit website: https://xswang.pages.dev     !"

上边的很多配置也参考了其他人的配置，感谢各位大佬的分享。

2.2 修改工作流内容

下面说下要改的位置

1. 25行：repository: xswangcode/hexo-blog 替换成你自己的仓库地址，如果你按照上面的步骤做的话，就把用户名改成你自己的就行。
2. 64行：这里是配置git用户，需要把用户名改成你自己的。
3. 75行：同上，这一行是输出最后网站的路径。这个不影响最终部署，但是会显示在 github action 的日志中。

• 如果觉得太麻烦，也提供一个最简单的方案：在编辑器中打开deploy.yml 文件，搜索 xswangcode,全部替换成你自己的名字就够了，也可以正常执行。

2.3 准备Github Token

可以看到我在65行和70行都是在配置Github Token，这个Token是用来在部署时，让Github Action 能够提交代码到你的仓库的。
先要创建一个Token，在Github的设置中，找到 Developer settings，然后找到 Personal access tokens，点击 Generate new token，然后输入一个Token的名称，选择 repo 和 workflow 权限，然后点击 Generate token，生成一个Token，这个Token只会显示一次，所以要保存好。

2.4 配置Github Secrets

在Github的仓库中，找到 Settings，然后找到 Secrets，，点击 New repository secret，然后输入一个名称，这里我输入的是 GH_TOKEN，然后把之前生成的Token粘贴到 Value中，点击 Add secret，这样就配置好了。
然后按照相同的步骤添加GH_EMAIL变量。

2.5 检查hexo 配置

如果你的hexo博客的所有配置已经修改完成了，并且也在根目录的_config.yml配置了deploy相关内容，如下。

deploy:
  type: git
  repo: https://github.com/xswangcode/xswangcode.github.io.git  # 这里改成你自己的仓库地址！
  branch: main
  message:  "🎉update by Github Action💯 - {{ now('yyyy-MM-dd hh:mm:ss') }}" 

2.6 设置Github Pages

在静态资源的 xswangcode.github.io仓库中，找到 Settings，然后找到 Pages，然后把 Source 设置为 main branch / root ，然后点击 Save。 设置完成后如下：

2.7 见证奇迹的时刻

在hexo-blog 目录下，执行

hexo new test

然后执行然后把新增加的文件提交并推送到Github仓库。静等1分钟左右，进去https://{你的用户名}.github.io/ 看看吧。