Getting Started with Astro: The Modern Static Site Generator

Introduction

Astro is revolutionizing how we build content-focused websites. Unlike traditional frameworks that send megabytes of JavaScript to the browser, Astro takes a different approach: ship only the HTML and CSS your users need.

Why Choose Astro?

Zero JavaScript by Default

Astro generates pure HTML at build time. Your pages load instantly because there’s no JavaScript framework overhead. Interactive components are opt-in, not opt-out.

---
// This runs at build time, not in the browser
const posts = await getCollection('blog');
---

<h1>My Blog</h1>
{posts.map(post => (
  <article>
    <h2>{post.data.title}</h2>
    <p>{post.data.description}</p>
  </article>
))}

Islands Architecture

Need interactivity? Astro’s “Islands” pattern lets you hydrate individual components while keeping the rest of the page static.

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

<h1>Static heading</h1>
<p>Static paragraph</p>

<!-- Only this component gets JavaScript -->
<Counter client:load />

Framework Agnostic

Use React, Vue, Svelte, or any other framework—even multiple frameworks in the same project:

---
import ReactButton from './ReactButton.jsx';
import VueCard from './VueCard.vue';
import SvelteForm from './SvelteForm.svelte';
---

<ReactButton client:visible />
<VueCard client:idle />
<SvelteForm client:load />

Real-World Performance Gains

I rebuilt my blog with Astro and saw these improvements:

Lighthouse score: 73 → 99
First Contentful Paint: 2.1s → 0.4s
Total Blocking Time: 890ms → 0ms
Bundle size: 247KB → 0KB (static pages)

Getting Started

Installation

npm create astro@latest
cd my-astro-site
npm install
npm run dev

Project Structure

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

Your First Page

Create src/pages/index.astro:

---
const greeting = "Hello, Astro!";
---

<html>
  <head>
    <title>My Site</title>
  </head>
  <body>
    <h1>{greeting}</h1>
    <p>Welcome to my Astro site.</p>
  </body>
</html>

Content Collections

For blogs, use content collections for type-safe frontmatter:

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

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    pubDate: z.date(),
    description: z.string(),
  }),
});

export const collections = { blog };

When to Use Astro

Perfect for:

Blogs and documentation sites
Marketing pages
Portfolios
E-commerce product pages

Maybe not ideal for:

Highly interactive web apps (use Next.js, SvelteKit, etc.)
Real-time dashboards
Complex SPAs with heavy client-side routing

Conclusion

Astro hits the sweet spot between static site generators and modern frameworks. You get the performance of pre-rendered HTML with the DX of component-based development.

If your site is content-heavy and performance matters, give Astro a try. The zero-JS default means your users get the fastest possible experience.