このサイトについて

このサイトは個人のポートフォリオとして、SvelteKit と Cloudflare のスタックで作っています。「運用負荷を最小に、必要になったら育てる」を方針に、できるだけ薄い構成でまとめました。このページでは、その技術構成と選定理由を紹介します。

技術構成

• フレームワーク: SvelteKit 2 / Svelte 5（runes）
• ホスティング: Cloudflare Pages + Workers（adapter-cloudflare）
• データ: Cloudflare D1 + Drizzle ORM（Works・Activities・外部ブログ記事の管理）
• 記事: MDsveX（.svx）で Markdown と Svelte を共存
• お問い合わせ: Resend（メール送信）+ Turnstile（スパム対策）
• テスト: Vitest（ユニット）+ Playwright（E2E）

なぜこの構成にしたのか

個人サイトでまず避けたかったのは、放っておくと壊れる構成と、月々の固定費でした。Cloudflare Pages + Workers なら無料枠で十分動き、D1（SQLite ベース）も同じプラットフォーム上に収まります。フロントからデータ、ホスティングまでを一つのエコシステムで完結できるのが決め手です。

SvelteKit + Svelte 5（runes）は、学習コストの低さと出力されるバンドルの軽さのバランスが良く、$state / $derived といった runes でリアクティビティが素直に書けます。

コンテンツの管理

記事は二系統で管理しています。

• 自前記事: src/posts/*.svx。Git で管理し、draft: true で下書きにできます。
• 外部記事: Cloudflare D1 に登録し、Zenn や技術ブログなど他媒体の記事へリンクします。

表示時には両者をマージして公開日の降順に並べています。Works・Activities も同様に D1 で一覧を管理し、詳細を書きたい Works だけ .svx を用意する構成です。重量級の CMS は入れず、運用は Git と wrangler CLI（D1 への投入）で完結させています。

デザイン

配色は CSS Variables による二層トークンで管理しています。--blue-500 のような Primitive トークンの上に、--color-primary のような意味づけ（Semantic）トークンを重ね、コンポーネントからは必ず Semantic 経由で参照します。色をハードコードしないことで、テーマ変更が一箇所で済みます。

Tailwind は使わず、各コンポーネントのスコープ付き <style> でスタイルを閉じています。

品質とデプロイ

• ユニットテストは Vitest、E2E は Playwright で、主要ページとフォームの挙動を担保しています。
• デプロイ前は make preflight（型チェック + テスト + E2E + ビルド）を一括で走らせ、緑になってから push する運用です。
• アクセス解析は外部トラッカーを入れず、必要になれば Cloudflare Web Analytics を検討します。

小さく作って、必要になったら育てる。個人サイトだからこそ、運用負荷の低さを優先しています。