Getting Started with Astro: The Modern Web Framework

Getting Started with Astro: The Modern Web Framework

Astro has been gaining significant traction in the web development community, and for good reason. As a framework designed to build content-focused websites, it offers a unique approach that prioritizes performance while still providing modern developer experience.

Why Astro?

Before diving into how to use Astro, let’s understand why you might want to consider it for your next project:

1. Performance-first approach

Astro’s philosophy is “ship less JavaScript” - it generates static HTML by default and only sends JavaScript when absolutely necessary through a technique called partial hydration. This results in incredibly fast websites out of the box.

2. Use your favorite UI components

One of Astro’s most powerful features is its ability to use components from your favorite frameworks (React, Vue, Svelte, Solid, etc.) within the same project. This makes Astro exceptionally flexible and great for transitioning existing projects.

3. Excellent developer experience

Astro provides a modern developer experience with hot module reloading, TypeScript support, and an intuitive templating system that feels like a natural extension of HTML.

4. Built for content

With built-in support for Markdown and MDX, content collections, and easy integration with headless CMSs, Astro is particularly well-suited for content-heavy websites like blogs, documentation sites, and portfolios.

Getting Started

Setting up your first Astro project is straightforward:

# Create a new project with npm
npm create astro@latest

# Or with yarn
yarn create astro

# Or with pnpm
pnpm create astro

The Astro CLI will guide you through the setup process, offering templates like blog or documentation site to jumpstart your project.

Project Structure

A typical Astro project has the following structure:

/
├── public/           # Static assets (images, fonts, etc.)
├── src/
│   ├── components/   # Reusable UI components
│   ├── content/      # Content collections (Markdown/MDX)
│   ├── layouts/      # Page layouts
│   └── pages/        # Pages and endpoints
└── astro.config.mjs  # Configuration file

Creating Your First Page

In Astro, pages are created as .astro files in the src/pages/ directory. Here’s a simple example:

---
// This is the component's frontmatter (JavaScript or TypeScript)
const pageTitle = "My First Astro Page";
---

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

Working with Components

Astro components use a syntax similar to JSX but with a few key differences. Here’s how you can create and use a simple component:

---
// src/components/Card.astro
const { title, body } = Astro.props;
---

<div class="card">
  <h2>{title}</h2>
  <p>{body}</p>
</div>

<style>
  .card {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
</style>

Then, you can use this component in any page:

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

<Card 
  title="My First Card" 
  body="This is the content of my first Astro component."
/>

Integrations

Astro’s ecosystem includes many official integrations that enhance its capabilities:

npx astro add tailwind   # Add Tailwind CSS
npx astro add react      # Add React support
npx astro add image      # Add optimized image support
npx astro add mdx        # Add MDX support

Conclusion

Astro’s approach to web development offers a refreshing balance between modern developer experience and optimal end-user performance. By leveraging partial hydration and a flexible component model, it allows you to build fast, content-focused websites without sacrificing the tools and frameworks you love.

Whether you’re building a personal blog, documentation site, marketing website, or portfolio, Astro provides an excellent foundation that scales with your needs.

Have you tried Astro yet? I’d love to hear about your experience in the comments below!