Every developer I know has done it at some point; learn a new technology - possibly through a POC or small personal project, rebuild your personal site using that technology, write a blog post about how awesome that new tech is. If you're reading this, you can guess where I am. This site is on iteration 4? 5?. I'm not sure anymore.

First there was a node server delivering some barebones html, hosted on IBM Bluemix (yeah I have no idea why I did that either). Then a couple of iterations of a Vue SPA, all rendering client-side. Then a couple of blogging engines building out some static HTML, then a Jekyll site hosted on GitHub Pages, with a few different themes. That last one lasted the longest, probably 3 or 4 years, judging by the outdated footer.

But onto this site - for once, I'm not going with the newest or shiniest technology. I'm sticking with my tried & tested favourites, plus a decent todo list of refactoring & new features.

The Stack

It's simple, and as close to my personal definition of "industry standard" as you can get.

• Nextjs to build out pages server-side
• Styled-components for css
• A simple 'database' of blog posts, written in markdown and using [remark] to convert into HTML & [gray-matter] to parse the metadata sections.
• Repository (code, markdown posts & assets) on GitHub, deployed & hosted with Vercel

With this setup, I'm able to statically build all of the landing pages (home, about, CV, links, etc), as well as all of the blog posts (such as this one). This keeps things simple - the posts sit in a directory in the site's repository, so I'll need to redeploy each time I add a new post, so I don't need to do anything fancy with ISR.

Why?

It works. End of post, pretty much. Building & deploying with Vercel is a) easy and b) free. Using Next is then a natural choice, especially when building out lots of static content that won't change after build-time. It also helps get those Lighthouse scores as close to 100% as possible, which is exactly what I want.

React with styled-components is my favourite way of building out user interfaces, and combining your semantic structure (HTML), styling (CSS), and logic (JS) for each component feels good too.

Future enhancements

This is more of a todo for myself, when I get round to it.

• Convert to TypeScript. There's not really any complex datatypes going on here, after all it's a basic blog, but some extra type-safety is always welcome. Plus the DX is better.
• Look to integrating a basic CMS. I've been playing with [sanity] recently, and given it's got a free tier, I'd be tempted to add a basic CMS with a few fields, just to improve the editor experience.
• Add RSS. Just because it's nice.