·
astro introduction

Welcome to Astro

A quick introduction to building content sites with Astro's powerful static site generation.

Astro is a web framework designed for content-driven websites. It combines the best of static site generation with the flexibility of modern JavaScript frameworks.

Why Astro?

The core philosophy of Astro is simple: ship less JavaScript. By default, Astro sends zero JavaScript to the browser. This means faster load times and better performance, especially on slower connections.

Key features

  • Islands architecture — Hydrate only the interactive parts of your page
  • Content collections — Type-safe content with Zod schemas
  • Framework agnostic — Use React, Vue, Svelte, or plain HTML
  • Zero JS by default — Add interactivity only where you need it

Getting started

Creating a new Astro project is straightforward:

npm create astro@latest

This command will scaffold a new project with your choice of templates and configurations.

Content collections

One of Astro’s standout features is content collections. Define a schema once, and get full TypeScript inference for all your content:

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

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

This type safety extends to your templates, catching errors before they reach production.

What’s next

In upcoming posts, we’ll explore more advanced patterns with content collections, including:

  • Draft and publish workflow
  • Tag-based filtering and navigation
  • SEO best practices

Stay tuned for more practical guides.