コンテンツへスキップ

このブログを支える技術スタック

ログの技術スタックを、モノレポ、CMS、静的ページ、エッジ配信の接続として表したニューモーフィズム調の3Dイラスト

はじめに

なんか触ってみたかったやつをそろそろ触ってみようと思いたち、ブログを作ってみました。ブログってアウトプットに都合いいですよね。

モノレポ構成(Turborepo)

リポジトリは Turborepo で管理しています。アプリは 3 つあります。

  • apps/blog — Astro 製のブログフロントエンド
  • apps/admin — Next.js 製の管理画面
  • apps/studio — Sanity Studio(コンテンツ編集 UI)

Turborepo のキャッシュとタスクグラフにより、変更のあったアプリだけビルドされるため CI が速く保てます。パッケージ間の型共有も packages/ 以下でまとめて管理しています。

コンテンツ管理(Sanity)

Sanity をヘッドレス CMS として採用しています。スキーマはコードで定義し、Studio から記事・著者・カテゴリを管理できます。

ヘッドレス CMS って今や色々種類ありますが、何となく目に付いたやつ選んでみました。前は GraphQL 触りたいっつって Hygraph 使ってたなあ。

フロントエンド(Astro)

ブログのフロントエンドには Astro を選びました。静的サイト生成(SSG)を基本とし、JavaScript をほぼ送らない軽量なページを実現しています。

これが今回の最大の目的です。えらく速いって言うのは散々聞いてて試したいとは思ってましたが、なかなか静的なサイトを作る機会がなく。

思ったより簡単で良いですね。

デザイン(Neumorphism × OKLCH × Tailwind)

ポケポケでみていいなと思ってた Neumorphism を使ってみました。柔らかい雰囲気がとてもいいですね。見た目かなり好きですが実装は結構面倒…。

ホスティング(Cloudflare Pages)

静的ファイルのホスティングには Cloudflare Pages を使用しています。世界中のエッジノードから配信されるため、どこからアクセスしても高速です。無料プランでも独自ドメイン・HTTPS・無制限帯域が使えるコストパフォーマンスも魅力です。

Vercel 厨でしたが、たまには違うのも使ってみようという軽い気持ちで採用してみました。簡単でいいですね。

まとめ

ノリと興味でサイト作ってみました。

しばらく運営してみて採用したそれぞれの良さを見ていこうかなと思ってます。