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

目次

  1. 1. これまで
  2. 2. どこでビルドするのか
  3. 3. GitHub Actions の料金について
  4. 4. GitHub Actions の設定
    1. 4.1. 設定ファイル
      1. 4.1.1. .github/actions/setup/action.yml
      2. 4.1.2. .github/workflows/deploy.yml
    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環境の話です)

ちなみにこのブログのソースはprivateで管理していますが上限は2000分/月あるのでNetlifyの300分と比べたら余裕です。

GitHub Actions の設定

設定ファイル

deploy.ymlに全部記述しても良いですが、Node.jsのセットアップとYarnインストールは使いまわしがきくので、compsite action を利用して別アクションにしてます。

.github/actions/setup/action.yml

Node.jsとYarnまわりの初期設定を行います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
name: Setup
description: Initialize develop env.
runs:
using: composite
steps:
# Node.js セットアップ
# setup-node@v2からキャッシュが指定できるようになったみたい。
# https://github.blog/changelog/2021-07-02-github-actions-setup-node-now-supports-dependency-caching/
- name: Use Node.js 16.x
uses: actions/setup-node@v2
with:
node-version: '16'
cache: yarn

# 必要なパッケージのインストール
# --frozen-lockfileについてはこちら
# https://stackoverflow.com/questions/58482655/what-is-the-closest-to-npm-ci-in-yarn
- name: Install dependencies
run: yarn install --frozen-lockfile
shell: bash

.github/workflows/deploy.yml

テストとデプロイを行います。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
name: Deploy CI

on:
push:
branches:
- master
workflow_dispatch:

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

# 前述で作成したアクションをここで呼んでいます
- name: Setup Node.js and Yarn
uses: ./.github/actions/setup

- 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: Setup Node.js and Yarn
uses: ./.github/actions/setup

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

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

- name: Install Netlify-CLI
run: yarn global add netlify-cli

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

実行結果は以下のとおりです。

actions.png

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

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

1
2
3
4
- name: Update theme
run: |
git submodule init
git submodule update

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

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

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

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

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

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

1
ntl deploy --dir=./public --prod --message "$(git log --format='%s' -1)"

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

注意

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

auto-build.png

参考

大筋は下記を参考にしています。圧倒的感謝m(__)m

スポンサーリンク