Docusaurus と Github Actions を使って main ブランチにマージしたら自動的にページがビルドされるようにする

yumechi Advent Calendar 2023 - Adventar これの１日目です。

Docusaurus を導入してプロフィールサイトを作り始めたと前のブログで書きました。

プロフィールサイトを docusaurus に乗り換えた - 名もなき未知

CI でビルドするところはサボっていたので、CI にしとくかという気軽な気持ちでやってみました。

できたもの

https://github.com/yumechi/yumechi.github.io/blob/0.0.1/.github/workflows/deploy.yml

公式ドキュメント

https://docusaurus.io/docs/deployment#deploying-to-github-pages

公式ドキュメントを見ながら当初進めていましたが、下記の点でつまりました

yarn が前提になっているので pnpm でビルドする手順にする必要があった
- pnpm で環境構築したため
peaceiris/actions-gh-pages がうまく動かない
- Github App で作って認証されるようにしてあれこれやっていたものの、うまく動かなかった
- そのマシンユーザー不要ですよ！GitHub Appsを使ってGitHub Actionsを利用しよう
  - このあたりを参考にしてかなり進められた
  - しかし最後 git コマンドを動かしてデプロイすることが権限周りできず、そもそも git push に関する権限って何？でわからなくなってしまい、このアプローチを諦めた

問題の解決

pnpm で動くようにする

pnpm の　action-setup のものを使いつつ、 setup-node で pnpm を使えば解決できました。

具体的な部分としては下記のようになります

      - uses: pnpm/action-setup@v2
        with:
          version: latest
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'pnpm'

peaceiris/actions-gh-pages がうまく動かない

最終的にいたりついたところとして、 GitHub が公開している upload-artifact と deploy-pages を用いて実現できそうなことがわかってきました。

記事情報としては次のものが参考になりました。先人に感謝…

公開されている action として次の2つを使います。

で、こんな感じになりました。

jobs:
  build:
      # ビルドまでする
      - uses: actions/upload-pages-artifact@v2
        with:
          path: build

  # Deploy job
  deploy:
    # Add a dependency to the build job
    needs: build

    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
    permissions:
      pages: write      # to deploy to Pages
      id-token: write   # to verify the deployment originates from an appropriate source

    # Deploy to the github-pages environment
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    # Specify runner + deployment step
    runs-on: ubuntu-latest
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v3 # or specific "vX.X.X" version tag for this action

（コメントは deploy-pages のリポジトリに入ってたものそのままのものが入ったままになっていますね‥）

これでようやく main に push したら自動的にデプロイをやってくれる状況になりました。 CI でビルドできるのでこれで CodeSpaces で雑に書いて、push すれば動くようになったし結構嬉しいですね。