Getting Started with Astro

Astro has quietly become one of my favourite tools for building content-heavy websites. The pitch is simple: ship HTML and CSS by default, opt in to JavaScript only where you need it. After building this portfolio with it, I want to walk through the core ideas and show you why that tradeoff is worth caring about.

Why Astro?

Most JavaScript frameworks assume you want a full SPA. Astro flips the default: pages are rendered at build time to static HTML, and interactive components (“islands”) are hydrated only when they appear in the viewport. For a portfolio, a blog, or a marketing site, this means fast load times without fighting the framework.

The other thing I appreciate is content-first ergonomics. Astro’s Content Collections give you a type-safe layer over Markdown and YAML files, validated by Zod schemas at build time. You get autocomplete in your editor and build errors instead of silent runtime surprises when a field is missing.

Setting Up a Project

npm create astro@latest

The CLI scaffolds a project with a sensible layout. Pages live in src/pages/, content in src/content/, and components in src/components/. Astro components use a .astro file format: a frontmatter-style script block at the top, then HTML-like template markup below.

---
const greeting = "Hello, world";
---
<h1>{greeting}</h1>

Content Collections

Define a collection in src/content.config.ts:

const posts = defineCollection({
  loader: glob({ pattern: '*.md', base: './src/content/posts' }),
  schema: z.object({
    title: z.string(),
    publishedAt: z.date(),
  }),
});

Then query it in a page:

import { getCollection } from 'astro:content';
const posts = await getCollection('posts');

Astro validates every entry against the schema at build time. Dangling references, wrong field types, and missing required fields all surface as build errors — exactly where you want them.

Where to Go Next

The Astro docs are genuinely good. The integrations ecosystem covers most common needs: Tailwind, MDX, sitemaps, and image optimisation are all first-party. For anything dynamic — user auth, server-rendered pages — Astro also supports SSR via adapters for Node, Netlify, Cloudflare, and Vercel.

If you’re building something content-heavy and want to stop fighting your framework, Astro is worth an afternoon.