📖

VuePress の last-updated plugin を GitHub Actions で正しくビルドさせる

2 min read

VuePress を使ってお手軽に部署内ドキュメントを作るシチュエーションがあったのですが、GitHub Actions でビルドしてサクッと GitHub Pages にホストできたかと思ったら last-updated plugin の挙動がおかしく、意外なハマりどころでちょっと苦労したのでメモしておきます


最初に書いていた workflow はこんな感じでした

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v2

      - name: setup node
        uses: actions/setup-node@v2
        with:
          node-version: "12"

      - name: yarn
        run: yarn --frozen-lockfile

      - name: Build
        run: yarn build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./src/.vuepress/dist

gh-pages ブランチに push してくれる Action のおかげで GitHub Pages も使いやすくなったなあ…などと思っていたのですが、よく見ると last-updated plugin で表示される各ページの最終更新日時の様子がおかしいのです

  1. そもそもタイムゾーンが違うので JST からはジャスト n 時間ずれている
  2. このプラグインは当該 Markdown ファイルへの最終コミットから最終更新日時を取ってくるはずが、remote に push した日時が全ページに表示されている

タイムゾーンについてはタイムゾーンを設定する ActionAsia/Tokyo に設定すれば解決しました

      - uses: szenius/set-timezone@v1.0
        with:
          timezoneLinux: "Asia/Tokyo"

この Action の README には uses: actions/set-timezone-action@v1.1 と書かれているのに現状 v1.0 までしか存在せず、actions/ ではなく szenius/ としなければならない謎仕様で数分詰まりましたが…(これ何??)


2点目の最終更新日時については、おなじみ actions/checkout@v2 の仕様が原因でした

GitHub Actions workflow のほとんどで使われているであろうこの公式 Action ですが、HEAD からいくつ前のコミットまで fetch してくるか指定する fetch-depthというオプションがあり、デフォルトでは 1 となっています

これは要するに過去のコミットログなど完全に無視して HEAD の状態のファイルだけを取ってくる(確認したところ新たな1コミットを作るようです)ということなので、全 Markdown ファイルの最終コミットがこの日時になってしまうんですね

このオプションを 0 にすると全コミット fetch してくれるので、意図した挙動になります

      - uses: actions/checkout@v2
        with:
          fetch-depth: "0"

なんとなく全コミット取ってきてくれるものと勝手に思い込んでいたんですが、actions/clone ではなく actions/checkout なのを考えると確かにそりゃそうかと思ったりしました


最終的な workflow としてはこんな感じです

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-20.04
    steps:
      - uses: szenius/set-timezone@v1.0
        with:
          timezoneLinux: "Asia/Tokyo"

      - uses: actions/checkout@v2
        with:
          fetch-depth: "0"

      - name: setup node
        uses: actions/setup-node@v2
        with:
          node-version: "12"

      - name: yarn
        run: yarn --frozen-lockfile

      - name: Build
        run: yarn build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./src/.vuepress/dist

Discussion

ログインするとコメントできます