はじめてのAstroサイトを公開しよう

なぜAstroか

AstroはデフォルトでJavaScriptをゼロで出荷する。コンテンツはサーバー上でプレーンなHTMLにレンダリングされ、インタラクティブなアイランドは指定した場所だけでハイドレートされる。コンテンツ中心の個人サイト——ブログ、研究、ギャラリー——にはまさに欲しいトレードオフだ。

45分の道のり

1. npm create astro@latest — ブログテンプレートを選び、TypeScript strictにする。
2. src/content.config.ts で zod スキーマ付きのコンテンツコレクションを定義する。
3. 最初の .mdx 記事を書く — フロントマターはビルド時に検証される。
4. getStaticPaths() + render() で [slug].astro ページを追加する。
5. デプロイ：astro build が完全に静的な dist/ を生成し、どこにでもホストできる。

アイランド：みんなが見落とす部分

<Hero client:load />        <!-- すぐにハイドレート -->
<Chart client:visible />    <!-- ビューポートに入ったらハイドレート -->
<Comments client:idle />    <!-- ブラウザがアイドル時にハイドレート -->

ファーストビューより下のものには client:visible を使おう。Lighthouseスコアが感謝する。

次は何

[locale] 動的ルートでi18nを追加する — それは別のレッスン。