ブログのホスティング先を変えた記事を最後に 9 ヶ月ほど更新が途絶えてしまっていた。 このままではいけないので、ブログを作り直した。こんな事をしているから停滞するのだ。note なんかを使えばもっと気軽に投稿できるようになるのはわかりきっているのだが、ブログを自分でホスティングすることに対しては強いこだわりがある。

gatsby v4
Gatsbyの記事もこれで6本目

4 年も前から少しずつアップデートをしているこのブログは、GatsbyJS のアップデートについていくのが少々しんどくなっていた。実際ちょっと手を動かしてみたものの、v4 アップデートは依存ライブラリがそこそこ終わっていてすんなりとはいかなかった。そういった理由もあり作り直しをした。基本的には公式提供で一般的にもよく用いられている gatsby-starter-blog から作っていくこととなる。移行に際してやったことを箇条書きでメモしておく。

  • gatsby-starter-blogを clone
    • 旧ブログの contents/blog をまるごとコピーする
  • reset 系以外の CSS を全部消す
    • 基本 tailwindcss で書いていく
  • og:image をセットするやつを作る
    • Markdown の YAML Front Matter で各記事のサムネイル画像を指定してやっている
  • ブログの記事のパーマリンクを /posts/{slug} に変更する
    • この辺は好み。 gatsby-(node|config).jspages/index.js を書き換える必要があった
  • RSS のリンク等を設定する
    • Feedly のフォロワーは 130 名ほどいるらしい。互換性を保たねばならない。
  • 作っていた独自コンポーネントを移植する
    • この記事の一番下にあるようなカード風リンク UI は Markdown に埋め込んだ独自タグをrehype-reactで React コンポーネントに展開する感じでやっている
  • Google Analytics とか favicon とかを引っ越したり
  • gatsby-remark-reading-time で記事読むのにかかる目安時間を表示するようにした
    • このプラグインは Gatsby 2 系にしか対応していないという警告が出る。普通に動くけど 4 系に Compatible にする PR 投げるまでやるか悩む。
  • .git を旧ブログからコピーしてガッと commit する
    • 先頭大文字のファイルが小文字に変わったことを認識できずハマってしまった

最新の GatsbyJS にアップデートできたため、次は Incremental Builds を利用して爆速で更新したくなる。しかしこのブログのホスティングに利用している Gatsby Cloud では $50/m も払わないと有効化できない。Netlify なりを利用すれば安価あるいは無料にやる方法はいくつかありそうなので、試したい。試したいが、ビルド時間を 40 秒くらい短くする前に記事を書くとか他に優先することはたくさんあると思う。

華麗なるギャツビー(字幕版)