Firstly I’d like to say a big hello and welcome back! I know it’s been a while but I’m back with a new design, which I really love as well as a new tech stack behind the scenes which I’d like to tell you a little more about.
Some background
Before we dive in though, a little background. The previous version of this website was built with Gatsby.js which is pretty awesome and I’m glad I took the time to try it out. The documentation and community is amazing with lots of starter templates for every website imaginable. It’s also based on React.js which is still growing in popularity so it’s somewhat familiar to most of us. I would still highly recommend it as a great framework.
However, I always thought that React generated just a little too much JavaScript for my liking. Especially for a simple website where the amount of actual required Javascript was minimal (currently less than 50 lines of JS code for the whole site). So while I think it’s a really great option (and it gave me the opportunity to practice my react skills) it was a little too much for this particular project.
When I decided to create a new design for this site and bring it back to life, it wasn’t my intention to completely re-code it. The plan was just to update a few of the components and CSS since that would be quicker. However I quickly found that it was taking longer and I wasn’t really enjoying the process. Plus I still felt like React was a little too much for a personal site that only had a handful of pages. So I decided it was time to dig out my list of new tech I’ve been wanting to try (which I know every developer has) and see if there’s a better option. Enter Eleventy (also known as 11ty).
Eleventy is a javascript based static site generator and does require node.js to generate the site files (similar to Gatsby) but my favourite part is that you get to choose everything including the templating language. I really appreciate the flexibility it offers and the fact that I could set up my project exactly the way I wanted and it worked perfectly. The other great thing is that it has zero boilerplate client side JavaScript, which means any JavaScript on the site is only what you put there. This is brilliant and means that it will even work for people who have javascript disabled (or at least mostly depending on how much interaction you built in - which is more than can be said about a lot of sites these days).
The fact that there is such a huge prominence put on accessibility and performance is another reason for my choice. I love that the community encourages developers to get the highest lighthouse scores and make sure that the websites we create are accessible and performant.
In total, it took about 2 and a half weeks to completely re-code my entire site over to Eleventy (or more accurately 2 weekends and a few evenings) which I was really impressed with and it’s generally been a pleasure to work with! I decided to use nunjucks for templating and found it really easy to work with even though I had never used it before. I have also heard good things about it’s integration with netlify, although I didn’t go down that route so can’t speak from experience. I highly recommend giving Eleventy a go for anyone who is thinking of starting a personal site or a side project.
Useful links
I wanted to leave a few links for both frameworks/generators that I found really useful in case anyone else was curious and wanted to try them out!
Gastby
Eleventy
What’s next
Now that the site is in better shape you can count on seeing some new posts a little more frequently. I also want to create some starter themes, templates and some other resources so do keep an eye out for those and if you have any suggestions of articles or resources you’d like to see feel free to reach out on my social media channels.
