Hexo通过Github Actions自动部署到Github Pages

当我们开发属于自己的博客时，一般来说，可以通过现有Blog框架如Hexo来实现Blog模板，然后文件资源存储在Github仓库中，最后通过Github Pages来实现Host，给外部访问。

下面来看看详细的实现步骤。

初始化Hexo项目

关于Hexo框架使用，可以参考Hexo入门

配置Github Actions

在通过Github实现部署的时候，建议是使用同一个仓库的两个分支，一个用于存储代码，一个用于部署生成后的文件
测试案例使用以下两个分支:

  • main （Github目前默认的主分支）
  • show (自建的新分支用于保存发布后的文件和配置Github pages)

创建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
name: Auto Deploy

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Node
        uses: actions/setup-node@v1
        with:
          node-version: '10.x'

      - run: npm install --no-optional
      - run: npx hexo generate --deploy

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          repository: Edward-Zhou/Meekou.Blog #更换为自己的Github仓库地址
          publish_branch: show #用于保存发布后文件的分支
          github_token: ${{ secrets.GITHUB_TOKEN }} #secrets.GITHUB_TOKEN是Gtihub仓库自带的环境变量 
          publish_dir: ./public #Hexo默认部署生成的文件
          cname: blog.meekou.cn # 用于配置Github Pages的Domain

FAQ

  • This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2
    这是package-lock.json版本不匹配的错误，可以尝试以下几种方式
    • 使用npm install --no-optional
    • 将package-lock.json添加到.gitignore,并从项目里删除package-lock.json

参考文献

hexo-deployer-git