使用Github Action自动化部署Hexo

由于个人原因导致无法手动部署到Github Page上，于是通过在网络上各种查询和自身不断踩坑，总算是学会使用Github Action来自动化部署。相比与自己手动部署，显得方便了很多，只需要将需要提交的文件push到github仓库，就会自动开始部署，非常方便

环境准备

如果你打算完完全全在Github上进行编辑的话可以跳过这一步，直接forkHexo初始化文件即可

安装node.js 和 git

直接去到Node.js 和 git官网根据自己的系统下载最新版即可，唯一需要注意的就是git安装时的默认分支要根据自己的需求进行更改，本文git的默认分支为main。其余的不多赘述

安装hexo

先新建一个文件夹如Blog，打开Blog文件夹，右键选择Git Bush Here, 然后使用npm进行安装

1
npm install -g hexo-cli

然后输入

1
hexo init

进行初始化，失败了的话直接去Github上的项目地址点击code，然后选择Download ZIP然后解压到Blog文件夹也是可以的

绑定Github

先在本机生成ssh密钥

1
ssh-keygen -t rsa

会生成两个文件秘钥 id_rsa 和公钥 id_rsa.pub在.ssh文件夹下，生成在下面的目录

1
2
3
Linux 系统：~/.ssh
Mac 系统：~/.ssh
Windows 10 ：C:/Users/ASUS/.ssh

在github主页点右上角的Setting，点击 SSH and GPG keys，再点击 New SSH key，将复制的公钥 id_rsa.pub 的内容粘贴到 key 内，再点击 Add SSH key。
在 Git Bash 中输入 ssh -T git@github.com 进行检验，输入yes，有successfully字样则为成功。再设置自己的用户名和邮箱，用于后续提交文件到仓库

1
2
git config --global user.name"username"
git config --global user.email"***@***.com"

使用Github Action自动部署

不管是哪种方式都需要用到GitHub Personal Access Token

Hexo源码与前端源码在同一个仓库

先新建一个仓库，仓库名为”用户名.github.io”，设置为公开，勾选初始带有readme.md文件。
在Blog文件夹右键选择Git Bush Here，输入clone命令来进行克隆

1
git clone https://github.com/username/username.github.io.git

然后输入以下命令

1
2
3
git add .
git commit -m "提交信息"
git push -u origin main

第一次提交需要输入密码，验证成功后检查是否成功上传了Blog内的文件到仓库中。
使用 node --version检查电脑上的node.js版本，并记下。在仓库的Setting -> Secrets and variables -> Action配置变量ACCESS_TOKEN，值为你的Personal access tokens
在仓库的.github文件夹下新建workflows文件夹，在里面新建一个yml文件(如pages.yml)并在里面输入以下内容，把20替换为你记下的版本号(如你的版本号为v21.x.y就替换为21)

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
name: Pages

on:  
  push:   #触发方式
    branches:
      - main #触发的分支

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3 #拉取源码
        with:
          token: ${{ secrets.ACCESS_TOKEN }}
          submodules: recursive
      - name: Use Node.js 20.x #安装Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '20'
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies #安装组件
        run: npm install
      - name: Build
        run: npm run build #构建
      - name: Upload Pages artifact
        uses: actions/upload-pages-artifact@v2
        with:
          path: ./public
  deploy: #部署
    needs: build
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

在储存库中前往 Settings > Pages > Source，并将 Source 改为 GitHub Actions，随便上传/修改一个文件触发Action后，前往username.github.io查看自己的页面

Hexo源码和前端源码不在一个仓库

举例：你不想被别人看到自己的Hexo源码，于是你建立了两个仓库，分别是存放Hexo源码的私人仓库和存放前端源码的公开仓库，在私有仓库完成构造后再推送到公有仓库进行部署，具体操作如下

分别创建两个仓库，私人仓库命名随意，内容和Hexo初始化文件应当大致相同。公开仓库命名为username.github.io
在私人仓库的Setting -> Secrets and variables -> Action配置变量ACCESS_TOKEN，值为你的Personal access tokens。
在仓库中建立.github/workflows/pages.yml 输入以下内容(将node.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
name: Pages

on:
  push:
    branches:
      - main 

jobs:
  blog:
    name: build and deploy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js v20
        uses: actions/setup-node@v2
        with:
          node-version: '20'
      - name: Cache NPM dependencies
        uses: actions/cache@v2
        with:
          path: node_modules
          key: ${{ runner.OS }}-npm-cache
          restore-keys: |
            ${{ runner.OS }}-npm-cache
      - name: Install Dependencies
        run: |
          npm install -g hexo-cli
          npm install
      - name: Generate files
      # 编译 markdown 文件
        run: |
          hexo clean
          hexo generate
      - name: Deploy hexo blog
        env: 
          # Github 仓库
          GITHUB_REPO: github.com/username/username.github.io
        run: |
          cd ./public && git init && git add .
          git config user.name "username"
          git config user.email "xxx@xxx.com"
          git add .
          git commit -m "GitHub Actions Auto Builder at $(date +'%Y-%m-%d %H:%M:%S')"
          git push --force "https://${{ secrets.ACCESS_TOKEN }}@$GITHUB_REPO" master:master

前往公开仓库Setting->Pages->Source把分支从main改为master，至此大功告成。