Nuxt.js+Contentful+Netlifyでブログをリニューアルしました

2020/05/17 公開

2021/01/03 更新

Nuxt.js + Contentfu + Netlify

久しぶりの更新です。

もはや何のブログなのか分からなくなってきましたが、長年WordPressで運用してきた本ブログをNuxt.js + Contentful + Netlifyの構成に作り直しました。

参考にさせていただいたサイト様も紹介しつつ備忘録として残します。

作り直した理由

WordPressでの記事作成に問題があったわけではなく、表示コンテンツも最小限にしていたためページスピードも良好でした。単純に勉強のために作り直したという意味合いが強いです。

リニューアルにあたってContentful, Netlifyの２つは決めていて、静的サイトジェネレータに関してはStaticGenを日々チェックし続け下記３つの候補に絞りました。

Gatsbyはちょうど一年ぐらい前に試したことがあるのですが、いかんせんReactの知識がほぼゼロに近くカスタマイズするにも難儀しそうだったためナシ。GridsomeとNuxt.jsは普段の開発業務でで導入し始めたVue.jsがベースということでこの２つのどちらかに。

結局業務でもNuxt.jsをガッツリ触ることになったため、ちょうどいいやと思いNuxt.jsに決めました。

モダンなブログ環境ということでこの手の情報は調べるとかなり出てくるのですが、記事取得からデプロイまでの流れは独学プログラマ様の下記記事を参考にさせていただきました。

記事取得方法やページネーションなどはカスタマイズしています。ローカル環境で気軽に試せるのは楽ちんですね。

WordPressで使われているDBに格納された記事の移行は諦めました。インポートするにも記事の構造が違うし、見出しや画像挿入にクラスを手動付与していたので結局全て見直さないといけない理由からです。

Google Analyticsで月間アクセスを確認し、多少なりとも読まれている記事 + 直近の数記事だけ手動で移しました。

面倒ではありましたが記事中のレイアウト調整に役立ってくれたのでまぁいいかなと。。。

WordPressのときはテーマを自作していたためCSSは流用しています。コンポーネント管理になったので必要な部分だけscopedで移しました。スタイルがバッティングしないのは本当に楽ですね。

Vue.js環境ではUIフレームワークのVuetifyがメジャーですが、スタイリングも自作でやった方が色々と管理しやすいので自作で進めています。ブログデザインはいったん流用で進めますが今後調整したいきたいです。

こちらはIzm Log様を参考に。細かい部分の調整方法をまとめられているので非常に助かりました。

WordPressのときはさくらドメイン+さくらレンタルサーバーでしたが、ドメイン関連の知識も浅いため様々なサイトを調べながら対応しました。

ドンピシャで当たる情報が無かったのですが、最終的にはTAMAOSA様の下記記事を参考にさせていただきました。

これは利用する DNS 自体をNetlify DNSにしてしまう方法です。Netlify DNS を使うと面倒な DNS レコード設定を Netlify 側が良しなにやっておいてくれます。これが一番楽なので個人的におすすめです。

ドメインは変わらずとも記事URLの構成が違うため、旧URLから新URLへのリダイレクトは公式ドキュメントを参考にしました。RSS配信もURLが変わってしまうためリダイレクトしています。正常に取得できているので多分大丈夫。。。

移行について切り捨てた部分（主に記事）は多いものの、ブログカスタマイズのモチベーションは大きく上がりました。

いわゆるJAM StackかつヘッドレスCMSを利用したブログ作成は日本語での解説記事も多く、昨今のフロントエンドエンジニア初・中級者が学習がてら触ってみるのはちょうど良いと感じます。

ContentfulやNetlifyを業務で利用するケースは自分の場合想定していないものの、データの流れやホスティングの理解に繋がり今後のWebアプリケーション開発にも必ず役に立つはずです。

久々の記事ですがこの辺で。ではまた。