Up to 11ty

A few years ago, I moved my blog to a self-hosted Jekyll site and took complete ownership of its build and deployment. It's been fun writing content in Markdown, and applying sporadic improvements to the style, accessibility and speed of the site. However, many of the performance improvements have been to the post-build assets, such as minifying HTML and producing multiple versions of each image, which I have done so using Node.js and Gulp. This led to a fairly convoluted build process comprised of both Ruby and Node.js, which I have been keen to improve for some time.

Nothing Quite Fit

Recently, I started looking at completely rebuilding the site again. Believe me, this was not a decision to be taken lightly, having done so twice previously. As such, I was hoping to keep my content largely unchanged in Markdown, but switch the build technology. Lately, I have been using React a great deal and absolutely love it, so the Gatsby and Next.js frameworks that use it looked really exciting.

However, as great as they are, my content proved problematic and time-consuming to try and migrate. I use the Liquid templating provided by Jekyll to enable some interesting customisation, plus there is plenty of site configuration to be ported. Using JSX in Markdown via MDX looked a good fit, but there was still a fair amount of work to be done. Ultimately, I delayed efforts to rebuild the site.

... Until 11ty Appeared

Another useful CSS Tricks article piqued my interest in Eleventy, and the first line of its Overview instantly grabbed me:

Eleventy was created to be a JavaScript alternative to Jekyll.

Marvellous: I could keep my existing structure, adapt to this new framework and stick to Node.js! As ever, it was quick to get going, but there were plenty of caveats, mostly covered in the incredibly helpful article Turn Jekyll up to Eleventy. Even when things were missing, like the helpful Liquid filters provided by Jekyll, they were quick to replace in the .eleventy.js file:

eleventyConfig.addFilter(
    "truncate",
    (text, maxLength) => (text || "").substr(0, maxLength || 160)
)

After a solid night's work, this site was completely ported, the build times are a little quicker, and I added another small performance improvement that took it back to a perfect PageSpeed score 💯

Overall, I'm extremely happy with this current setup. Getting it up and running couldn't be simpler, especially with the one-click deploy starter kits from Netlify, and you can customise it as much as you need. Why not give it a go, and see if you can join me on the Eleventy Performance Leaderboard? 😁