サイトを新しくした

読み込みの遅いウェブサイトでは、コンテンツが表示されるまでの数秒で読者は離脱します。見た目の美しさと表示速度はトレードオフではなく、開いた瞬間に読めることが最低条件です。この考えにもとづいて、https://blog.mekann.workers.dev/ でサイト全体を再構築しました。

技術スタック

Web フレームワークの Astro で構築し、Cloudflare Workers 上で動かしています。記事ページはビルド時に静的 HTML として生成し、Cloudflare のエッジから配信します。Astro を選んだ理由は、クライアントに送る JavaScript を必要な分だけに絞れる設計と、Markdown による執筆をコンポーネントベースのレイアウトと組み合わせられる点です。

ビルド成果物を静的ファイルとして扱う SSG 単体ではなく、Cloudflare 向けの adapter を通じて Workers 上で動かす構成にしました。タグ一覧や検索、RSS フィードのような動的なルートを追加する余地を残すためです。実際の記事ページはビルド時に静的化されるため、SSG と同等の配信コストを保ったまま、必要な箇所だけをサーバー側で処理できます。

スタイリングには Tailwind CSS v4 を使い、未使用の CSS はビルド時に除去しています。ブログ一覧には WebGL のフラグメントシェーダーで動く背景を置いていますが、本文のレンダリングをブロックしないよう、本文領域とは独立したレイヤーで動かしています。

重視した点

• 初期表示の高速化：未使用 CSS をビルド時に除去し、レンダリングをブロックする要素を最小限に抑える
• エッジ配信：Cloudflare Workers により、ユーザーに最も近いデータセンターからレスポンスを返す
• クライアント JavaScript の最小化：Astro のアイランドアーキテクチャで、インタラクティブな要素にのみ JS を読み込む
• 執筆の効率：記事は Markdown で書き、ビルド時に静的 HTML として出力する

今後の予定

まずは技術メモと作業ログを中心に更新します。記事数が揃ってきた段階で、タグ分類と RSS フィードの配信を追加する予定です。