WordPressやめます Gatsbyに移行しました

2020-05-11
wordpressbloggatsbyreactnode.jsamazon%20aws
    

目次

概要

当ブログ tech-blog.s-yoshiki.com を WordPressからGatsby製の静的サイトジェネレータに移行しました。

「Gatsby WordPress」と調べるとWordPressのWP REST APIを利用し、フロントにGatsbyを用いる HeadlessCMSのパターンが多く見られます。

しかし、ここでやったのは完全なWordPressの脱却です。

動的な要素であるサーバは一切利用せず、記事を全てmarkdown化することでテキストベースの管理。

そして記事と関連リソースの管理は全てGitに集中させる。ということを行いました。

泥臭い作業も多く、10人日近くかかってしまい、個人レベルでは大規模炎上案件となってしまいましたが、なんとか実現できました。

その際の具体的な移行方法や苦労した部分を書いていきます。

ちなみにWordPressを批判する目的で書いてはいません。

これまでのWordPress運用

これまでは、WordPressでブログを4年間運用しており、その間、短期間ながらも管理方法をコロコロ変更してきました。

やってきたこと↓↓↓

1年目

Conoha VPS上にWordPressサーバを構築

2年目

VPSのように取り回しが効きやすいAmazon Lightsailにサーバを移行。

3年目

AWSの勉強 + 固定費を変動費に変えて費用を抑えたいと思い AWS EC2上に引越し。攻撃などを受ける。

4年目

"動" から "静" へ。WordPressのプラグインで静的ファイルを生成。Amazon S3上でホストする。

WordPressはDocker上に移行し、ローカルホストして運用。

こんなことを行ってきました。

別のCMSへの乗り換えを検討した時期もありましたが、WordPressで一度書いてしまった記事を掘りこ起こすのは想像するだけで面倒な作業だったことと、SEOが強力なテーマを利用していて他のCMSに移りずらかったのでWordPressは捨てられませんでした。

なぜWordPressを捨てるのか? なぜGatsbyを利用するのか?

まずWordPressを捨てた理由はこちらです。

  • 記事管理をWordPressの特殊タグで管理するのが苦痛
  • 記事はテキストベース + Gitで管理したい
  • 色んなプラグインを利用してきたためによる記事データの汚染が激しくなってきた
  • サーバのメンテナンスが疲れた

そしてGatsbyを選んだ理由がこちらです。

  • 静的化することでセキュリティの向上
  • 動的な要素を減らしてサーバコスト削減
  • とにかく速いらしい。Lighthouseで高いスコアを取れる

これがGatsbyへの移行の理由です。

WordPressでも静的ファイルを吐けますが(この時はWP Staticを利用していた)、とにかく時間がかかりました。

200記事で20分以上かかります。

gatsbyについて

わかりやすい解説があったので、引用

Gatsby(GatsbyJSとも)は、ReactJSで構築され、GraphQLを活用した静的サイトジェネレーターです。Gatsbyでは、誰でも機能豊富で魅力的なウェブサイトやアプリケーションを作成できます。Gatsbyは、GraphQLを使用して既存のウェブサイト、API呼び出しやフラットファイルなどのさまざまなソースからサイトのデータを取得し、指定した設定に基づいて静的サイトを構築します。

GatsbyとWordPressを使用したウェブサイト構築の概要(高速で静的) より

WordPressから記事の救出

移行対象記事の抽出

WordPressのDBから記事データを抽出する にも書きましたが、記事情報だけを取得するのであれば難しくはありません。サムネイルやタグ・カテゴリを抽出しようとすると多少は工夫が必要でした。

問題は次の作業でした。

記事の置換

抽出したデータをそのまま、markdownファイルに書き込んで表示させましたが、スタイルの崩壊が酷かったので記事データを修正していきました。

h2タグなどは##に変換。 p divタグなどは削除。 pre codeタグは```に変換後、目視でソースを確認しシンタックスハイライトを付ける。 画像のパスを張り替え。URLの変更。特殊タグ削除など

(良く考えれば、ここでWP REST APIを利用すれば良かったんですね。。。)

Gatsbyテーマの作成

Gatsbyのテーマを作成します。とは言っても1から作るのではなくgatsby-starter (お手軽に始めるための基本的なレイアウトが揃っているもの)を利用して作成していきました。

利用したのはこれ panr/gatsby-starter-hello-friend - GitHub

こんな感じになりました。

blog screenshot

Gatsbyに初めて触った時の所感

gatsby も react も初めてでしたが、コツを掴むとコンポーネントなどは簡単に実装できるようになりました。

graphqlはちょっと癖があり、filter文 (SQLでいうwhere句) などにてこずりました。

改めてWordPressとGatsbyを比較する

WordPressには4年間お世話になりましたが、豊富なテーマやプラグインそして情報量が圧倒的に多いので初心者や手軽に始めたい人を中心に今後も需要はあると思っています。

逆にGatsbyはテーマ (starter) が用意されてはいますが、最低限の部品のみを備えている場合が殆どであると思うので、ちょっとしたタグ一覧やサムネイル・年月ごとの記事一覧と言ったような機能を使うためには自作する必要があります。

こういう理由もあって、ある程度プログラムを理解できる人以外は手を出すべきではないと思います。嵌ります。

他にも静的サイトジェネレータの選択肢としてHugoやHexoなどもありましたが、今回は利用しないことにしました。

まとめ

