サイトのビルドをGitHub Actionsで行うように変えました

目次

  1. 1. これまで
  2. 2. どこでビルドするのか
  3. 3. GitHub Actions の料金について
  4. 4. GitHub Actions の設定
    1. 4.1. 設定ファイル
    2. 4.2. 補足1. サブモジュールについて
    3. 4.3. 補足2. タイムゾーンについて
    4. 4.4. 補足3. デプロイコマンドについて
  5. 5. 注意
  6. 6. 参考
スポンサーリンク
GitHub Actions

このサイトは以前にもお伝えしましたとおり Hexo という静的サイトジェネレータを使って作っています。作ったサイトは Netlify というホスティングサービスを利用して公開しています。基本的にはそれは変わりないのですが、途中経過を少し変えたので今日はそんな話をしてみます。

これまで

  1. ブログ記事をマークダウンで書く
  2. GitHub へ push
  3. Netlify が記事の追加・変更を検知して再ビルドを実行
  4. Netlify に公開

という流れでした。一番ベーシックな使い方です。静的サイトジェネレータというものはその名のとおり静的なサイトを作成してくれるツールですが、そのサイト作成を Netlify というホスティングサービス側で行っています。3のビルドがそのサイト作成にあたります。つまり更新のたびにサイトが丸っと作り直されます。

問題は Netlify の無料プランだとビルド時間に制限があり、それが 300分/月 までとなっています。

1回のビルドにかかる所要時間は私のサイトの場合だと1分強ぐらいです。なので200回くらいは余裕でpushできるはずなんですが少し不安なので Netlify 側でのビルドをやめよう、というのが今回の話です。

どこでビルドするのか

手元のパソコンで hexo generate を実行すると public ディレクトリ配下に各静的ページが生成されます。これを丸っと Netlify に送信すればビルドにかかる時間は一切カウントされなくなります。送信は netlify-cli を使えば簡単にできます。

ただ、毎回自分のパソコンでビルドするのは面倒なので GitHub Actions にやらせます。GitHub Actionsでビルド前にテストを実行したい場合もあるのでいろいろと都合が良いです。ちなみに私の場合は markdownlint を実行してパスした場合のみビルド→デプロイを行うようにしています。

GitHub Actions の料金について

publicリポジトリなら無料で使い放題です。
privateリポジトリでも1アカウントごとに 2000分/月 までは無料です。(Linux環境の話です)

GitHub Actions の設定

設定ファイル

Hexoプロジェクト配下に .github/workflows/deploy.yml を作成して、内容を下記のようにしています。

name: Deploy CI

on:
push:
branches:
- master
workflow_dispatch:

jobs:
# デプロイの前にテストを実行
# これがコケた場合デプロイは行われない
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2

- name: Use Node.js 16.x
uses: actions/setup-node@v2
with:
node-version: '16'
cache: yarn

- name: Install dependencies
run: yarn install --frozen-lockfile

- name: Markdownlint
run: |
yarn run mdlint

# ビルドとNetlifyへのデプロイ
build_and_deploy:
runs-on: ubuntu-latest
needs: test
steps:
- uses: actions/checkout@v2

- name: Update theme
run: |
git submodule init
git submodule update

- name: Use Node.js 16.x
uses: actions/setup-node@v2
with:
node-version: '16'
cache: yarn

- name: Install dependencies
run: yarn install --frozen-lockfile

- name: Install Hexo
run: yarn global add hexo-cli

- name: Build
run: TZ=Asia/Tokyo hexo generate

- name: Deploy to Netlify
run: npx netlify-cli deploy --dir=./public --prod --message "$(git log --pretty=format:'%s' -1)"
env:
NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

補足1. サブモジュールについて

私の環境の場合はテーマを別リポジトリで管理しているのでサブモジュールの更新が必要になっています。なので、テーマをhexoプロジェクト内で直接管理している人は下記の部分は不要です。

- name: Update theme
run: |
git submodule init
git submodule update

補足2. タイムゾーンについて

GitHub ActionsのコンテナではUTCがタイムゾーンになっているので、別途タイムゾーンをセットしています。(これやらないと投稿日時とURLの日時がズレます)

- name: Build
run: TZ=Asia/Tokyo hexo generate

Netlifyで同じ目にあっていたの忘れてた。

補足3. デプロイコマンドについて

私の場合は publish も同時に行いたいので --prod オプションを付けています。メッセージには最新コミットの内容を付けています。

npx netlify-cli deploy --dir=./public --prod --message "$(git log --pretty=format:'%s' -1)"

pretty formatsについてはこのへんをどうぞ。
Git - pretty-formats Documentation

注意

GitHub Actionsからデプロイするように切り替える際に Netlify 側の自動デプロイを止めておかないと二重デプロイが行われてしまうのでご注意ください。

auto-build.png

参考

下記をほぼ丸パクリしてますw圧倒的感謝m(__)m

スポンサーリンク