Up to 11ty
Without too much pain, I am now solely using Node.js to build this blog, and improve it along the way.
Published on 2 min read
Written 6 years ago, so some details may have moved on.
A few years ago, I moved my blog to a self-hosted Jekyll (opens in a new tab) site and took complete ownership of its build and deployment. It's been fun writing content in Markdown (opens in a new tab), 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 using Node.js (opens in a new tab) and Gulp (opens in a new tab). This led to a fairly convoluted build process comprised of both Ruby (opens in a new tab) 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 (opens in a new tab) a great deal and absolutely love it, so the Gatsby (opens in a new tab) and Next.js (opens in a new tab) 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 (opens in a new tab) 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 (opens in a new tab) 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 (opens in a new tab) article piqued my interest in Eleventy (opens in a new tab), 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 (opens in a new tab). Even when things
were missing, like the helpful Liquid filters (opens in a new tab) 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 (opens in a new tab) score 💯
Overall, I'm extremely happy with this current setup. Getting it up and running is quick, especially with the one-click deploy starter kits from Netlify (opens in a new tab), 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 (opens in a new tab)? 😁