Kieran Brown

⚠ Minimum of 3 characters required

😔 No results found. Try a different search term.

PressESC to close

Eleventy Static Site Generator Switcheroo

31/12/2021

I've had this site since late 2017 and ever since then I've wanted to write blog posts about interesting tech I've used and techniques I've learnt. However, the reality is that I have been pretty lazy over the years or felt like I've not got that much to add when it comes to front end tech blog posts. Therefore, I'm going to make more effort into sticking to a more regular schedule.

That leads onto the current state of this site. I've done a few different versions over the years, the first being a set of completely static html pages with CSS and a little JS. It then evolved into using Perch CMS and gulp task runner. Then it was Gatsby JS which I did enjoy using but I was never really happy with it. That leads us to now and the current iteration, Eleventy.

This highlights my laziness or even more as I first started this change over to Eleventy back in September 2020. It is a common joke within this field that developers buy many domains with the intent of many side projects but in the end we don't end up doing anything with them and all we're left with is... many domains.

Eleventy

So why the move to Eleventy? Well the first reason is that it's very simple and easy to maintain. Because at its heart it's a static site generator which means I'm left with simple pages that should be quick and easy to load, without any dynamic generation from the server.

Another reason is its flexibilty. I wanted something that I can literally do anything with, create as many components as I want and still be as lean as possible. Eleventy allows me to do just that and best of all it's very easy to adjust & tailor it to my liking as it's written in JavaScript. Nice!

Tech

Using Eleventy (obviously as the title suggests) and Gulp. Now I know what some might think, that using something like Gulp is old school but I really don't mind. I'm using it to complie the Sass and JS and watch files when they've been edited and stream the updates across to the browser. I've used Gulp in the past for personal projects and have a Gulp Boilerplate which picks up a star on GitHub every now and again. I use it for getting up and running really quickly when I want to test a concept in JS or CSS. I know I could use CodePen for this but I like to inspect the elements and use dev tools so I find it much easier with this set up.