How I Built This Blog

This blog runs on Astro, plain CSS, and not much else. Here’s why, and how it works.

#The stack

The entire site is static HTML and CSS. No React, no Vue, no client-side JavaScript required to read a post. Astro compiles markdown files into HTML at build time and ships zero JS by default.

simple-blog/
├── src/data/blog/    # Markdown posts
├── src/pages/        # Astro page templates
├── src/layouts/      # BaseLayout, PageLayout, PostLayout
├── src/components/   # Header, Footer, ThemeToggle
└── src/styles/       # One CSS file. That's it.

The only JavaScript on the page is a tiny inline script for the dark/light theme toggle. Everything else is pure HTML and CSS.

#Why not Next.js?

I’ve used Next.js for plenty of projects and it’s great — for applications. For a blog that’s literally just text? It’s like hiring a construction crew to hang a picture frame. Astro does exactly what I need: turn markdown into fast, static pages.

#The design

I wanted it to feel like a book, not a website. System serif fonts (Palatino, Georgia), warm cream backgrounds, generous line height, and a reading measure capped at 65 characters. No cards, no rounded corners, no shadows — just text and whitespace.

The focused reading mode on post pages strips away the header and footer entirely. When you’re reading, there’s nothing between you and the words except good typography.

#Deployment

Push to GitHub, Vercel builds automatically, pages are served from their CDN. The whole site builds in under two seconds.

Sometimes the simplest stack is the right one.