A couple of years ago, I stumbled upon Dan Abramov's blog, overreacted.io. It immediately became my benchmark. Despite my background as a Backend Developer, I was obsessed with making my blog feel like his. The reason was simple: it was superfast.
My requirements were simple:
- No heavy backend: I didn't want to manage a framework like Laravel or Django for a simple blog.
- Markdown-first: No writing posts in pure HTML; I wanted the simplicity of
.md. - Minimal Tweaking: I didn't want to spend weeks fighting CSS or JavaScript.
- Speed: It had to be fast. Since I only plan to render text and code, there was no excuse for lag.
I started with 11ty and ran it for about two years. I didn't plan on changing it until I started using Claude. Once I got a grip on LLMs, I knew migrating to a modern framework was doable—just a matter of tokens! Since I have a heavy workload at the office, I couldn't afford to spend much time on this, so I leaned into AI to bridge the gap.
Here is how I finally got there.
The Evolution
This was my first time using Nunjucks (.njk) files. The documentation was relatively easy, but I didn't have much time to invest. I used Microsoft Copilot to help with the setup and deployment to Cloudflare Pages—back then, 'Vibe Coding' hadn't been invented yet!
- Pros: Great speed due to static HTML; multiple page layouts; easy deployment.
- Cons: I was still writing posts in HTML (my mistake for not setting up Markdown templates properly); full page reloads felt dated; the build process felt unfamiliar.
With Claude, Antigravity and Cursor, my confidence grew. I felt I could build anything with the right prompting and research. Astro initially seemed like the perfect successor.
- Pros: Migration was fast using Claude; Markdown support offered peace of mind; Astro View Transitions were extremely fast on Desktop.
- Cons: Performance tanked on mobile. Clicking a post caused the page to "freeze" for a few seconds. Even with prefetching, system fonts, and syntax highlighting tweaks, the mobile experience was poor.
The goal was an "instant" feel. Research using AI indicated that React Server Components (RSC) would work. Here’s what was implemented:
- Next.js App Router: Pages were converted to Server Components without
"use client"directives. - Build-time Syntax Highlighting: Shiki with a CSS-variable theme was used to keep the HTML payload small.
- System Fonts: Web fonts were replaced with system fonts - boring, but fast.
- AI-Driven: Manual coding was kept to a minimum through prompting and testing.
Key Takeaways
- Mobile is the Benchmark: If the blog is fast on a desktop but slow on a phone, the architecture is failing. Mobile browsers are sensitive to DOM size and JS execution.
- AI as a Force Multiplier: AI (Gemini/Claude) helped identify bottlenecks and make quick pivots. However, the engineer must still guide the process. Testing for the human experience is essential.
- Persistence Pays Off: Transitioning from a backend mindset to modern frontend architecture takes time, but achieving the "instant" feel is worth it.