ブログをGatsby.jsに移行した

はじめに

ブログのシステムをHexoからGatsby.jsに移行したのでメモです。

新機能

OSのダークモードに対応しました。 右上のボタンを使ってモードの切替も行えます。

画像のデバイス幅に応じたサイズの出し分け、そして画像の圧縮が行われています。 画像のLazy loadの機能も追加されています。

これまでは記事の個別ページのURLに日本語が含まれていたため、TwitterでURLを共有すると残念なことになっていました。 記事のURLを英数に変更したため、そのような問題も解消されているはずです。 昔の日本語のURLからはリダイレクトされるように設定してあるはずです。

制作にあたって参考にしたサイト

Gatsby.jsでのサイトづくりには次のサイトを参考にしました。

• Gatsby.js Tutorials | GatsbyJS
• Gatsbyプラグイン45選 - Qiita
• Gatsbyにページネーションを実装する | Glatch Tech
• Gatsby.jsで年ごと、月ごとで記事一覧を表示したい - Qiita

Gatsbyに移行してビルド時間が伸びました。過去の記事を一括でGatsbyでビルドしようとすると、画像が大量にあることもあって1時間ちょっとかかりました。Netlifyのビルドの上限である15分に収まらないので、ビルド自体はCircle CIで回して、Netlify CLIでデプロイを行うようにしました。この辺については次の記事が参考になります。

• Netlify へ CLI デプロイで、CI/CD する | Articles | Riotz.works
• circleciでビルドしたあとにnetlifyへデプロイしてみた|sitateru tech blog

おわりに

画像の圧縮とlazy loadでサイトの体感速度が多少はマシになったと思います。

記事のURLの変更をしたので、リンク切れ等があった場合はTwitter等で連絡をください。 基本的に新しいURLにリダイレクトされるように設定してあるはずではあるのですが……。