はじめに
Next.js + GitHubPagesで静的サイトを公開する設定 については以前記事にしましたが、yarn exportによる書き出し自体は自動化していませんでした。
今回は、以前の設定に加えて、push時に書き出しを自動化するところまで踏み込もうと思います。
GitHub Actionsとは
GitHub Actoinsを使うと、プッシュ、Issue、リリースなどのGitHubプラットフォームのイベントをトリガーとしたワークフローが作成できます。
設定はものすごく簡単で、.github/workflowsディレクトリにymlファイルを入れておくだけです。
GitHub Actions + Next.jsの前例を探す
というわけで、早速ymlの書き方を調べようと思ったのですが、絶対に同じことをやっているひとがいるはずなので調べました。
すぐに見つかりました。
この人の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
ざっくり書きました。
- masterへのpushをトリガーにする
- yarn exportを走らせる
- docs以下をgh-pagesにコミットしてプッシュする
という感じで設定しています。
なので、GitHubPagesは gh-pagesブランチ の ルート を公開するように設定しましょう。
そうなると、export先をoutからdocsに変更した意味がゼロなんですが、まあ、それはそのままで良しとします。