This Website
About 9 months after I made my previous personal website, I’m already a whole lot better at frontend dev and system design in general, so I decided to start over from scratch.
My old website was raw JS and HTML, partly because I wanted to learn the basics, partly because I didn’t know any better. Things have changed a lot for this new site: I’m using Astro as the main framework, along with Tailwind and React, all written in Typescript. What a difference! So many things that were a pain before are either already built into Astro or a single React component away. I’m hosting the site from github pages, same as the previous site.
Being able to write posts in MDX is also amazing. All of my blog posts were HTML previously and there wasn’t really an overarching style, so a lot of them had custom formatting. Now I just type words and don’t have to worry about how they show up on the page. Images are also a lot easier. I think this will make me write way more blog posts, which is awesome - I already write all my personal notes / knowledge system in Obsidian.md so markdown is friendly and familiar.
I migrated all of my old posts from HTML to MDX by scripting Claude in 100 loc of python. I chucked in completely unmodified, horribly inconsistently formatted HTML and got out clean MDX, with links, images, and embeds all being handled. This worked really fantastically and I only had to edit things in a couple posts, and it cost about $1 of credits. If I used something else other than Claude it would’ve cost a lot less with probably similar or only slightly worse quality, but it’s $1, who cares. Sidenote, I’m really loving both OpenRouter and Pydantic’s new agent library - combined, they make LLM scripting very fast and fun. Pydantic gives free type checking and an easy interface to add tools, and Openrouter lets you swap between almost any LLM you can think of with a single API key. It’s really great. I also used this combo for ClaudeCar and will probably use it for many different things in the future.
I shopped around for a while for the right Astro template and eventually settled on Void. The main other one I was considering was AstroWind, but it’s huge, complicated, and kinda slow (at least it felt like that during brief testing) for a mostly static personal site. I like that with a smaller theme, I can mostly fit it in my head and edit things without changing 8 different files.
One thing I really don’t understand about this brave new world of ever-shifting frameworks that I’ve found myself in is why absolute imports aren’t more popular. @imgs/img1.png
is so, so much better than ../../../content/imgs/img1.png
, but it seems like everyone is just fine with their ../../../
’s. In Astro there’s not ways to get around all of them, almost anything imported in a markdown file is relative-only. Is it a technical limitation related to bundling? Maybe, but I don’t get why you can’t just parse an absolute filepath to make it relative on the backend and let users work with absolute only.
I’ve already modified the theme a lot and in the future I’d like to add search, subscription, comments, a CMS integration, and various other smaller features. But they can wait. I think I’ve finally, in the 3rd iteration of my site (Wordpress -> html/js -> astro/tailwind/react) found one that I really enjoy, understand, and can build on.