June 10, 2025

Getting Started with Astro: A Modern Static Site Generator

Astro has been making waves in the web development community, and for good reason. This modern static site generator promises to deliver lightning-fast websites with minimal JavaScript, making it perfect for content-focused sites like blogs, documentation, and marketing pages.

What Makes Astro Special?

Zero JavaScript by Default

Unlike other frameworks that ship JavaScript by default, Astro takes a different approach. It generates static HTML with zero client-side JavaScript unless you explicitly need it. This results in:

Faster load times: Less JavaScript means faster initial page loads
Better SEO: Search engines can easily crawl static HTML
Improved accessibility: Works even when JavaScript is disabled

Island Architecture

Astro introduces the concept of “islands” - interactive components that are hydrated only when needed. This means you can:

---
// This runs on the server
const data = await fetch('https://api.example.com/posts');
---

<div>
  <h1>My Blog</h1>
  <!-- This is static HTML -->
  <p>Welcome to my blog!</p>
  
  <!-- This component is hydrated only when needed -->
  <InteractiveSearch client:load />
</div>

Framework Agnostic

You can use components from different frameworks in the same project:

React components
Vue components
Svelte components
Solid components

Setting Up Your First Astro Project

Getting started with Astro is straightforward:

# Create a new Astro project
npm create astro@latest my-astro-site

# Navigate to your project
cd my-astro-site

# Install dependencies
npm install

# Start the development server
npm run dev

Project Structure

A typical Astro project looks like this:

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

Key Directories

src/pages/: File-based routing - each .astro file becomes a route
src/components/: Reusable Astro components
src/layouts/: Layout components for consistent page structure
public/: Static assets served directly

Creating Your First Component

Astro components use a familiar syntax:

---
// Component script (runs on server)
export interface Props {
  title: string;
  description?: string;
}

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

<!-- Component template -->
<div class="card">
  <h2>{title}</h2>
  {description && <p>{description}</p>}
</div>

<style>
  .card {
    padding: 1rem;
    border: 1px solid #ccc;
    border-radius: 8px;
  }
</style>

Adding Interactivity

When you need client-side interactivity, you can use the client:* directives:

---
import Counter from '../components/Counter.jsx';
---

<!-- Hydrate immediately -->
<Counter client:load />

<!-- Hydrate when visible -->
<Counter client:visible />

<!-- Hydrate when idle -->
<Counter client:idle />

Content Collections

For content-heavy sites, Astro provides Content Collections:

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
  }),
});

export const collections = {
  blog: blogCollection,
};

Performance Benefits

Astro’s approach delivers impressive performance:

Lighthouse scores: Often 100/100 across all metrics
Core Web Vitals: Excellent LCP, FID, and CLS scores
Bundle size: Minimal JavaScript footprint

When to Use Astro

Astro is perfect for:

Blogs and content sites
Documentation sites
Marketing pages
E-commerce product pages
Portfolio sites

Conclusion

Astro represents a paradigm shift in web development, prioritizing performance and developer experience. Its unique approach of shipping zero JavaScript by default, combined with the flexibility to add interactivity where needed, makes it an excellent choice for modern web development.

Whether you’re building a personal blog, company website, or documentation site, Astro provides the tools and performance you need to create exceptional web experiences.

Ready to give Astro a try? Start with the official tutorial and join the growing community of developers who are building faster, more efficient websites with Astro.

Building Modern Web Apps: Best Practices for 2025

Web Performance Optimization: Essential Tips for Lightning-Fast Websites

My Development Journey: From Beginner to Building Complex Systems

← back to all articles