Getting Started with Astro: A Modern Web Framework

Astro is a modern web framework that’s gaining popularity for its unique approach to building websites. In this post, we’ll explore what makes Astro special and how to get started with it.

What is Astro?

Astro is a web framework that focuses on content-driven websites. It’s designed to deliver the best possible performance by shipping zero JavaScript by default. When you do need interactivity, you can opt into it using “islands” of JavaScript.

Key Features

1. Zero JavaScript by Default

Astro ships zero JavaScript to the browser by default. This means faster page loads and better performance out of the box.

2. Component Islands

When you need interactivity, you can create “islands” of JavaScript that only load when needed. This gives you the best of both worlds: static performance with dynamic functionality.

3. Multi-Framework Support

Astro supports components from multiple frameworks including React, Vue, Svelte, and more. You can mix and match based on your needs.

4. Content Collections

Astro has built-in support for content management with type-safe content collections, making it perfect for blogs, documentation sites, and portfolios.

Getting Started

Installation

npm create astro@latest my-astro-project
cd my-astro-project
npm install

Project Structure

my-astro-project/
├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   └── content/
├── public/
├── astro.config.mjs
└── package.json

Creating Your First Page

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

---
// Frontmatter goes here
const title = "Hello, Astro!";
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <p>Welcome to your new Astro site!</p>
  </body>
</html>

Adding Components

Create a component in src/components/Header.astro:

---
export interface Props {
  title: string;
}

const { title } = Astro.props;
---

<header>
  <h1>{title}</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/blog">Blog</a>
  </nav>
</header>

Using the Component

---
import Header from '../components/Header.astro';
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My Astro Site</title>
  </head>
  <body>
    <Header title="Welcome to My Site" />
    <main>
      <p>This is the main content of my page.</p>
    </main>
  </body>
</html>

Development Server

Run the development server:

npm run dev

This will start a local development server, typically at http://localhost:4321.

Building for Production

When you’re ready to deploy:

npm run build

This creates a dist/ folder with your optimized, static site.

Why Choose Astro?

Performance: Zero JavaScript by default means faster sites
Developer Experience: Familiar component syntax with great tooling
Flexibility: Use any framework’s components when needed
Content-First: Built-in content management and collections
Static by Default: Perfect for content-heavy sites

Next Steps

Now that you have the basics, you can:

Astro is an excellent choice for building modern, performant websites. Its focus on content and performance makes it perfect for blogs, portfolios, and documentation sites.

Happy building! 🚀