まえがき
Hexo blog をデプロイするときは、hexo g で Markdown ファイルを HTML に変換し、hexo d で公開ファイルを Github リポジトリにプッシュし、git で Hexo blog の開発ソースコードをリポジトリの別のブランチにプッシュしてバックアップします。このように行ったり来たりするのはちょっと面倒です。GitHub Actions を使えば、事前に自動化スクリプトを書いておくだけで、Hexo ブログの開発用ソースコードを指定したブランチにプッシュすると、GitHub Actions が自動的に HTML ファイルを生成して GitHub Pages に公開してくれます。
ここでは、GitHub Actions を使って Hexo ブログのデプロイを自動化する方法を紹介します。
GitHub Actions
GitHubが2018年10月に開始した継続的インテグレーションサービスです。
GitHub Actionsの仕組み：自動化が必要なタスクのスクリプトを事前に設定した後、GitHub Actionsは特定のアクションがないか現在のリポジトリを監視し、そのようなアクションがあれば、それらのタスクの実行を自動化するための仮想ホストを割り当てます。
設定されたタスクは Action と呼ばれ、プロジェクトのルートディレクトリの .github/workflows ファイルに .yml という接尾辞で格納されます。 Action はワークフローのワークフローに相当し、ワークフローは複数のタスクを持つことができ、それぞれがいくつかのステップに分かれて順番に実行されます。
GitHub Actions についての詳細は、 Getting Started with GitHub Actions - Yifeng Nguyen または GitHub Actions ウェブサイト を 参照ください。
作業の準備
GitHub リポジトリ
{{username}}.github.io まず最初に、ブログをデプロイするためのリポジトリを用意する必要があります。通常、このリポジトリには 、 のような名前のブランチを作成し、Hexo の開発用ソースコードを保存します。私の場合は、hexo-blog-backup ブランチを使って Hexo の開発用ソースコードをバックアップし、master ブランチを使ってブログのソースコードをデプロイしています。
覚えておいてほしいのですが、ブログと Hexo のソースコード用に 2 つのリポジトリを作成することもできます。
GitHub パーソナルアクセストークンの作成
GitHub Actions がコンテンツをリポジトリにプッシュするために構築する仮想システム用の Personal Access Token も作成する必要があります。
Personal Access Token の作成方法については、 を参照ください。
リポジトリシークレットの設定
作成したPersonal Access TokenをリポジトリのSecretsに追加し、図のように名前を設定します：
プロジェクトのルートディレクトリに .github/workflows フォルダを作成し、その中にワークフロースクリプトを記述するための YAML ファイルを作成します。
スクリプトの内容は以下の通りです：
name: Blog CI/CD
# トリガー: hexo-blog-backupブランチにプッシュした後にトリガーされる。
on:
push:
branches:
- hexo-blog-backup
env:
TZ: Asia/Tokyo
jobs:
blog-cicd:
name: Hexo blog build & deploy
runs-on: ubuntu-latest # コンパイルとデプロイの環境として、最新のUbuntuシステムを使う。
steps:
- name: Checkout codes
uses: actions/checkout@v2
- name: Setup node
# ノードのセットアップ.js
uses: actions/setup-node@v1
with:
node-version: '12.x'
- name: Cache node modules
# パッケージキャッシュディレクトリを設定して毎回ダウンロードしないようにする
uses: actions/cache@v1
with:
path: ~/.npm
key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
- name: Install hexo dependencies
# hexo-cli scaffoldingと関連するインストールパッケージをダウンロードする。
run: |
npm install hexo-cli gulp -g
npm install
- name: Generate files
# マークダウンファイルをコンパイルする
run: |
hexo clean
hexo generate
- name: Execute gulp task
run: gulp
- name: Deploy hexo blog
env:
# Github
GITHUB_REPO: github.com/yifanzheng.github.io
# Coding
CODING_REPO: e.coding.net/yifanzheng/blogs.git
#
_REPO: .com/yifanzheng/yifanzheng..io
# コンパイルしたブログファイルを特定のリポジトリにプッシュする。
run: |
cd ./public && git init && git add .
git config user.name "yifanzheng"
git config user.email "zhengyifan1996@outlook.com"
git add .
git commit -m "GitHub Actions Auto Builder at $(date +'%Y-%m-%d %H:%M:%S')"
git push --force --quiet "https://${{ secrets.ACCESS_TOKEN }}@$GITHUB_REPO" master:master
git push --force --quiet "https://RoYFbFDSfM:${{ secrets.CODING_TOKEN }}@$CODING_REPO" master:master
git push --force --quiet "https://yifanzheng:${{ secrets._ACCESS_TOKEN }}@$_REPO" master:master
ワークフローの詳しい構文については、 を参照ください。
上記のスクリプトは、パートナー様の実情に応じて、独自のスクリプトを作成することができます。
デプロイ
最後に、指定したブランチにソースコードをプッシュすれば、GitHub Actions が自動的にプロジェクトのデプロイを手伝ってくれます。
- GitHub 公式のアクション
- GitHub GitHub の公式マーケットプレイスにあるアクション：
- サードパーティによる便利なアクション集:
