memorandum
タグ
言語

VuePress で正しい最終更新日を表示する

2021/02/10
2021/02/21
VuePress GitHub Actions

ローカルでビルドしている限りは問題なかったのだが、 GitHub Actions でビルドして Firebase Hosting にデプロイするように変更したところ、最終更新日が現在日時になってしまったので対処した。

何が起きたか？

デプロイしたブログを確認してみると、日付がおかしいことに気づいた。
トップページにすべて同じ日付が表示されている。
ページ一覧にも手を入れていたのでそれを疑ったが、各ページを表示してみてもすべて同じ日付になっている。

ローカルでは正しく表示されているので、ビルド周りがおかしいと考えた。

@vuepress/plugin-last-updated を確認

@vuepress/plugin-last-updated のソースコードを確認して、最終更新日が git log -1 --format="%at" というコマンドから取得されているということがわかった。
しかし、 git の pretty formatsなどを見ても、現在時刻が取得されるようには見えない。

actions/checkout を確認

とはいえ、ローカルとの差分があるとなると git repository に差分があるのだろうと考えて actions/checkout の action を確認してみると、デフォルトでは fetch-depth が 1 になっているようで、履歴がフェッチされていないらしい。
履歴がないため、記事の Markdown ファイルの author date (%ai) も取得できていなかったようだった。

以下のように fetch-depth に 0 を指定することで履歴が取得できるようになった。

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

このリポジトリが大きくなってきたらビルドが遅くなることもあるかもしれないが、それはそのときに考える。

日付の形式を修正

さらに、CI でビルドすることによってタイムゾーンも Asia/Tokyo でなくなり、不自然な日付を表示してしまうようだったので、指定するようにした。

dayjs を使って、.vuepress/config.js に @vuepress/plugin-last-updated を以下のように指定。

[
  '@vuepress/last-updated',
  {
    transformer: (timestamp, lang) => {
      const dayjs = require('dayjs')
      const utc = require('dayjs/plugin/utc')
      const timezone = require('dayjs/plugin/timezone')
      dayjs.extend(utc)
      dayjs.extend(timezone)
      return dayjs(timestamp).tz('Asia/Tokyo').format('YYYY/MM/DD HH:mmZ')
    }
  }
],

これで最終更新日は 2021/02/05 00:28+09:00 のような形式で出力される。
タイムゾーンを指定しているので、選択した言語や実行環境によらず日本時間で表示される。
(ブログの日付にしては細かすぎるけど 😇)

© 2010 ksoichiro