Gatsbyバージョンアップ（v2 to v5）

2023/04/06

なにこれ

ブログについて以下２点改修したので備忘録を残します。

忘れていたり古くなった私のGatsbyの知識をアップデートするため、 package.jsonのライブラリ更新ではなく、npm init gatsby blog -- -y -tsでアプリを新規作成して、必用な機能だけ移行する形を取りました。

ここではライブラリのバージョンアップだけではうまく行かない点について列挙します。

画像を扱うライブラリが大きく変わっていました。いずれも公式サイトに従って書き換えました。

またgatsby-background-imageはGitHubのissueで記載があるようにGatsby V5の場合はビルドエラーが出ます。やむをえずnpm ciやnpm i実行時は--legacy-peer-depsを付与しています。

- import { css } from '@emotion/core'
+ import { css } from '@emotion/react'

またtsxファイルでcss属性に対してエラーが出るようになったので、Emotionの公式サイトを参考にeslintrc.jsのruleに以下追加しました。

eslintrc.js

{
  "rules": {
+    "react/no-unknown-property": ["error", { "ignore": ["css"] }]
  }
}

改修過程で記事投稿に関係のないプロフィールのような付加価値的な機能と、ビルド時間が増大する機能については、移行しないことにしました。当時はフロントエンドのスキル情報のためのプレイグラウンドとして色んな機能を実装していましたが、今は技術調査結果や読後レポートを公開する場として使いたいからです。

これまではQiita連携のプラグインを使っていましたが、以下理由から廃止しました。

当時気張って作ってみたものの、普段の記事作成作業の生産性を下げるので廃止しました。

これらも当時気張って作ってみたものの廃止しました

上３つの廃止に伴いビルド時間も短縮されました。当時ビルド時間短縮のために導入していた本機能も、Google Cloudとの連携といった煩わしさがあったので今回を機に廃止しました。

以下理由から廃止しました。

GitHub Actionsに乗り換えました

Renovate（リポジトリで利用しているライブラリのバージョンアップを自動でしてくれるツール）は廃止しました。放っておくとプルリクが溜まり続けるので、１人で長期間メンテするリポジトリの場合は手動が良いと感じました。

ダークモード切り替え：gatsby-plugin-dark-modeを使っていましたが、TypeScriptのlint errorを解消するため@skagami/gatsby-plugin-dark-modeに移行しました。
サイトマップ作成：gatsby-plugin-sitemap
マークダウン表現拡張：現状維持でプラグイン郡を使っています
クエリからの型自動生成：gatsby-plugin-typegenを使っています
文字スタイルテンプレート：gatsby-plugin-typography、テンプレートはtypography-theme-wordpress-2016を使っています
manifestファイル作成：gatsby-plugin-manifest