これからも長いこと記事を書いていくつもりですが、今回使ったGatsbyもおそらく3〜4年すれば技術的な負債になっていくと思います。しかし記事をマークダウン化したことで別のプラットフォームに乗り換えていくことが容易になったと思います。そういう意味で今回の技術選定は良かったかなと思います。

以上。

※おまけ

lighthouseでパフォーマンスを測定したら、こんなのになりました

lighthouse

前よりも低下しました。

これは多分、広告を貼り付けすぎなんでしょう。

    
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

関連記事

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする
GitHub Actions について あらかじめ準備しておくもの AWS IAM ユーザを環境変数にセットする workflowの記述 ビルド バッジを利用する 終わりに 参考にしたところ Gatsbyで作った静的サイトを、GitHub Actions…

WordPressのDBから記事データを抽出する
WordPressのDB関連図 公開記事一覧の取得 タグ・カテゴリの取得 サムネイルの取得 おまけ: PHPスクリプト化しました 参考にしたところ WordPressにため込んだデータMarkdown化しGatsby…

JavaScriptでbig-integerでできること
定数 メソッド abs add, plus and bitLength compare compareTo compareAmb divide, over divmod equals, eq greater, gt greaterOrEquals, geq…

AWS BlackBeltを写経する EC2編
問われやすいサービス EC2 AWSサービス別資料 https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/ 問われやすいサービス EC2 Amazon EC2 (201…

WordPressを静的サイトに変換するプラグインの紹介。WP2Static
静的化の目的 WP2Static StaticPress Simply Static 3つを比較して WordPressを静的化するプラグインとして、simply staticやStaticPress、WP2Static…

WordPressをAmazon S3 + CloudFront構成で月額200円で運用
システム全体の この構成のメリット・デメリット AWSの構成 静的ページを作成するWordPressプラグイン WP2Static WP Offload Media Lite WordPress on Docker環境 まとめ AmazonS…

WordPress + WP2Static で静的サイトを生成する
クイックスタート 保存対象URLの補完 WP2StaticはWordPress から静的サイトを生成するプラグインです。 これまで同じく静的サイトを生成する「StaticPress」や「Simply Static…

SAA試験対策 AWS BlackBeltを写経する
はじめに 写経の例 EC2 EBS
AWS Lambdaから EC2起動&停止を行う
大まかな流れの紹介 IAMポリシー作成 IAMロール作成 Lambda作成 動作確認 起動テスト 停止テスト 参考 AWS Lambda から EC2 の起動と停止を行う方法の紹介。 大まかな流れの紹介 LambdaからEC…

S3 + CloudFront でコンテンツをHTTPS配信
S3バケットを作成する オプションの設定 アクセス許可の設定 S3アクセス権限の公開設定 ACM(AWS Certificate Manager) ステップ 1: ドメイン名の追加 ステップ 2: 検証方法の選択 ステップ 3: 確認とリクエスト ステップ…

最新の投稿

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする
GitHub Actions について あらかじめ準備しておくもの AWS IAM ユーザを環境変数にセットする workflowの記述 ビルド バッジを利用する 終わりに 参考にしたところ Gatsbyで作った静的サイトを、GitHub Actions…

cloudinaryによる画像ファイルの管理 はじめてみる
目的 cloudinary について 他のサービスとの比較 料金プラン アカウントの登録 利用してみる ダッシュボード 画像の編集 APIベースでのアクセス 感想 参考 画像の管理や配信、さらには加工といった事ができるsaas型のcloud…

JavaScriptによる2分探索(バイナリサーチ) のサンプルコード
2分探索について ソース 参考 JavaScriptで2分探索(バイナリサーチ)を実装してみました。…

Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス
UIコンポーネント VueSocial CKEditor 5 Vue.Draggable Vuetable 2 vuejs-datepicker Kalendar Vue Apexcharts Vue.js Google Charts vue-cart WebIDE…

GitHubのリポジトリをGitLabに同期する GitLabのミラーリング機能
GitLabのミラーリングについて GitHubのリポジトリをGitLabに反映する その他 参考 GitLabのミラーリング機能によりGitHubなどの外部のリポジトリとのミラーリングを行うことができます。 これを使ってGitHub…

WordPressやめます Gatsbyに移行しました
これまでのWordPress運用 なぜWordPressを捨てるのか? なぜGatsbyを利用するのか? gatsbyについて WordPressから記事の救出 移行対象記事の抽出 記事の置換 Gatsbyテーマの作成 Gatsby…

WordPressのDBから記事データを抽出する
WordPressのDB関連図 公開記事一覧の取得 タグ・カテゴリの取得 サムネイルの取得 おまけ: PHPスクリプト化しました 参考にしたところ WordPressにため込んだデータMarkdown化しGatsby…

ハイフンとかマイナスとかダッシュとか

Firebase + Nuxt で認証付きページを作るときに参考にしたいところ
Webアプリケーションのセッション管理にJWT導入を検討する際の考え方 Service Worker によるセッション管理 ユーザー セッションの管理 Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する CookieとセッションとJWT SSR…

GolangをCGIとして実行する
環境 golang パッケージ ソースと実行 ビルドとサーバ実行 標準ライブラリのみ Golang を CGIとして実行する際のメモ 環境 golang パッケージ 以下のモジュールを利用しています。 github.com/gorilla/mux…

Tags

Dates

© 2020   404 motivation not found