【個人ブログ開設】microCMSを使用してSSGなWEBサイトを制作する

このブログを作ったきっかけについて

はじめまして。東京で働くクリエイティブ・フロンエンドデベロッパーの「くりちゃん」です。

最近は microCMS を活用して、SSG（静的サイトジェネレーション）でWEBサイトを作る案件が増えてきました。

つい 2〜3 年前までは「CMS＝WordPress」が定番だったように感じていたのに…WEBの流れは本当に早くて、ついていくのが精一杯です。

そこで、「いつか microCMS でブログを作りたい」と思っていたこともあり、年末年始のスキマ時間でこのブログを作っちゃいました。

リポジトリも公開してるので、良かったら参考にしてみてください。

https://github.com/hisamikurita/hisamikurita-techblog

使用技術について

• Next.js
• TypeScript
• Tailwind CSS
• microCMS
• Github Actions

使用技術はざっくりこんな感じです。フロントエンドフレームワークは Gatsby.js とAstroを試す機会があったのですが、しばらくは安定感のあるNext.jsに落ち着きそうです。どんな要件にも柔軟に対応できるのとトレンドなので採用しました。

スタイリングは現在いろいろ試しているところで、今回はTailwind CSSを採用しました。シンプルなWEBサイトとは特に相性がよく、複数人で開発するときにもCSSに対する共通認識が取れるのが良い感じです。デザイン重視のクリエイティブなWEBサイトを制作する時はCSS Modulesを採用するようにしています。

CICDはGithub Actionsで実装しています。必要なモジュールをインストールしていくだけなので、そんなに難しくなかったです。

ブログのシステム構成図

このブログのシステム構成はとてもシンプルな運用になっています。本業だとサーバーレス構成のS3と CloudFrontで、本番環境・ステージング環境・開発環境をしっかり分けることが多いので、もう少し複雑になります。

microCMSのプレビュー機能実装のためにNext.jsのpages配下にpreviewフォルダを作成しています。このページは更新者が「下書き → SSGのビルドを待たずにすぐ確認」できるように、CSR（クライアントサイドレンダリング）で画面を表示しています。そして、一般の閲覧者には見えないようにBasic認証もかけています。

ブログの「機能」開発について

WordPressの場合は豊富なプラグインでブログの主要な以下の機能は楽に実装できると思います。

• 絞り込み機能
• 検索機能
• 目次機能
• ページネーション

microCMSの場合はこれらの全てをフロントエンド側で実装する必要がありますが、公式ドキュメントが充実していて、機能自体もしっかり揃っているので、困ることはなかったです。

今後の方針

せっかく作ったこのブログ、作って終わりではなく、実験の場として、思いついたアイデアや試してみたい技術は、気軽に投入していきたいと思います。