Yixuan::Rebuilding My Website with Astro

If I have seen further, it is by standing on the shoulders of giants.

So is this website.

Open Table of contents

The first one
“One day”
The question I should have asked earlier

The first one

This isn’t the first time I’ve built a blog. Back before the AI era, I built my personal website by writing code line by line, and got to enjoy the small joy of crafting my own UI components from scratch.

It was written in the best static site generator of its day: Gatsby, famous for its GraphQL data layer that made every data source queryable, its enormous plugin ecosystem, and the “blazing fast” sites it produced. But nothing good lasts forever in the frontend world. Netlify acquired Gatsby in early 2023, most of the core team left within months, and the framework quietly went into maintenance mode. My website was built on a dead framework, and I knew I’d have to rebuild it on something else one day.

The old Gatsby blog viewed through the Wayback Machine: a sidebar with my name and navigation on the left, and a list of posts with descriptions and tags on the right — The old Gatsby blog, as remembered by the Wayback Machine.

I was obviously not the only one who realised it was time to leave Gatsby. But what next? Frontend frameworks never stop churning, and a natural successor had already emerged. Astro is fast, content-first, and its islands architecture ships zero JavaScript by default. I’m going to bring my website to Astro, one day!

“One day”

Given ~~my continuous procrastination~~ being busy finding a job while the market was going to hell, fighting for a visa that lets me work in the UK, finding my footing in my first job and (genuinely) enjoying the context-switching in it, I could hardly find the inner peace to sit down and rebuild my poor website from scratch. Even with AI.

I’ve been using AI to build a lot of things, and its capability at building software still astonishes me. But there was one thing I couldn’t convince myself to trust it with: the user interface. Not making the UI work, but making it look right. AI generates code that gets the interface close to what you want, and close is not exact. Replicating my previous blog pixel by pixel turned out to be one of those last-10% problems that eat 90% of the time. So I stalled.

The question I should have asked earlier

Then I started to question the premise. Did I really need to replicate the old blog? Was the original design so precious that every detail had to be reproduced without compromise?

Obviously, no. I didn’t even design it in any meaningful sense. It was inspired by other people’s blogs and tweaked with my own flavour. So why struggle to duplicate a surface that AI can’t quite reach and I don’t have time to hand-craft? The whole point of having my personal website is to write and track. Shipping something imperfect and starting to record beats wandering around a pixel-perfect reconstruction of the past.

So I did the same thing I did the first time, I stood on someone else’s shoulders. This website is built on top of AstroPaper. I love its minimalist design, though it is a little plain out of the box, and I don’t want to look average. So I added a few things with my AI friend:

1. A redesigned header

The left side of the header uses :: as a namespace separator to give the site a bit of identity. If you’ve ever used a programming language with namespaces, you get the point (Yixuan::Posts, if you like). Astro’s view transitions, built on the browser’s View Transitions API, animate the header as you navigate between pages.

The header morphing between pages, courtesy of view transitions.

2. A softer theme, and a softer switch

I added a transition between the light and dark themes, because the page shouldn’t just slam into darkness. I also reworked the colours with some inspiration from the Solarized palette, hoping to make the whole site softer and more comfortable to read.

The theme switch easing between the Solarized-inspired palettes instead of snapping.

3. A tidier post page

A few tweaks to the post page itself:

Tags now sit above the content, so you get a quick sense of a post before committing to it.
There’s an estimated read time next to the date.
The reading progress bar is gone. On Safari on iPhone, the page content scrolls underneath the system status bar, above the progress bar, which made the bar look like it was cutting the content off. And the back-to-top button already shows reading progress, so the bar wasn’t earning its keep.

4. A gallery

A new Gallery page, to share and remember the photos I take. Building it turned into a small project of its own, and I wrote a separate post about it here if you’re interested.

This isn’t a complete list, and it never will be, because I’ll keep tweaking as I go. But my personal website is finally back to life. Thanks for visiting, and I hope you find something here worth your time.