Getting Started with Astro

Introduction to Astro

Astro is a modern static site generator that brings a fresh approach to building websites. Unlike traditional frameworks that ship JavaScript to the browser by default, Astro renders your components to HTML at build time.

Why Choose Astro?

Zero JavaScript by Default

Astro strips away all JavaScript from your final build unless you explicitly need it. This results in incredibly fast page loads and better Core Web Vitals scores.

Island Architecture

When you do need interactivity, Astro’s island architecture lets you hydrate individual components on demand. This means you can use React, Vue, Svelte, or any other framework—only where you need it.

---
import Counter from '../components/Counter.tsx';
---
<!-- This component only loads when visible -->
<Counter client:visible />

Content Collections

Astro’s content collections provide type-safe content management with Zod schemas:

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
  }),
});

Getting Started

1. Create a new project: npm create astro@latest
2. Choose your template
3. Start building!

Astro’s developer experience is unmatched, with fast hot module replacement and excellent TypeScript support out of the box.