tips / gatsby

WordPressから静的サイトジェレネーターGatsbyへ移行

Reactの勉強中に静的サイトジェレネーターのことを知り、React.jsベースのものもあったので、勉強をかねてWordPressからGatsbyへ移行しました。

移行作業

  • Gatsbyの開発環境を整える
    公式サイトのTutorialsを見ながら進めました。
  • Starterを基にサイトを作成する
    GatsbyにはWordPressのテーマにあたるStarterが用意されていました。そのままリリースできそうな完成されたものから、カスタマイズ用のシンプルなものまで様々です。今回はGatsby Advanced Starterを選びました。トップ(記事一覧)と記事詳細ページのみのシンプルな構成ですが、カテゴリーやタグ、シェアボタンなど必要な機能が揃っています。このStarterをベースにページの追加やCSS・レイアウトの調整などを行いました。
  • WordPressの記事データをダウンロードしてMarkdown形式に変換する
    自動ではうまくいかず、幸い記事数も少なかったので、HTMLからMarkdownに変換するサイトを利用しながら記事の体裁を整えました。
  • サーバーへアップロード
    一旦は元々使用していたサーバーで公開しましたが、記事更新の都合でNetlifyを使用することにしました。

移行作業に関しては、Reactの概要やチュートリアルなどフロントエンドの参考になる記事をたくさん書かれているTania Rasciaさんの記事「The End of an Era: Migrating from WordPress to Gatsby」を参考にしました。

移行してみて

Lighthouseで移行前と移行後に計測した結果です。
どの数値も上がりました。一番数値の低かったPerformanceはほぼ100に近くなり、SEOは満点です。

移行前
移行前

移行後
移行後

まだ追加したいページや機能がいくつかあるので、記事と同時進行で少しずつ改修していく予定です。

View All