Getting Started with Astro

Astro is a modern web framework that delivers lightning-fast performance by shipping zero JavaScript by default. In this guide, we’ll explore the core concepts and get you up and running with your first Astro project.

What Makes Astro Special?

Astro introduces the concept of component islands - a new architecture for building websites. Instead of shipping JavaScript for every component, Astro only hydrates the components that need interactivity.

Key Features

Zero JavaScript by default - Only ship what you need
Component islands - Selective hydration for better performance
Framework agnostic - Use React, Vue, Svelte, or plain HTML
Built-in optimizations - Image optimization, CSS scoping, and more

Setting Up Your First Project

Getting started with Astro is straightforward:

npm create astro@latest

This command will guide you through setting up a new Astro project with all the necessary configurations.

Building Your First Component

Astro components use a .astro extension and combine HTML, CSS, and JavaScript in a single file:

---
// Component script (runs at build time)
const name = "Astro";
---

<div>
  <h1>Hello, {name}!</h1>
</div>

<style>
  h1 {
    color: blue;
  }
</style>

Next Steps

Now that you have the basics down, explore Astro’s content collections, dynamic routing, and integrations to build powerful, performant websites.