The previous version of my blog was hosted on GitHub Pages, using Jekyll in a pretty standard setup. I was reasonably satisfied with it. I got it up and running pretty quickly using a lightly modified version of Minimal Mistakes, and it was very easy to add new posts as it is all just markdown.
However, I was hitting a few problems which I’d been meaning to address for some time. Firstly was that I’m not super familiar with Ruby, and every time I try to do something with it I seem to eventually run in to a mess with conflicting Gems which makes keeping things up to date and well maintained more difficult. I did manage to break some of the look-and-feel of the site at some point through doing some upgrades and then not being able to mimic how it used to be. Not deal-breakers, just minor inconveniences. Google was also periodically telling me that my site wasn’t particularly mobile-friendly, something else I wanted to address.
I’ll be the first to admit, front-end/web development is not my strong suit. I am far more comfortable on the backend, working with APIs and databases. Whenever I am faced with having to deal with CSS I’ll put it off, particularly for personal projects when it’s not totally broken. As such I’d never really played properly with React, or some other cool stuff I’d seen kicking around like Next.js and Vercel. I’d been meaning to fix up my personal blog for months, so this looked like a good excuse to try some of these things out.
To speed everything up, I started from John Polacek’s Next.js MDX Blog Starter. I picked this as it would give me a very familiar (and easy) way to contribute to my blog, but with way more flexibility for future fancy React components. From here I copied over my existing markdown files from my old blog, making only a few tweaks to the way the front-matter worked and some formatting differences for code highlighting. Then I got to work with fiddling with the Theme UI configuration to get something I was happy with. Pretty straight forward!
Then I got it connected to Vercel. This feels like a pretty revolutionary way to set up and run with small websites like mine for free – it was so simple and I immediately got my deployment pipeline set up for me. Additionally I added the Lighthouse integration so I could really easily see how my new site performs and get some feedback on how I could easily improve it.
Overall I’m really pleased with the results. I found it far easier to tweak the styling than my previous site too. I’m sure I’ll be playing around with the look and feel elements much more now.