对于做个人博客的小伙伴来说 HEXO 大家肯定都是非常熟悉的吧,这是一个静态的个人博客程序,通过 HEXO + GitHub Pages 搭建免费个人博客也是很多博主的选择。但相信肯定也会有些困恼,比如博客的渲染维护太麻烦了,我要在一台新设备上写博客并推送到 GitHub Pages 还要先安装 Nodejs、HEXO 和插件?有了 GitHub Pages 完全可以放开 HEXO 专注写博客。

一、简单介绍

GitHub ActionsGitHub 的工作流,通过一个配置文件编写工作流配置,可在指定的动作(Release、Push等)触发指定的工作。

可用于程序打包、NPM发布以及本文要实现的静态博客自动化渲染推送等等……

白嫖利器……

二、效果预览

这是我的本地仓库,我并没有安装 Nodejs 环境,也没有安装 HEXO

blog本地仓库

我把修改 push 到了我的远程仓库。

push文章修改

过一会打开我的静态博客,已经自动更新渲染完成了。

Actions自动渲染后

三、源码与网页同仓库

源码与渲染后的博客网页放在同一个仓库的不同分支,本文以 master 分支为源码、pages 分支为渲染后的博客网页。

  1. 新建 .github/workflows/ 目录,目录中新建 pages.yml 文件,这是 GitHub 工作流配置的方式,本文不赘述,详细可查阅 GitHub 官方文档说明。

  2. 编写 pages.yml 工作流配置。

name: GitHub Pages CI

on:
  push:
    branches: [ master ]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3

    - name: Use Node.js 16.x
      uses: actions/setup-node@v3
      with:
        node-version: 16.x

    - name: Install Dependencies
      run: npm install

    - name: Run Build
      run: npm run build

    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@v4.3.3
      with:
        branch: pages
        folder: public
  1. 开启 Github Actions 提交存储库的权限。

Settings-Actions-General

开启读写权限

  1. 提交刚才的 GitHub Actions 配置,后面编辑文章也是直接提交源码到 master 分支,就不用本地渲染了。

这个过程可能有点长,文章多的话要等个一两分钟。

等待Actions执行

  1. 执行完成后可见 pages 分支。

Actions执行完成

pages分支

  1. GitHub Pages 绑定到 pages 分支。

Pages分支绑定

  1. 和往常一样打开 GitHub Pages 页面就可以看到博客网页了。

HEXO博客截图

四、源码与网页不同仓库

因为要作为 GitHub Pages 的仓库是要 Public 权限的,源码与网页同一个仓库的话就会导致源文件泄露,别人只要 clone 就可以把所有源文件和配置打包带走。

处于这个方面的考虑,可以将源文件和网页分为不同仓库,将源文件所在仓库设置为 Private 可以避免泄露。

本文创建了 test 仓库,用 test 仓库的 pages 分支来发布 GitHub Pages 界面。

因为不同仓库,不能直接通过 Settings 配置授权,需要生成一段 ssh-key 配置授权,如何配置 ssh 本文不赘述,需要保证 sshtest 仓库具有写入权限。

配置完 ssh 公钥后,将私钥添加到存放源文件的仓库的 secret 变量中。

添加秘钥

也支持使用 Personal access tokens,只要有 repo 的权限即可,如何配置 PAT 本文不赘述。

工作流中对 pages.yml 做如下修改即可:

    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@v4.3.3
      with:
        branch: pages
        folder: public
|+         repository-name: nineya/test
|+         ssh-key: ${{ secrets.DEPLOY_KEY }}
|+         # token和ssh-key二选一
|+         #token: ${{ secrets.DEPLY_TOKEN }}

完整的 pages.yml 配置如下:

on:
  push:
    branches: [ master ]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3

    - name: Use Node.js 16.x
      uses: actions/setup-node@v3
      with:
        node-version: 16.x

    - name: Install Dependencies
      run: npm install

    - name: Run Build
      run: npm run build

    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@v4.3.3
      with:
        branch: pages
        folder: public
        repository-name: nineya/test
        ssh-key: ${{ secrets.DEPLOY_KEY }}
        # token和ssh-key二选一
        #token: ${{ secrets.DEPLY_TOKEN }}

需要注意,公开库的分支不能和运行 actions 的分支重名,否则会抛异常。如我运行 actions 的分支是 master,公开库的分支就不能是 master 了。

master分支已存在