BeginnerAstro45 minJun 10, 2026

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.

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

<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