Architecting the Astro Rebuild: From Static HTML to a Living Site

Okay so I finally did it. After many years of telling myself “I should really redo my website” I actually sat down over a weekend and did it.

The old site was a bit dated. I had hand-coded HTML files from 2019 that I kept patching whenever I needed to add something. Want to write a new post? Go to blogger and write my mind, and then tweak the templates or themes just a bit every couple of years. I think the last time I actually wrote anything was 2024 because the whole process just… ugh. Life was too busy for me to rewrite a whole bloging CMS, or the dread of migrating away from blogger was too overwhelming. Then came the AI tools, which made me think… is the right time now?

Why Astro

I almost went with Next.js because that’s what everyone uses and I figured there’d be plenty of tutorials. But then I remembered I don’t actually need React for a blog? Like the whole point of my site is to display text and maybe some images. It’s not an app.

I read about Astro when doing my research and it seemed easy enough for me as I love markdown. The pitch is basically “we’ll generate plain HTML unless you specifically need JavaScript” which, yeah, that’s exactly what I want. No hydration, no client-side routing, just HTML files like god intended. Except with a build step so I don’t have to manually update sidebars anymore.

You write markdown files with some metadata at the top and Astro figures out the rest. I can move those files anywhere later if I get sick of Astro. That matters to me, probably more than it should.

AI as a collaborator

I used Claude & Cursor a bunch for this. If I didn’t use them, I’d probably never had found the time between my work and life, between busy schedules and weekend chores. The process involved drafting ideas, asking for alternatives, then making final calls based on those conversations. It helped me move faster through decisions I might have otherwise overthought. I won’t pretend it was all smooth. There were moments where I had to step back and manually tweak things that didn’t feel right. AI accelerates the work, but you still need to know what you’re aiming for.

Getting posts out of Blogger

This was the part I was dreading the most. I had stuff on Blogger going back to 2013. Some of it is cringe (I wrote about Scrum once, god help me) but I didn’t want to lose it.

Google Takeout is where Blogger exports your data. All the documentation I read pointed to a massive XML file, but all I got was a folder and some feed.atom files which has changed over the years. I spent a couple of hours vibe-coding the Python script to parse it and spit out markdown files. Had to handle embedded images too because Blogger hosts them on some Google server with its own CDN. I put the script on GitHub (bloggertakeout2mdx) in case anyone else needs it. It’s not pretty code but it works.

Design choices

I wanted it to feel warm. Not “dark mode startup” warm but like, actually warm. Cream background instead of white (#fdfcfa if you’re curious). Blue links because blue links work and I’m not trying to reinvent anything. Orange for the subscribe button because it needed to pop a little.

The font is Plus Jakarta Sans which was Claude’s choice for something semi-casual. It’s got slightly rounded edges? I don’t know how to describe it. It just felt friendly. Code blocks use JetBrains Mono because that’s what my editor uses and I didn’t want to think about it anymore.

For the blog listing I added a time timeline with the year on the left and posts on the right. I like it, it seems like one of those NYT articles where you scroll through the timeline of how events unfolded.

Stuff that took way longer than it should have

The sticky header. Getting the blur effect to work right on iOS. The spacing on mobile. Thanks to my finicky mind on deciding the design aesthetics, I probably spent two hours just adjusting padding values and refreshing my iOS emulator. First it’s too cramped, then it’s too spread out, then the menu shows up in two lines and sticky header was overlapping. Eventually I just made it simple and moved on.

I’m using Disqus for comments. This was another utility script I wrote to crawl my takeout folder and dump the comments into a WXR file. The repo I mentioned above has that script too if you’d like to use it. I didn’t want to lose the conversations. I disabled all the tracking and selling advertisers data, but until I can figure out a better commenting system, Disqus it is. Future me can deal with that.

The before and after

Anyway here’s the comparison. Click any thumbnail to see full size:

Is it perfect? No. There’s definitely CSS I could clean up, the mobile nav still bugs me a little, font sizing inconsistencies exist between pages and I should probably add dark mode at some point. But I actually want to write on it now, which was the whole point. Sometimes done is better than perfect or whatever that saying is. With my best buddies Claude Code and Cursor, I can figure it out later in another marathon session.

Now I just have to actually write things. That’s the hard part.