# Ship Your First Astro Site

> From zero to a deployed static site in 45 minutes — content collections, islands, and the mental model that makes Astro click.
>
> 2026-06-10 — y7.hk

## Why Astro

Astro ships zero JavaScript by default. Your content renders to plain HTML on the server, and interactive islands hydrate only where you ask for it. For a content-heavy personal site — blog, research, galleries — that is exactly the trade you want.

## The 45-minute path

1. `npm create astro@latest` — pick the blog template, TypeScript strict.
2. Define a content collection in `src/content.config.ts` with a zod schema.
3. Write your first `.mdx` post — frontmatter is validated at build time.
4. Add a `[slug].astro` page with `getStaticPaths()` + `render()`.
5. Deploy: `astro build` produces a fully static `dist/` you can host anywhere.

## Islands: the part people miss

```astro
<Hero client:load />        <!-- hydrates immediately -->
<Chart client:visible />    <!-- hydrates when scrolled into view -->
<Comments client:idle />    <!-- hydrates when the browser is idle -->
```

Reach for `client:visible` on anything below the fold. Your Lighthouse score will thank you.

## What's next

Add i18n with `[locale]` dynamic routes — covered in the [i18n tutorial](/tutorials/i18n-for-static-sites/).