Hugo + .md file -> Next.js + microCMS


概要

Hugoで作っていたブログをNext.jsで作り替えたので、その際に詰まったところなどを書いていきます。

アーキテクチャ

Hugo + Markdownファイル だったのを、Next.js + MicroCMS にしました。

インフラの構成はHugoのときと変わっていませんが
S3にデプロイして、CloudFrontを経由した場合のみ表示させるようにしています。

< 詳しくはこちら >
CloudFront + S3 で S3に直接アクセスされないようにする(作成中)

なぜ乗り換えたか

乗り換えた理由は以下です。

  • HugoのテーマのHTML、CSSはそのまま使いたかった。

  • ファイルのデプロイからHeadless CMSを使った構成にしたかったが、Hugoに慣れ親しんでおらず、少しの改修にも時間がかかる

  • Reactのお勉強のとっかかりに良さそうだと思った

やったこと

全文検索

全文検索はlunrというライブラリを使用しました。
ビルド時にインデックスファイルを作成し、検索時はそのファイルを読むようにしています。

実装はこちらの記事を参考にさせていただきました。
https://blog.kozakana.net/2019/03/lunr-node/

画像のホスティング

microCMSはユーザが追加した画像を image.microcms.io にホスティングしますが、自分の環境にホストしたくなりました。
microCMSは画像の追加、更新、削除に伴うWebhookの機能を持っているので、これを使いました。
AWS Lambda で画像をsyncする実装と、その前段にAPI Gatewayでエンドポイントを作成し、エンドポイントのURLをmicroCMSに設定します。
API Gatewayのリソースが増えてきたら、API Gatewayの前段にRoute53でも置こうかなと思いますが一旦はこのままです。

< 詳しくはこちら >
microCMSとS3で画像をsyncする

シンタックスハイライト

react-syntax-highlighter というライブラリを使用しています。
highlight.js を内包しており、 highlight.js で使用可能な言語は react-syntax-highlighter でも使用することができます。

やってないこと

デザインの変更

デザインはもともとそれなりに気に入ってたのでそのままにしました。