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

> ゼロから45分でデプロイ済み静的サイトへ — コンテンツコレクション、アイランド、そしてAstroを直感的に理解するメンタルモデル。
>
> 2026-06-10 — y7.hk

## なぜ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/` を生成し、どこにでもホストできる。

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

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

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

## 次は何

`[locale]` 動的ルートでi18nを追加する — 詳しくは[i18nチュートリアル](/ja/tutorials/i18n-for-static-sites/)で。