Getting Started with Astro

Astro is a modern web framework that allows you to build fast, content-focused websites. In this post, we’ll explore what makes Astro special and how to get started.

Why Astro?

Astro offers several compelling features:

Zero JavaScript by default - Astro ships zero JavaScript to the browser unless you explicitly need it
Component Islands - Use your favorite UI framework (React, Vue, Svelte) only where needed
Content Collections - Built-in support for managing markdown and MDX content
Fast by default - Optimized build output for maximum performance

Installation

Getting started with Astro is simple:

# Create a new project
npm create astro@latest

# Navigate to your project
cd my-astro-project

# Start the development server
npm run dev

Project Structure

A typical Astro project looks like this:

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

Creating Your First Page

Pages in Astro are created in the src/pages directory:

---
// src/pages/index.astro
const title = "Hello, Astro!";
---

<html>
  <head>
    <title>{title}</title>
  </head>
  <body>
    <h1>{title}</h1>
    <p>Welcome to my Astro site!</p>
  </body>
</html>

Conclusion

Astro is an excellent choice for building content-focused websites. Its focus on performance and developer experience makes it a joy to work with.

Stay tuned for more Astro tutorials!