So... I Rebuilt my Website...

First off - Happy new year! 🎉

Secondly, I’d like to mention that I’ve rebuilt my website, from the ground up almost. It’s full of improvements to existing features, as well as a few new ones too.

I full well might end up writing an individual post on each new feature or change, but honestly, it’s me, so who knows 🤷‍♂️.

So… Why?

It’s been on my mind for the past few weeks (months even) that I wasn’t 100% happy with my website. It had things like a combination of Sass and styled-components in places, and also the usual things of packages have fallen out of date, packages that are installed that don’t need to be, that sort of thing. If I had a word I’d use to describe it, it would be… “Urrugh…”

Gatsby itself was falling really behind, and had become out of date, the old version was running on Gatsby v2.32.11 - this newer version runs on v4.2.0.

And there has been multiple useful features that I’ve been missing out on Gatsby 3 has had massive speed improvements when developing. Which is definitely a welcome change form the 10/15 seconds I had to wait. 🙃

I did originally try combing through dependencies and features, leave any I was happy with, change anything I needed but wasn’t happy with, and removed any that I didn’t need at all. But after a while of head scratching, I just thought “*expletive* sake, I’ll just start from scratch”.

So what’s changed?

There is quite a bit that has changed, and I guess “The whole thing” while appropriate isn’t a helpful answer, so I’ll go into detail on a few things that has changed.

Better Performance

Now, I know the old site was pretty fast (I mean, I thought so) - but it wasn’t running at it’s best. With all of the dependencies updated, it now performs far better.

I even managed to get it to have 100/100 on all four of Performance, Accessibility, Best Practices and SEO!

See the full Lighthouse report here.

Better og:image Generation

The old og:image generation was honestly just fiddly, and a bit of a faff. What I had was a script which I would need to (And very occasionally forget) to run to generate the images. The issue was, it required the site to be running in order to take a screenshot of everything laid out, so I couldn’t really add it to the gatsby-node file. I had to run the site, then run the script, and that would add the screenshot to the folder of each blog post.

For a while, I’ve been tempted on writing an article on how I’d generate them for my articles - but I sortof kept on thinking “There has to be a better way?”

So, now - I’ve followed the exact same approach as Wes Bos - who uses Netlify Functions and puppeteer to generate the image whenever it’s requested.

I do think overall it’s miles better, but there is just something which is still whispering “It’s better to run it at build time” to me… So I might dive in a bit deeper to see how I can make it run at build time.

Better Search

It’s more to do with adding documents to the search results if you like. The site itself is JAM Stack, but I have a MeiliSearch server which has all of the required content for blog post cards. Whenever I create a new blog post - I have to also add a JSON document to the index.

This was somewhat already done for me, I even wrote an article on it. Everything on that article is still true, apart from the part where I talk about updating MeiliSearch… For some strange reason, the Netlify Function didn’t seem to always run. I could come to the search and find that everything is up to date, and a few deployments later it’s not been updated…

To be honest, I’ve always had a bit of a hard time with Netlify Functions/AWS Lambdas - Every single time I come to create some serverless infrastructure of sort, I end up having to use a different method, but that’s another conversation for another day…

Site Responsiveness without Media Queries

This is just something I thought I’d throw in just for fun to see if I could do it. A while ago I came across this article by about why you might not need media queries anymore. I thought it was an interesting take, and decided to see if I could see if I could manage to create a site that was responsive, but without any media queries.

Now, if you search @media in the source code, you will find some, but that is for something different. There isn’t any @media screen queries I should say…

Now that everything is implemented, the website feels a lot more “fluid”. The best example is probably the the card grids/lists on the pages. This has been done by using non-other than flexbox! Telling flexbox that you want content to go underneath by using flex-wrap: wrap basically creates a new row in a layout.

It’s kinda interesting to me. I’ve always somewhat seen flexbox as some kind of revolution from float - where things are all kept on one line. It was nice to revisit flexbox and use it in a way I’ve not really done in the past.

What’s new?

There are a few things which I’ve also decided to add to the website…

Dark Mode Support

Let’s be honest, my website is white, (with a hint of green, and a bit of blue)… And that’s not all that nice when you prefer dark mode… So I’ve fixed that!

Whenever you have your device settings set to use dark mode - the whole website will… Uh… Darken… I’ve done this by using prefers-color-scheme: dark in the CSS.

Some browser extensions may also override these settings, but honestly - I’m ok with that, as those settings may be something users are comfortable with.

Related Articles

This is just something I’ve seen on a lot of other blogs at the bottom of the page of an article. Hopefully you can see something else you find interesting after you have finished reading.

The related posts are decided by the tags a post can have. In this case sam.bunting.dev - so all of the articles at the bottom of this page will also have that tag.

Feature Images for Blog Posts

This is something I’ve seen myself wanting to have at some times. Basically - the images would appear on cards on the site, and if there is one, it would display an image with the blog post.

I’ll be honest - I’m not fully onboard with it just yet (That’s why a lot of cards don’t have images), but it’s more there so I’m happy when I do want to have one with an image 😄.

Wrapping Up

So… That’s what I’ve been up to! I hope you like the changes!

I have a ton of ideas on what I want to write blog posts about in the future, and the website is in it’s best shape it has been in a long time. If not ever!