2022年4月から地味に更新し続けているこの個人ブログを Next.js + Tailwind CSS + microCMS で作り直しました。所謂 Jamstack です。
元々は年末年始のお休みを使ってゆっくりやる予定でしたが、クリスマスのイブと当日のほぼ丸2日で全ページの実装と移行までを終わらせることが出来ました。
個人ブログを運営する理由
そもそも既存のブログプラットフォームを使わずに個人でブログを運営しているのには、いくつかの理由があります。
プラットフォームに縛られたくない
いくつかのプラットフォーム（アメブロ、はてなブログ、Medium、noteなど）でブログを作ったこともありますが、プラットフォームの雰囲気や機能の過不足などに違和感・不満を感じ、最終的には全部やめてしまいました。より多くの人に使われることを目的としたサービスは個人にとって完璧なものにはなりづらいので、これは仕方のないことだと思います。
継続的に記事を書くためには、自分で運営するブログを終の棲家として、不満があれば自分で直す、というのが私には一番馴染むような気がしています。
コンテンツを自分で管理したい
何度かのブログ移行を経て、コンテンツをブログデザイン等とは別の場所で管理したいと思うようになりました。
今までは Markdown でブログを書いていましたが、外部サイトの埋め込みなどを表現するのが難しかったこともあり、今回は microCMS への移行を決めました。
移行の詳細
元の実装では hugo を使っていました。スタイルテンプレートが豊富で、簡単に見栄えの良いWebページを作ることが出来るので、今でも結構気に入っています。ただ、デザインを変更するのが少し面倒だった、ショートカットを使いながら Markdown で記事を書くのが好みではなかった、URLの trailing slash が好きではなかった、などの理由から、今回は他のサービスに移行することになりました。
また、あまり言及していませんが、ホスティングは移行前も移行後も Github Pages を使っています。
今回採用したサービスはどれも公式ドキュメントが豊富だったので、以下のページに書かれていることを組み合わせると、本当に簡単にサンプルページを作ることが出来ました。
Next.js
ブログ用のサンプルが用意されていたため、Image タグなどの使い方に戸惑った以外はそこまで詰まらずに使うことが出来ました。
Tailwind CSS
聞いていたとおり className がとても長くなりがちです。
<nav className="sticky top-0 z-10 w-full bg-white shadow-2xl shadow-teal-200/5 flex flex-col justify-center items-center ...">これに慣れてコンポーネントを適切に切り出すことさえ出来れば、開発スピードは早くなるし、小さいサービスには向いているように思いました。
また、私はデザイナーではないので、サイズや色などの選択肢が制限されているほうが早く＆楽に実装できる、というのも新しい体験でした。
microCMS
Markdown でのコンテンツ管理をやめるかどうかはとても迷いましたが、今のところ microCMS が便利なのであまり困っていません！
いくつか躓いたところもありましたが、ドキュメントやブログなどの公式記事が豊富なので、検索すれば大体のことは出てきました。特に以下のふたつは痒いところに手が届いている感じがして助かりました。
また、完璧ではありませんが型付けサポート microcms-typescript も存在したので、今回はこれをベースに使ってみています。
TODO
細かい点を挙げればきりがありませんが、特に気になっているのは以下のふたつです。
Border color の設定
タグ一覧ページのタグ周りの線についてです。本当はタグの文字と同じ色に設定されているはずなのですが、なぜか設定が反映されずグレーになってしまっています。早めに直したいです。
Font Optimization
Next.js の Font Optimization を Tailwind CSS とうまく組み合わせて使うことが出来ていないので、時間があるときに再チャレンジしたいです。
おわりに
好きなデザインのブログが作れたので一旦は満足しました！ 細かいデザインの調整など、今後も手を入れながら運営していこうと思います。
ちなみに一番のお気に入りポイントはハンバーガーメニューのアイコンが本当にハンバーガーになっているところです。