WordpressからGatsbyとContentful、NetifyでJam stackブログに移行

数年前に購入したSSL証明書の有効期限が切れるタイミングで、遅ればせながらWordpressからGatsby.jsとContentful, Netify構成でのブログ構築に移行した。

何故Wordpressをやめて移行を決意したか

大きな理由は3つ。

Lighthouseのスコアを向上したかった

巷で以前から話題のGatsbyでのJamstack構成で、サイトのパフォーマンス向上やPWA, AWP,などもろもろの懸念点を一掃できそうだったから。

フロントエンドまわりの勉強

Reactの経験はあるが、Gatsby, Graphql, Contentfulあたりは未経験という状態でのスタートだった。Jamstack自体よく分かっていなかったため、自分のブログの再構築はフロントエンドまわりの勉強にちょうど良い教材だった。

SSL証明にコストをかけたくなかった

いままでは契約でSSL証明書にお金を割いていたが、それをもうやめたかった。 NetifyではLet's encript周りを自動でやってhttps化してくれるので、金額的にも時間的にもコストをかけないでよくなる構成にしておきかたった。

結果

Lighthouseでオール満点

記事によるが、ページによってはオール100点を実現できた。

運用コストがドメイン代のみに

サーバー費用も、SSL費用もなくなったため、ContentfulとNetifyの無料わく内でおさまる当ブログは現状ドメイン代しかランニングコストがかからないようになった。

学べたこと

Graphql

といっても深い理解は得られていない気がする。クエリの投げ方がわかればある程度なんとかなる。

Gatsbyに向いてること

Gatsbyが静的サイトジェネレーターであること、どういった用途に向いてるのか、逆に何に向いていないのかの理解が深まった。Lighthouseでいうと、SEOの項目やPWAに関しての満点を取ることは Gatsbyを使わなくても比較的簡単に実現できそうだとおもった。service workerやSEOの知識がない人でも、便利なプラグインを入れることでその辺をブラックボックスにしたまま対策することができる。そして何より便利なのは、静的アセットの自動最適化。webpとかキャッシュファイルとか。

つまづいたところ

各記事の移行作業

Wordpressのrestapiからとれるjsonの整形作業、自分にはちょちょいのちょいとはできそうになかったため、手動で各記事のデータをcontentfulに入れ込んだ。

gatsby-plugin-google-adsenseが動かない

調査中。 プラグインいれて、adsenseの管理画面で自動広告表示機能をオンにするだけじゃだめなのだろうか？ソースをみてもadsenseのデータが入れ込まれてないようにみえるんだよね・・・・。

2020/06/07 解決 Netifyの環境変数に指定していたアナリティクスコードの入れ込み方が間違っていた。