Nuxt.js + microCMS + Nuxt Contentでブログを作り直してみた

2022/06/22

#Vue.js/Nuxt.js

今回はもともとWordPressで運用されていたブログをNuxt.js + microCMSの組み合わせで作り直したので、そのことについて少し備忘録として残してみます。

もともとの環境


作り直すまでこのブログは下の組み合わせで運用されていました

CMS:WordPress
デザイン:Cocoon(WordPressテーマ)
ホスティング:ロリポップ
ドメイン:ムームードメイン
アクセス解析:Google Analytics

鯖代やドメイン代で維持費が年1万円くらいかかっていました。

新しい環境


↑のブログを今回はこんな感じで作り直しました

CMS:microCMS・Nuxt Content
フレームワーク:Nuxt.js(Staticモード)
デザイン:オリジナル(Bulmaを使用)
ホスティング:Cloudflare Pages
ドメイン:Cloudflare Registrar
検索:Fusejs

作り直した理由


サーバーに1万円は高いな〜っていうのとお仕事でjamstack構成でサイトを組む機会があったので、ゼロから作り直すことにしました。

自分の設定が悪いのか分かりませんが、WordPressだとちょっとサイトが重かったみたいな理由もあります。

移行の流れ


今回は下みたいな感じで移行しました。

1.記事をmicroCMSへ移動

スクリプトとAPIを書いて自動化しようと思ったのですが、APIがリッチエディタに対応していないらしく諦めて手動でコピペしました。

2.ドメインを移管


3.サイトを作成


4.Cloudflare Pagesにデプロイ

Githubと連携してテンプレートでNuxtjsを選択するだけで簡単にデプロイできます。

2回目以降(記事の更新時など)のgenerateはwebhookでmicoCMSと連携して自動でコマンドが走るように設定しています。

ライブラリについて


NuxtContent


nuxt content無しでmicroCMSのAPIだけで作ることはできましたが、検索機能のためにバックエンドのコードを書きたくなくてNuxt contentを導入しました。

Nuxt Contentを使うためには記事データをmdやjsonで保存する必要があるので、Nuxtのgenerete前にmicroCMSのAPIを叩いてjson形式で全投稿を保存するコードを書きました。

Fusejs


JSONの全文検索ができるライブラリです。

microCMSのAPIキーを漏らすことなくフロントエンドだけで投稿の検索を行うことができます。

検索機能はこのライブラリにNuxt Contentで取得できるJSONを渡すことで実装しています。

設定が面倒だったためtitleだけ検索するように設定しました。

良かったこと


最後に作り直して良かったこです。

・維持コストが安い

今までサーバー代で9,000円、ドメイン代で1,000円ちょっと掛かっていた維持費が、無料プランで間に合わせることができたためドメイン代だけで住むようになりました。

ドメインもCloudflareに移したので数百円安くなっています。

・サイト全体が軽い

今までロリポップのハイスピードプランでホスティングしていてちょっともたつく感じだったのですが、かなり軽くなりました。
(今のサイトのpagespeed Insightの数字は93/100です。)


今後覚えていたら、今回使用しているライブラリについてやサービスについて書くかもしれないです。


関連記事:Vue.js/Nuxt.js

[Nuxt.js]動的なルーティングを含めてgenerateする方法

Vue.js/Nuxt.js

[Nuxt.js]nuxt.config.jsに環境変数を定義してプログラムから読み込む方法

Vue.js/Nuxt.js

Cloudflare PagesにNuxtのプロジェクトをデプロイしようとしたところSyntaxErrorが発生したので対処法をメモ

Vue.js/Nuxt.js