How this Site was Built

The previous post introduced this site. This one is about how it was built.

The stack

• Astro v5 — static site generator with excellent content collections support
• Tailwind CSS v4 — the new CSS-based config is a huge improvement over the JS config file
• Monaspace Neon — via @fontsource/monaspace-neon, no external CDN needed

Tailwind v4

Tailwind v4 drops the tailwind.config.mjs file in favor of CSS-based configuration:

@import "tailwindcss";

@theme {
  --font-mono: "Monaspace Neon", ui-monospace, monospace;
  --color-accent: #5a7a5a;
}

This is cleaner. The theme lives next to the styles it affects.

Zero JavaScript

All pages are .astro files that compile to static HTML. No React, no hydration, no JavaScript bundle. The site is as fast as a flat file server.

Content Collections

Astro v5’s content collections with the glob loader make it easy to write markdown posts and have them typed end-to-end:

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

Draft posts are excluded at build time by filtering on data.draft.

What I’d do differently

Nothing yet — it’s only been a week (at the time of this post).