Getting Started with Astro

Astro is a modern web framework designed for building fast, content-focused websites. Unlike traditional frameworks, Astro ships zero JavaScript to the browser by default.

Why Astro?

• Performance first: Server-side rendering with minimal client JS
• Islands architecture: Interactive components only where needed
• Framework agnostic: Use React, Vue, Svelte, or vanilla JS
• Built-in Tailwind CSS support

Installation

npm create astro@latest my-blog
cd my-blog
npm run dev

Creating Your First Page

Pages in Astro live in src/pages/. Create an index.astro file:

---
const title = "Welcome to My Blog";
---

<h1>{title}</h1>
<p>This is my first Astro page.</p>

Adding Interactive Islands

Want interactivity? Add a framework component with client:load:

import Counter from '../components/Counter.vue';

<Counter client:load count={0} />

That's it! Astro handles the rest — shipping only the JavaScript your interactive components need.