A modern redesign of my personal blog, rebuilt from Hugo/Blowfish to Astro + Tailwind CSS with fuzzy search, dark mode, and custom typography.

Day 24. I rebuilt my own blog.

This one's personal. My blog at n9o.xyz has been running on Hugo with my own theme, Blowfish, for years. I built Blowfish, I maintain it, thousands of people use it. But I've been wanting to move to something different for a while. A fresh visual identity, a different stack, something that feels more like me and less like a theme I made for everyone else.

So today's project was Reblog: a ground-up redesign of n9o.xyz, rebuilt from Hugo to Astro 5 with Tailwind CSS.

Try it out yourself here

The Prompt

This wasn't a single prompt. This was 18 Watchfire tasks over the course of the day. The initial direction was something like:

> "Build a personal blog with Astro 5, Tailwind CSS, and MDX. Dark mode, featured posts, tag filtering, fuzzy search, a resume page, a music page, and a projects page. Custom typography with Sora, Crimson Pro, and JetBrains Mono."

From there it was an iterative process. Layout adjustments, color tweaks, adding structured data, fixing print styles, wiring up series support for multi-part content. The kind of work that normally takes weeks of back and forth between design and code.

What I Got

A complete blog platform with six distinct sections.

The homepage has a hero section with my photo, title, bio, and social links. Below that, a featured posts section with large cards, then a recent posts grid. Clean, centered, and warm. The dark mode uses a muted olive-brown palette that I actually really like. It's not the typical dark gray or pure black.

The posts page has tag filtering along the top. Click a tag, the list filters instantly. No page reload, no server round trip. Just Astro doing its thing.

Fuzzy search is powered by Fuse.js. It loads client-side and searches across titles, descriptions, and tags. This is one of the few interactive islands in an otherwise zero-JS site. Astro's island architecture means the search component hydrates on its own without dragging in a framework for the entire page.

The about page pulls in my bio, links, and a mentoring callout. The resume page lists my career history with company logos and role progression. Both are clean and readable.

The projects page showcases open source work with status badges, tech tags, and links to repos and websites.

...

---

Read the full article →