Why I moved this site from React to Astro

I started this site, my portfolio and blog, in 2024 using React. It did the job, but by this year it was holding me back. So I rebuilt it with Astro. The design and every link stayed the same. What changed is how the pages are made, and this article explains why that was worth doing.

The four problems with the old setup

1. The tool it was built on has been retired. The React starter I used was officially retired by the React team in February 2025. It no longer gets fixes, and its dependencies show it: running npm audit on the old project lists 105 known security advisories, 3 of them critical. Almost all of them are in build tools rather than in the code visitors download, but it’s a clear sign of a toolchain nobody is maintaining. The new project has 2, both moderate, in a build-time CSS tool.

2. Visitors got a blank page until JavaScript ran. The old site sent the browser an almost empty HTML file and a large script, and the script then drew the whole page. The HTML for my old home page had zero words of content in it. Everything appeared only after a 90 KB script downloaded and ran. On a fast laptop you don’t notice. On a slow phone, or for anything that reads the HTML without running scripts, the page was empty. With Astro, the home page HTML arrives with all of its 400-odd words already in it.

3. Every article was a coding job. Each article was its own React component, plus a route, plus an entry in a list. That’s a lot of steps for a few paragraphs. Now an article is a single text file:

---
title: My next article
summary: One sentence for the list and for link previews.
date: 2026-11-01
tags: [3D]
---

Write in plain Markdown. **Bold**, [links](https://example.com),
lists and code blocks all just work.

Drop that file in a folder, push, and it becomes a page with its own address, a reading time, topic tags, a place in the RSS feed and a link preview image.

4. There was no room for heavier features. I want to share 3D work here, and 3D needs a fairly large viewer library. In the old setup it’s easy to end up loading that for every visitor on every page, whether they look at a model or not. I wrote about how the new 3D viewer avoids that in 3D models on this site.

What Astro does differently

Astro builds every page into finished HTML ahead of time, when I publish, not in the visitor’s browser. JavaScript is only added for the pieces that actually need it. Astro calls these pieces islands.

On this site that means:

• Most pages load no JavaScript framework at all. The theme switch and the phone menu are a few lines of plain script.
• The Guess the Capital game is still a React component, and it’s now the only page that loads React.
• The 3D viewer only loads on pages with a 3D model, and only once the rest of the page is ready.

The numbers

I ran Lighthouse’s mobile test, which simulates a mid-range phone on a slow 4G connection, on local copies of the Projects page in both versions, several runs each. I used the Projects page because it’s the same in both versions, while the home page now has a 3D model that loads extra on purpose.

Projects page	Old React site	New Astro site
Lighthouse performance	94 to 97	99 to 100
Main content visible (LCP)	2.4 to 2.6 s	1.7 to 2.3 s
Time the page was busy (TBT)	60 to 160 ms	0 to 60 ms
JavaScript downloaded	90 KB	0 KB
Total downloaded	252 KB	219 KB

The total size is close, because most of it is fonts and pictures either way. The difference is the JavaScript. The old page couldn’t show anything until 90 KB of script had downloaded and run, and the phone was busy while it did. The new page needs no script at all, so it appears sooner and the phone has almost nothing to do while it loads.

What stayed the same

• The look. The same design, now starting in dark mode, with a button to switch to light.
• Every address. /projects/hr-bot, /resume and the rest all still work.
• Hosting. The site still runs on Cloudflare Pages, with the same build settings.

What’s next

Now that writing is easy, I plan to post more often. Expect 3D work, notes from running IT for small businesses, and a small tool for checking a domain’s email security setup. If you want to follow along, the RSS feed is the easiest way.