GitHub Actions depoly Hexo

前言: 最近换了Mac,之前在Windows上写博客是基于本地配置好的一个hexo渲染引擎,迁移到Mac着实花费了不少精力(主要是学习和回顾,好久没折腾hexo了),结论是本地维护一个这样的渲染环境很麻烦也不易迁移。因而有了这篇文章从另外一个角度来实现hexo博客更快的部署和维护。

GitHub Actions

  • 概念

    • GitHub推出的持续集成服务(CI)

    • 持续集成包括:抓取代码、运行测试、登录远程服务器,发布到第三方服务(Actions)

    • 每个操作写成独立的脚本文件

    • 持续集成过程,变成 actions 的组合

  • 术语

    • workflow (工作流程):持续集成一次运行的过程,就是一个 workflow。

    • job (任务):一个 workflow 由一个或多个 jobs 构成,含义是一次持续集成的运行,可以完成多个任务。

    • step(步骤):每个 job 由多个 step 构成,一步步完成。

    • action (动作):每个 step 可以依次执行一个或多个命令(action)。

  • workflow 文件

    • 放置.github/workflows

    • YAML格式,后缀.yml

    • 配置文档 https://help.github.com/en/articles/workflow-syntax-for-github-actions

    • 基本字段:name、on、jobs、runs-on、steps

    name: Greeting from Mona
    on: push
    
    jobs:
      my-job:
        name: My Job
        runs-on: ubuntu-latest
        steps:
        - name: Print a greeting
          env:
            MY_VAR: Hi there! My name is
            FIRST_NAME: Mona
            MIDDLE_NAME: The
            LAST_NAME: Octocat
          run: |
            echo $MY_VAR $FIRST_NAME $MIDDLE_NAME $LAST_NAME.

Hexo迁移及部署至GitHub Pages

刚开始以为迁移Hexo博客很麻烦,实际上操作起来很方便没有想象中的那么困难

一、 迁移Hexo

  1. 将Windows下的hexo博客目录整个打包下

  2. 在macOS上解压,cd到博客目录下

  3. (安装node)执行npm -i -g hero-cli, npm -i

  4. 生成静态页面hexo g , 本地查看hexo s

  5. 生成并部署至GitHub pages hexo g -d

二、 使用GitHub Actions自动化部署

  1. 创建GitHub repository 存放源文件

  2. 在repo设置界面里添加Secrets(本地生成一对公私钥ssh-keygen,这里填上私钥,命名为 ACTION_DEPLOY_KEY(可以任意命名,但要和Actions里的设定${{ secrets.ACTION_DEPLOY_KEY }}对应))

  3. 在存放GitHub pages的repo设定Deploy keys为刚生成的公钥

  4. 在根目录下创建GitHub Actions workflow文件

note-ci.yml(.github/workflows/note-ci.yml)

name: Build and Update Note.junyangz.com for github pages

on: push

jobs:
  build:
    runs-on: macOS-latest

    steps:
      - uses: actions/checkout@v1
      
      - name: Use Node.js 10.x
        uses: actions/setup-node@v1
        with:
          node-version: "10.x"

      - name: Setup Hexo env
        env:
          ACTION_DEPLOY_KEY: ${{ secrets.ACTION_DEPLOY_KEY }}
        run: |
          # set up private key for deploy
          mkdir -p ~/.ssh/
          echo "$ACTION_DEPLOY_KEY" > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          # set git infomation
          git config --global user.name 'Junyangz'
          git config --global user.email 'junyangz.iie@gmail.com'
          # install dependencies
          npm i -g hexo-cli
          npm i

      - name: Deploy
        run: |
          # generate and depoly
          hexo g -d
  1. 移除不必要的文件夹node_modules和public

  2. 坑1: themes下面的主题文件material当时使用的git clone拉取的,在上层源目录添加的时候会被提示material已经存在一个repo要不要使用submoudle添加,具体详细信息后面查了下可以参考这篇文章

  3. 坑2: 由于我使用的主题material文件是个git库,.gitignore文件里面有主题配置文件_config.yml,导致一开始的时候GitHub Action总是部署不成功,后来发现推到GitHub上的库里没有主题配置文件,手动git add提示被忽略,这才发现了问题,强制git add -f解决。

三、使用GitHub Actions部署本篇文章

  1. 有了之前的实践后续就很简单了,首先将使用markdown写的本篇文章调整为hexo post的格式(在行首添加如下描述,可用hexo new post生成)

---
layout: pages
title: GitHub Actions部署Hexo博客
date: 2019-09-17 11:03:21
categories:
 - Tutorial
tags:
 - GitHub Actions
 - Hexo
---
  1. git add, git commit, git push

  2. Github Actions -> Github Pages -> 当前页面

参考文章

Last updated