選定

３年近く利用していたWordpressからGatsby.jsに移行しました。

Gatsby.jsを選定した理由は主に３つあって

1. 持ち運び可能な状態で（Markdown形式）で記事データを持ちたい

2. サーバー代を安くあげたい

3. 表示速度を上げたい

という理由でした。

Gatsby.jsはReact.jsでレンダリングする静的サイトジェネレーターで、プラグインを入れることによってMarkdown形式のレンダリングも行ってくれます。

また、Netlifyがビルドとホストを担当しています。GithubとNetlifyが紐付いてて、コミットに対応して自動でビルドとホストもやってくれます。しかも、転送量が100GB/月までは無料プランなので、すごい・・・！(ビルド時間は300分/月！)

静的サイトになると表示速度も上がるとのことだったので、スコアも撮ってみました。

以降前は65だったスコアが88になっていました。

初期表示の秒数は、4.0秒→2.7秒、で利用可能な秒数は5.7秒→4.0秒でした。

移行に際しての注意点

Material UIを利用した際には初期表示のスタイルがずれるので、専用のプラグインが必要でした。(gatsby-plugin-material-ui)

ただし、初期表示を遅らせることになるので（1.8秒ロックがかかっている）表示速度を気にする場合はもうちょっと工夫が必要そうです。

ページネーションは別途実装が必要でした。

移行について

ワードプレスからMarkdown形式にエクスポートするプラグイン『WP Gatsby Markdown Exporter』があったのでそちらを利用しました。

frontmatterの形式のパスがpermalinkという名称になっているので、そこはpathに修正しました。

また、埋め込みリンクやテーブルのHTMLは完全にエクスポートできないので、妥協してHTML表示にするか、別途置き換えが必要です。

今回は妥協してそのまま表示にしています。

表示秒数も短くなって、Netlifyへの移行で維持費も安くなり、最近流行りのJAMStackを実現しました。

環境を整えたりカスタマイズをするには学習コストがかかるので、気軽には始めれないですが気合でウォーってできる方はぜひおすすめです。