Hugo + Netlify の組み合わせで、記事投稿時刻にタイムゾーンを適用する

Hugo + Netlify CMS というニッチな組み合わせでの小ネタです。

記事の投稿時刻の表示について

ブログ記事の更新時刻の表記って、Hugo だとテンプレートにこんな感じで書くと思います。

<time datetime="{{ .Date.Format "2006-01-02" }}">
  {{ .Date.Format "2006/01/02 15:04" }}
</time>

で、ブログ記事の markdownファイルでは、こんな感じで投稿時刻を設定。

date: 2018-11-09 08:00:00 +0900

時刻表期に、日本時間なのでタイムゾーンを考慮して +0900 とつけるわけですね。すると無事に 2018/11/09 08:00 と表示されるわけです。

Netlify CMS で記事を作成すると

ところが Netlify CMS から記事新規を作成すると、markdown に入る date フィールドがこんな感じになりました。

date: 2018-11-04T02:00:00.000Z

タイムゾーンがつかない。世界標準時で登録されておる。

そして該当記事の画面表示も 2018/11/04 02:00 と、世界標準時のままとなりました。

うーん。日本でブログを書いているので、markdown 側にどのタイムゾーンが指定されていようと、表示時は日本時間に変換されていてほしいなあ。

タイムゾーンを考慮する

タイムゾーンを考慮して表示する方法、ありました。テンプレートを以下のように修正。

<time datetime="{{ .Date.Local.Format "2006-01-02" }}">
  {{ .Date.Local.Format "2006/01/02 15:04" }}
</time>

.Date.Format ではなく .Date.Local.Format とします。

さらに、ビルドする Netlify 側でもタイムゾーンをちゃんと指定する必要があります。日本時間と認識させたいので、Netlify の環境変数として TZ=Asia/Tokyo と設定。

できた

これで、投稿時刻のタイムゾーンが日本時間になっていない記事でも、無事に日本時間に変換して表示することができました。

めでたしめでたし。

参考リンク

gohugo.io