Deploying Hexo blogs using GitHub Actions

Better reading experience

Automatic deployment of Hexo blog

The original way to publish a blog with Hexo is to edit the file directly, but in the long run, there are the following problems:

  1. The migration is inconvenient. When writing a blog in other places, you can either run around with your notebook on your back, or copy the whole folder to the U SB flash drive and take it with you, and it is also inconvenient to synchronize the blog afterwards.

  2. The Node.js environment needs to be configured locally, and various strange problems may occur because of Node.js.

  3. Local deployment consumes resources.

Therefore, automatic deployment has become a common deployment method of Hexo blog.

CI / CD services

Common automatic deployment services include Travis CI, Netlify, Vercel, etc., but most of these automatic deployment services are not accessible in China. Token is an unsafe way to deploy to GitHub Pages. In contrast, GitHub Actions stands out: it is directly integrated with GitHub! This means that GitHub Actions can directly use the key of GitHub warehouse and push it to GitHub Pages warehouse through SSH. And GitHub Actions is fast enough. It often takes only about 30s to deploy Hexo blogs. Similarly, because it is an integrated service of GitHub, the use of GitHub Actions is simpler than other services. Just create a new file.

Use of GitHub Actions

SSH key

When using GitHub Actions, it's best to use SSH to push it to your warehouse, so we want to create a new SSH key:

ssh-keygen -f hexo-deploy-key -C "yourname.github.io"

This command will generate two files: hexo-deploy-key.pub (public key) and hexo-deploy-key (private key) in the current directory

Note: my Hexo source files are stored in the blog warehouse, and GitHub Pages are deployed in the HeliumOI.github.io warehouse. Please adjust the following configuration according to your own situation.

First, enter your page file warehouse (i.e. yourname.github.io), open Settings - > deploy keys, and add a Deploy key with arbitrary name and content of the file hexo-deploy-key.pub. Note that the Allow write access option below must be checked, otherwise the key cannot be pushed to the warehouse during deployment.

Then enter your Hexo source file warehouse, open Settings - > secrets, and add a Secret named DEPLOY_KEY. Later, we need to use the name deploy in the Workflow_ Key uses this key, and the content is the content of the file Hexo deploy key.

Workflow file

Create a new file. github/workflows/deploy.yml in the Hexo source folder. My configuration is as follows:

name: Hexo Deploy

# Listen only for changes to the master branch
on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
        # Get blog source code and theme
      - name: Checkout
        uses: actions/checkout@v2

        # Theme folder. If your theme is not git submodule, you can not configure it
      - name: Checkout theme repo
        uses: actions/checkout@v2
        with:
          repository: jerryc127/hexo-theme-butterfly
          ref: master
          path: themes/butterfly

      # Node.js 12.x is used here
      - name: Set up Node.js
        uses: actions/setup-node@v1
        with:
          node-version: '12'

      # Cache Node module to improve construction speed
      - name: Get yarn cache directory path
        id: yarn-cache-dir-path
        run: echo "::set-output name=dir::$(yarn cache dir)"

      - name: Use yarn cache
        uses: actions/cache@v2
        id: yarn-cache
        with:
          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
          restore-keys: |
            ${{ runner.os }}-yarn-

      # Installation dependency. I used the pandoc rendering page here, so I installed pandoc first and then the Node module
      - name: Install dependencies
        run: |
          wget https://github.com/jgm/pandoc/releases/download/2.10.1/pandoc-2.10.1-1-amd64.deb
          sudo dpkg -i pandoc-2.10.1-1-amd64.deb
          yarn install --prefer-offline --frozen-lockfile

      # Get the deployment private key from the previously set secret
      - name: Set up environment
        env:
          DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}
        run: |
          sudo timedatectl set-timezone "Asia/Shanghai"
          mkdir -p ~/.ssh
          echo "$DEPLOY_KEY" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts

      # Build and deploy
      - name: Deploy
        run: |
          npx hexo clean && npx hexo g && npx hexo d

Then modify the in the Hexo source folder_ config.yml:

deploy:
  type:  git
  repository:  git@github.com:yourname/yourname.github.io.git
  branch:  master
  name:  yourname
  email:  yourmail@gmail.com

Here's a problem to note: many people (including me) will keep the. Git folder in the theme directory during theme installation to facilitate updating. GitHub Actions has some problems with git submodule processing. (for the same CI system, this problem does not exist for Vercel and Cloudflare Pages). Therefore, you need to mark the submodule you use with in the Workflow file

user's experience

After the Push arrives at the warehouse, the GitHub Actions deployment blog will be triggered automatically. It will be completed in about 30 seconds. It's flying at a normal speed!

Tags: github hexo

Posted on Sun, 05 Dec 2021 06:30:10 -0500 by mvd7793