ブログを作り直しました。これで何だかんだ3代目。

初代はHugoで構築、

Hugo, Github Pages, CircleCIつかってブログ構築

blog-with-hugo

2代目はNext.jsで構築した。

Next.js+Vercel+microCMSでブログをリニューアルしました

blog-with-nextjs

今回ので3代目。コードはこちらで公開。

abekoh/blog-v3: abekoh’s tech note

動機

Next.jsで作ったときはReact初心者で、とりあえず使ってみたいって動機であまり技術選定に理由はなかった。また、microCMSも「ブログといえばCMS使うよね？」みたいなことを知人に聞いて深く考えず導入した。

最初はいろいろ機能増やすのも楽しかったが、もろもろ不満が出てきて、

  • Next.js+Vercel、すごい便利だがブラックボックス感・ベンダーロックイン感が気になる
  • エンジニア1人しか触らないブログにmicroCMSは不要かつ管理しにくい。GitHubで管理でよいじゃん
    • 最終的にMarkdownをエディタで書いてmicroCMSで貼り付ける、という無駄な作業が発生したりして本末転倒感あった
  • MUIがブログにはオーバースペック、かつデザイナーでない自分が使うとどうしてもMUIっぽさ満載のなんとも言えないデザインになる

とにかくシンプルに、とにかく管理しやすく、技術的にもブラックボックスのないものを目指して再構築した。

技術選定

ざっくりこのあたりを利用

Astro

静的ジェネレータ特化のフレームワーク。Hugoと似てる。 今どきブログつくるならこれだと聞いて触ってみて、まさにほしいもの感あったのでそのまま採用。

とにかくSSG特化なのでその周辺の機能なりプラグインがいろいろ充実してて嬉しい。 *.astroっていう独自のファイル形式もReact-likeな書き心地ができてとっつきやすかった。

個人的にはContent Collectionsという機能が特にお気に入り。 いわゆるCMS的な機能が扱える。MarkdownのFront Matterのスキーマ定義・バリデーションチェックが行えるなど。Gitだけで管理するにはとても嬉しい機能。 スキーマ定義には組み込みのzodを使う感じなのが面白かった。

JetBrainsユーザーなのでWebStorm使って書いたが、プラグイン周りがまだ不安定な印象だった。

Tailwind CSS

何かと話題につきないやつ。下手に使うと負債化ヤバいとかなんとか。 個人的には軽量でシンプルに、最低限デザインが簡単に整えられたら〜と思ってて、少し触って目的に合致してそうだったので採用。

directivesを入れた瞬間、全てのHTMLタグのデフォルトスタイルが外れるようで、そのゼロから組み上げていく感じがなかなか楽しかった。

あまりコンポーネントせずに書き進めるとDRYに反した感じになるので確かにきちんと使わないと負債化しそうというのはわかった。とはいえこのブログの用途レベルであればそれほど問題でなし。

Cloudflare Pages

ホスティングはCloudflare Pagesに。これはあまり深い理由はなく、Cloudflareよく聞くので触ってみたかったのとそこから派生したサービスなどいじってみたさがあって選定。 といってもPages使うだけだと、Vercelなんかと同じくポチポチするだけでデプロイできちゃったので目新しいところはなし。

DNS管理もCloudflareに移動させたから、カスタムドメイン設定が楽だな〜とは感じた。 あと、リダイレクト設定が _redirects ファイルをpublicとしてつくってデプロイするだけで設定できるのが便利。

まとめ

とにかくスーパーシンプルに構築できて満足。このシンプルさを維持したいところ。とはいえダークテーマとかは対応したいかも？ GitHub管理で投稿やりやすくなった(v1のころの使い勝手に戻しただけだけど)ので、ラフにもっと投稿していきたい所存。