← All posts

Getting Started with Astro

astroweb devtutorial

Astro has quickly become one of my favorite tools for building websites. It’s fast, flexible, and has a fantastic developer experience. Let me walk you through the basics.

What is Astro?

Astro is a content-focused web framework. Unlike traditional SPA frameworks, Astro renders your pages to static HTML at build time and only ships JavaScript when you actually need it. This means your sites are blazing fast out of the box.

Key features

  1. Zero JS by default — pages ship as pure HTML unless you opt in
  2. Component islands — interactive components hydrate independently
  3. Content collections — type-safe markdown and MDX with schemas
  4. Framework agnostic — use React, Vue, Svelte, or plain Astro components
  5. Built-in optimizations — image optimization, CSS bundling, and more

Getting started

First, create a new project:

npm create astro@latest

This fires up a friendly CLI that lets you choose a template. I recommend starting with the minimal template and building up from there.

Project structure

A typical Astro project looks like this:

src/
├── components/   # Reusable UI components
├── layouts/      # Page layouts
├── pages/        # File-based routing
├── styles/       # Global styles
└── content/      # Content collections

Every .astro file in pages/ automatically becomes a route. Simple and intuitive.

Content collections

One of Astro’s killer features is content collections. You define a schema for your content, and Astro gives you type safety and validation:

import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()).default([]),
  }),
});

Then you can query your content with full TypeScript support. No more guessing about frontmatter fields.

Why I chose Astro for this site

  • Performance — static HTML means instant page loads
  • Simplicity — .astro files are just HTML with superpowers
  • Markdown — first-class support for content writing
  • Growing ecosystem — excellent integrations for RSS, sitemaps, and more

Wrapping up

If you’re building a content site, blog, or portfolio, Astro is hard to beat. The developer experience is excellent, the output is fast, and the learning curve is gentle.

Give it a try — I think you’ll like it.