Next.jsで作った静的ウェブサイトをGitHub Pagesで公開するためのGitHub Actionsをつくる 🔨

f:id:kimizuka:20210103011013j:plain

はじめに

Next.js + GitHubPagesで静的サイトを公開する設定については以前記事にしましたが、yarn exportによる書き出し自体は自動化していませんでした。

blog.kimizuka.org

今回は、以前の設定に加えて、push時に書き出しを自動化するところまで踏み込もうと思います。

GitHub Actionsとは

github.co.jp

GitHub Actoinsを使うと、プッシュ、Issue、リリースなどのGitHubプラットフォームのイベントをトリガーとしたワークフローが作成できます。
設定はものすごく簡単で、.github/workflowsディレクトリにymlファイルを入れておくだけです。

GitHub Actions + Next.jsの前例を探す

というわけで、早速ymlの書き方を調べようと思ったのですが、絶対に同じことをやっているひとがいるはずなので調べました。

medium.com

すぐに見つかりました。
この人のymlを参考に作成していきましょう。

ymlを書く

name: gh-pages

on:
  push:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: ./src
    steps:
      - name: checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false
      - name: cache
        uses: actions/cache@v2
        with:
          path: ${{ github.workspace }}/.next/cache
          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/yarn.lock') }}
      - name: setup node
        uses: actions/setup-node@v1
        with:
          node-version: 'v14.15.0'
      - name: install
        run: yarn install --frozen-lockfile
      - name: export
        run: yarn export
        env:
          CI: true
      - name: deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_branch: gh-pages
          publish_dir: ./docs

ざっくり書きました。