使用 Github Actions 自动部署Hexo博客

前置说明

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

介绍

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

使用

创建仓库

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

生成Token

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

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

GithubCodingGitee

进入Github 、点击头像 -> Settings

找到 Developer settings

点击 Personal access tokens

点击 Generate new token

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

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

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

2. 点击访问令牌
   新建令牌
   
   名字随便取、勾选project:depot 读/写 完整的仓库控制权限

请复制好生成的token和令牌用户名
   ps:
   Coding的仓库地址在如下图中复制
   

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

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

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

请复制好生成的token

编辑 _config.yml

我这里使用的是 hexo-deployer-git 插件，你也可以参考 CCKNBC大佬的配置

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

针对Github、Coding和Gitee、填入相应的token

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就写master,main就写main

• 你的用户名：换成你的github用户名 例如我的：zykjofficial

• 你的邮箱：换成你github绑定的邮箱 xxx@xxx.com

• 博客静态文件仓库地址：换成你github仓库、github.io结尾的仓库。例如我的：https://github.com/zykjofficial/zykjofficial.github.io.git

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@v3
      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

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

• 番剧获取 https://github.com/HCLonely/hexo-bilibili-bangumi

• Gulp 博客压缩

• Gitee 自动部署 https://github.com/yanglbme/gitee-pages-action (目前Gitee需要实名认证才能使用Gitee Pages,所以我不使用了)

  name: 自动部署
  
  on: 
    push:
      branches:
        - master
  
    release:
      types:
        - published
  
  jobs:
    deploy:
      runs-on: ubuntu-latest
      env:
        TZ: Asia/Shanghai
      steps:
      - name: 检查分支
        uses: actions/checkout@main
        with:
          ref: master
          fetch-depth: 0
          submodules: false
  
      - name: 安装 Node
        uses: actions/setup-node@main
        id: setup-node
        with:
          node-version: "latest"
          check-latest: true
          cache: "npm"
  
      - name: 安装 Hexo 和 Gulp
        run: |
          npm install hexo-cli -g
          npm install gulp-cli -g    
  
      - name: 缓存依赖
        uses: actions/cache@main
        id: cache-dependencies
        with:
          path: node_modules
          key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}} 
          
      - name: 安装依赖
        if: steps.cache-dependencies.outputs.cache-hit != 'true'
        run: |
          npm install --save
  
      - name: 生成静态文件并压缩
        run: |
          hexo clean
          hexo generate
          gulp
      
      - name: 部署
        run: |
          git config --global user.name "zykjofficial"
          git config --global user.email "1454013857@qq.com"
          git clone https://github.com/zykjofficial/zykjofficial.github.io.git .deploy_git
          hexo deploy
  
      - name: 刷新缓存
        run: |
          curl https://purge.jsdelivr.net/gh/zykjofficial/zykjofficial.github.io@master/css/*.*
          curl https://purge.jsdelivr.net/gh/zykjofficial/zykjofficial.github.io@master/js/*.*
          curl https://purge.jsdelivr.net/gh/zykjofficial/zykjofficial.github.io@master/img/*.*    

推送仓库

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

1. 方法1：(不推荐)直接将 themes\butterfly\.git 文件夹删除，博主就是这样做的、或者将 .git 文件夹 移动到其他地方、自动部署完成之后再移动回来

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

   git remote rm origin
   git remote add origin [url] #url为新的存放源码的github仓库
   git checkout -b master # master 这里记得修改成你仓库的分支
   git add .
   git commit -m "github action update"
   git push origin master # master 这里记得修改成你仓库的分支

3. 方法3：submodule 高级操作 Flex大佬的方法

   git submodule add 主题GitHub仓库地址 themes/主题文件夹名  

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

---

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

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

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy_git/
.idea

最后在博客根目录下执行(都是git命令啦、不会去学习一下 Git的安装与使用)

第一次使用之后使用

你的仓库地址.git: 你创建的私有仓库地址。

master: 如果是 main 分支记得修改一下。

git init
git add .
git commit -m "first commit"
git remote add origin 你的仓库地址.git
git push -u origin master # master 这里记得修改成你仓库的分支

git add .
git commit -m "commit内容"
git push

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

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

点击deploy就可以查看状态了

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

结语

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

参考：

• Vercel+Github Actions自动部署Hexo博客
• 通过travis-ci或者GitHub Actions自动化部署GitHub Pages和Coding Pages