Website Redesign v10

Published: ....
Last modified: ....

Share this post on Bluesky See discussion on Bluesky

I've done a number of redesigns/rewrites of this blog over the years, so many in fact that I've lost count, but here's a few older blog posts talking about those redesigns/rewrites:

"v1" - November 2015
"v2" - April 2016
"v3" - August 2016
"v4/5???" - August 2016
- At this point I lost track of the number of rewrites of my personal site 🤣
"v6" - March 2017
"v7???" - December 2018

I know I released a few rewrites in between and since those posts though - and since I'm entering the 10th year of active development on my blog I figured I'd call this one the 10th version of my personal site.

You can checkout the blog posts tagged with the Redesign tag to see all related redesign blog posts!

TL;DR

For those that just want to look at the code - check it out here!

Framework:

For a while now I had been using Next.js as my go-to web framework (or I suppose meta-framework). I've even written about it a few times!

However, I've started to move away from the , I've started to host my various side project websites on Cloudflare instead of Vercel, and with that I've opted to use a different meta framework, that's a bit less of a black box than Next.js.

For the past few months I've been heavily using Waku, which is a React Server Component compatible framework built on Vite!

It's been a breath of fresh air to use Waku compared to Next.js - I feel like I have control over how most of my application works as opposed to what Next.js limits you to. There are still some aspects of Waku that I'm not a huge fan of - but it still feels like a great option (even though it hasn't officially had a stable 1.0 release yet)! ^{[1]Jump to footnote}

Features:

Originally - I wanted to heavily invest in some kind of CMS-like setup for my site. Right now I duplicate quite a bit of content between my personal website and my notes within Obsidian (even this blog post started out in Obsidian until I copied it into my website repo!).

However I think I ended up spending way too much time overthinking how to approach that and instead opted for an implementation that was fairly similar to how my site worked with Next.js before (I do a decent amount of "code generation" than I did before, which I talk about below).

Once I got to work carrying over the routes and blog posts from my previous blog - I realized that I could build out some of the things that I've wanted for a while now on my personal site!

Including:

Related blog posts (see the post "cards" below this blog post as an example)
A limited search feature and a command menu (try hitting cmd + k and then searching for things)

My hope is that I'll be able to build out more features in the same vein as those in the future too!

Code Generation:

For both of the two new features noted above - I needed a single "index" of all my blog posts to be able to easily scan through and provide related blog posts based on tags, and search based on title/description/tags etc.

My previous website had the ability to do some of this also but I took a slightly different approach this time. Previously when creating a new blog post I'd run a script to scaffold out the MDX page for the post and also add the details like title, tags, description, etc all right when I ran the script to a single JSON file.

This worked - but it meant if I wanted to change the description, or the title, or anything else about the post I'd have to find the entry in this JSON file and then update it.

My new setup is a bit "lazier" instead, it generates that JSON data structure during builds (or watching during dev), which means the blog post MDX file is the true source of truth for that information instead of having it be distributed across a few files.

Footnotes:

👆Back to reference I've wanted to also give Redwood SDK and also Parcel's RSC support a try out at some point soon too!

Website Redesign v10

Framework:

Features:

Code Generation:

Footnotes:

Tags:

Related Posts

Web Development

Development

Redesign