← Back to Blog
· 1 min read

Getting Started with Astro: A Complete Guide

Astro is a modern static site generator that prioritizes performance by shipping zero JavaScript by default. In this guide, I’ll walk you through everything you need to know to get started.

Why Astro?

Astro stands out from other frameworks for several reasons:

  1. Zero JS by default - Your site ships no JavaScript unless you need it
  2. Component Islands - Use React, Vue, Svelte, or any framework you love
  3. Content-first - Built for content-heavy websites like blogs and portfolios
  4. Fast by default - Automatic optimizations for images, CSS, and more

Installation

Getting started with Astro is straightforward:

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

Creating Your First Page

Astro uses file-based routing. Create a file at src/pages/about.astro:

---
const pageTitle = "About Me";
---

<html lang="en">
  <head>
    <title>{pageTitle}</title>
  </head>
  <body>
    <h1>{pageTitle}</h1>
    <p>Welcome to my website!</p>
  </body>
</html>

Conclusion

Astro is an excellent choice for content-focused websites. Its performance-first approach and flexibility make it a joy to work with.