Hello

はじめに

ブログを作った。最初の記事として作った経緯と技術スタックを少しだけ残しておく📝

きっかけ

先月末に行った RubyKaigi 2026 で、自分で何かを作って発表している人たちを間近に見てだいぶ刺激を受けた。カンファレンスは刺激を貰えてとてもよい。会場の書籍ブースで伊藤さんの『技術記事を書く技術 ITエンジニアの価値を高めるアウトプットのすべて』が置いてあって、買ってサインまでいただいてしまったので、何か書くぞの気持ちになってた。

技術的なメモや考えたこと、趣味の話など、バラバラとしたものをどこかにまとめて整理したかった。ローカルのメモでも良いんだけど、これまでアウトプットをほとんどしてこなかったのでこれを機にやってみる。

書くこと

• 技術メモ（調べたこと、作ったもの）
• 考えたこと（仕事やキャリアなど）
• 趣味の話（クラフトビール、フィットネスなど）

あたりになりそう。特にジャンルを絞るつもりはないけど、できれば人に見られる前提で思考整理をしたい。

ブログの技術スタック

せっかくなので、このブログの技術選定も少しだけ。特徴的だと思ったところを 3 つだけ取り上げる。

HonoX + Cloudflare Pages

HonoX は Hono ベースのフルスタック Web フレームワーク。ファイルベースのルーティングや Islands Architecture（インタラクティブな部分だけクライアントで動かす方式）をサポートしている。Hono 自体が Cloudflare Workers に最適化されているので、Cloudflare Pages へのデプロイもスムーズだった。Next.js のような重さを避けつつ、型安全に JSX でコンポーネントを書けるのが気に入っている。

Tailwind CSS v4

v4 から CSS-first という設計に変わった。v3 まではカスタマイズに tailwind.config.jsが必要だったが、v4 では app/style.css 1 つで OK。

@import "tailwindcss";

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-cream: #f5ebdc;
  --color-mahogany: #3a1f0f;
  --color-orange: #f37021;
}

カスタムカラーは @theme ブロックで CSS 変数として定義し、ダークモードのバリアントも @custom-variant で書ける。設定が JS でなく CSS に集約されたのでだいぶすっきりした。

ビルド時に全部やる Vite plugin

一番工夫した部分。ナイーブに実装すると shiki（シンタックスハイライト）や sharp（画像変換）がランタイムバンドルに乗ってしまい、デプロイできなくなる。Cloudflare Pages の SSR 部分は内部で Workers として動くのでバンドルサイズに上限があり、実測で 9.7MB を超えた。

解決策として、Markdown のビルドパイプライン全体を自作の Vite plugin（vite-plugin-posts.ts）に集約した。Markdown の import を Vite plugin のビルドフェーズでインターセプトし、Node.js コンテキストで frontmatter のパース → marked でのレンダリング → shiki でのハイライト → sharp での画像変換をすべて実行して、HTML 文字列だけをランタイムに渡す設計にした。これで shiki / marked / sharp はランタイムから完全に排除できた。

（工夫したのは Claude Code 君です。）

おわりに

とりあえず1つ目のアウトプットはできた、偉すぎる。続くか分からないけど、何書くか迷ったらとりあえず最近飲んだビールの感想でも書きます。