gan0803.dev

GatsbyJSで作ったブログのテーマを変更した作業メモ

公開日: 2021年01月04日最終更新日: 2022年01月28日

GatsbyJSで作っているこのブログのテーマを変更しました。

テーマの変更というか、一度まっさらの状態から始め直してテーマを適用しました。
そこに記事を引っ越してきて、パスが変わってしまったことに対応するためのリダイレクト設定を入れています。
shadowingについては1箇所だけ、adsense手動設定で広告を表示するために適用しました。

ここではテーマを変更の手順や作業内容を残しておきます。

テーマ変更の理由

テーマを変更したいと思ったのは以下の理由と、改造の手間をそこまで掛けたくないという気持ちからでした。

  • shadowingしすぎてテーマプラグインのアップデートに追随する手間が許容範囲を超えてしまった。
  • 見た目（デザイン、タイポグラフィ、フォント、配色）が好みとずれている。
  • 欲しい機能（タグ、連続記事）が付帯していない。

きっかけはKotlinコードのシンタックスハイライトができないことでした。

AndroidのコードはKotlinで記載しているため、無視できない問題です。
最初はKotlinのシンタックスハイライトはprismjsが対応しているのでgatsby-remark-prismjsをアップデートすればいいだろうと考えていました。

しかし、gatsby-remark-prismjsのアップデートができませんでした……（gatsby-theme-blogのバージョンをそのままにgatsby-remark-prismjsだけをアップデートすることができませんでした）。

テーマプラグインのバージョンアップでshadowingしていたコードが大きく変更されており、新たにshadowingし直す必要がありました。
自分がshadowingしていた範囲が広かったのと、テーマプラグインの変更が大きかったため、ほとんどshadowing作業をやり直す必要がありました。
また、テーマプラグインをforkしていればもう少し自由が聞いたと思うのですが、それもしていませんでした（理解していませんでした）。

以前書いた記事でGatsbyJSの公式ドキュメントの記載に触れたように、大量のコンポーネントをshadowingするような場合は、そのテーマをforkして改造したほうがよい可能性があります。 そして、できるならば自分でテーマプラグインを作ったほうが良いと思います。

テーマ変更作業

長期休暇になったらテーマを変更するぞ、と思っていてようやく年末になりました。
まずは作業の洗い出しです。

  • テーマプラグインの選定
  • 変更箇所の洗い出し
  • 許容できる方針変更
  • 対応方法の調査

テーマプラグインの選定

まずはテーマの選定です。
ゼロから自分で作れたら良いのですが、現時点では知識的にも時間的にもハードルが高いため、上記の不満を解決するテーマプラグインを探します。
これについては長期休暇までの間で調べ物ついでに、GatsbyJSで作られたサイトを見てあたりをつけていました。

たまたま見つけたCrudzooというサイトが、 gatsby-crudzoo というテーマを公開してくださっていたのでありがたく利用することにしました。
デザインもよく、見やすいし、欲しい機能もそろっています。開発者のhidekazooさんに感謝です。

変更箇所の洗い出しとテーマ切り替え作業

今のサイトの構造と新しく使用するプラグインの差分を確認します。
以下のような作業が必要そうです。

  • テーマの適用
  • 記事の引っ越し
  • URLのリダイレクト設定
  • faviconの適用
  • analyticsの適用
  • adsenseの適用

方針およびやることがなんとなく決まってきたら作業に移ります。

まずは gatsby-config.js の plugins にテーマを指定し、記事をコピーして格納し直します。

新しいテーマではURLの構造が異なります。手を入れずに今のままでは行けなさそうです。

いままで gan0803.dev/ 直下においていましたが gan0803.dev/blog/ に変わります。
また、英語版の記事の置き場所も gan0803.dev/en/ から gan0803.dev/blog/en に変えます。
失うほどのアクセスもないため、郷に入っては郷に従い301リダイレクトを設定することにします。

ホストに使用しているNetlifyでは、ルートにリダイレクトルールを記載した _redirects ファイルを配置しておけばOKです。
netlifyのリダイレクトについては Redirects and rewrites を、オプションの説明については Redirect options を参照してください。

やっつけ感がありますが、今回は _redirects を以下のように定義しました。

https://gan0803.dev/2020-*  https://gan0803.dev/blog/2020-:splat  301!
https://gan0803.dev/en/2020-*  https://gan0803.dev/blog/en/2020-:splat  301!

ブログ始めてから1年経っていないので、 2020- の前方一致で新しいURLに転送します。Placeholders でも行けそうです。
"*"がワイルドカードで、それに一致した内容が:splatに展開されます。
301 は Permanent redirect を表します。
最後の"!"はページの有無に関わらず強制的に転送することを表します。
このファイルを/static/_redirectsに格納することで gatsby build 時にルートディレクトリへ配置されます。

そして google analytics と google adsense を適用し、faviconも設定します。これは以前の記事で書いた内容と同じです。

所感

今回はなぜかgatsbyjs動かすのに苦労しました。 数ヶ月期間が空いてしまって、久しぶりに gatsby develop してみたら何故かエラーになったり、gatsby develop できてもページが404になったりしました。
テーマプラグインのサンプルそのまま動かしているだけなのに……。
Windows環境ではなくLinuxで試したら gatsby develop でちゃんとページは生成されますが、シェルのログがすべて空白文字になってしまう状態に……。
WSL2で試して見たらとりあえずまともに動いていました。しかし、 gatsby コマンドの立ち上がりが遅い……。

メンテナンスコストも考えてBloggerへの移行も何度か考えましたが、良いテーマが見つかったのと、いましばらくはゆる～い勉強の一環としてGatsbyJSを続けることにしました。

少し気になるところもあるので今後時間を見つけていじっていければと思っています。
英語記事と日本語記事が一緒に並んでしまっていますがi18n対応して分けたいのと、404のページを作らないとなと言うのがあります。
今後はカスタマイズするために自分で開発環境を整えてテーマプラグインをforkして開発していきたい。

Tags: GatsbyJS
©︎2021 gan0803.dev