選定
3年近く利用していたWordpressからGatsby.jsに移行しました。
Gatsby.jsを選定した理由は主に3つあって
-
持ち運び可能な状態で(Markdown形式)で記事データを持ちたい
-
サーバー代を安くあげたい
-
表示速度を上げたい
という理由でした。
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を実現しました。
環境を整えたりカスタマイズをするには学習コストがかかるので、気軽には始めれないですが気合でウォーってできる方はぜひおすすめです。