Getting Started with Astro: What Powers This Site

This blog is built using Astro; a modern static site framework that makes fast, content-heavy sites without the usual bloat.

Why Astro?:

• I don’t need a full JS SPA to serve short, sharp tech explainers or my dribble.
• I want speed, Markdown support, and clean separation between content and layout.
• And I want control; not another all-in-one CMS black box. You’ll no doubt see updates to style, layout and functionality over time.

Let’s walk through how I got this site running, how Astro uses Markdown and content collections, and why it makes sense for projects like this.

Quick Setup

It’s very simple to spin up a new Astro project:

npm create astro@latest 

That’s it! - Well, not quite, once you’ve agreed with a ‘y’ and entered a folder name, you can then choose from various starter templates. I chose the ‘minimal (empty)’ template and started building out from there. The wizard for building an Astro Project, is quick and simple.

How Astro Uses Markdown and Collections

Astro lets you write your site content in plain .md (Markdown) or .mdx (Markdown with components). This is perfect for blogs, guides, reviews and other content-heavy sites like this one.

Markdown Files = Your Content

Each post on this site is written in a .md file. For example:

Inside that file, it uses frontmatter to define metadata:

---
title: "My First Post"
excerpt: "A short summary of the post"
date: 2024-01-01
tags: ["tutorial", "astro"]
featured: false
---

Below the frontmatter is the standard Markdown content. Astro uses this metadata to organise, sort, and filter content across the site.

What Are Collections?

Collections let you define a structure for your Markdown content. It’s a easy way to tell Astro what fields to expect and validate using a schema.

Example config in src/content/config.ts:

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

const tutorials = defineCollection({
  schema: z.object({
    title: z.string(),
    excerpt: z.string(),
    date: z.date(),
    tags: z.array(z.string()).optional(),
    featured: z.boolean().default(false),
  }),
});

export const collections = {
  tutorials,
};

This validates every Markdown file in src/content/tutorials/ against the schema, and provides a structure for each post. As explained, it’s a more efficient and defined way to easily filter and sort posts.

Overall, Why Astro?

• Keeps your content structured and type-safe
• Works well with dynamic routing and filtering
• No database or CMS needed
• Easy to scale, just add .md files and go

A core benefit, I probably should’ve mentioned earlier, Astro is framework agnostic. Astro is like a pick ‘n’ mix of frameworks, React, Vue, Svelte, Solid, etc. Like using React, just run:

npm install @astrojs/react

Stick it in the astro.config.mjs file:

import react from '@astrojs/react';

export default {
  integrations: [react()],
};

Then once the React (or other flavoured sweet) is in the src/components, it can be pulled in to a .astro page by importing it in the header, like this counter example.

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

<Counter client:load />

If you like storing your site in Git, working with plain text, and avoiding WordPress-style overhead, Astro’s Markdown + collections setup is perfect. Learning a new framework like Astro also aligns with my constant drive of learning.