🫟 Leon's Notes
中文
← Back home

Rewriting My Blog in Astro: A Study in Less Is More

2026-05-28 2 min read Tech / Frontend

The previous version of this blog was built on a full-featured frontend framework, and the build output was stuffed with a runtime I never actually used. Every time I finished a post, watching a few hundred kilobytes of JavaScript get pushed to readers who just wanted to read quietly felt wrong.

So I decided to start over. This time, I wanted to put content back at the center.

Why Astro

I compared a few options, and the reason I landed on Astro is simple: it ships no JavaScript to the browser by default. For a text-first blog, that’s exactly the starting point I wanted — add interactivity only where it’s needed.

Tools exist so you can forget about tools. When the stack quietly steps into the background, the writing itself comes forward.

Distilling Design into Tokens

The biggest win of the rewrite was collapsing every visual decision into a set of CSS variables. Color, type, spacing all have a single source of truth — change one place, the whole site updates:

:root {
  --bg: #f7f5ef;       /* warm parchment background */
  --text: #2b2a26;     /* warm near-black text      */
  --accent: #1b365d;   /* restrained ink blue       */
  --measure: 680px;    /* comfortable reading width */
}

Inline code that occasionally shows up in prose, like npm create astro@latest, reuses the same monospace font and border style, keeping the whole page consistent.

A Few Notes on Reading Experience

  • Line height set to 1.85, giving long-form text room to breathe;
  • Reading column locked at 680px — the most comfortable line length;
  • The accent color appears only in links and a handful of key spots, never more than 5% of the page.

After the rewrite, the homepage’s JavaScript went from a few hundred KB to nearly zero — and so did the mental weight I felt each time I sat down to write.


If you’d like a quiet personal blog too: less is more, take it slow.