Getting Started with Astro

A comprehensive guide to building your first Astro website.

By Jane Doe ·

Astro is a modern static site builder that lets you use your favorite UI frameworks (React, Vue, Svelte, etc.) while shipping minimal JavaScript to the browser.

Why Astro?

Astro’s island architecture means components only hydrate when needed, resulting in faster page loads and better Core Web Vitals scores.

Installation

npm create astro@latest

Follow the prompts to scaffold your project, then install dependencies:

npm install

Project Structure

src/
├── components/
├── layouts/
├── pages/
└── content/

Building Your First Page

Create a file at src/pages/index.astro:

---
const greeting = "Hello, World!";
---

<html>
  <body>
    <h1>{greeting}</h1>
  </body>
</html>

Run npm run dev to start the development server and visit http://localhost:4321.