Migrating from Next.js to Eleventy: A Journey to Simplicity and Performance

I hadn't updated my personal site for a while, and for a good reason. Keeping up with Next.js and MDX updates meant that every time I tried to make a simple change, I found myself in a rabbit hole of updating versions and resolving dependency issues I didn't care about. I wanted something simpler and ideally with better Lighthouse scores, as we all know how React performs these days.

The Quest for Simplicity

I had been eyeing Eleventy for a while and decided it was time to give it a try. I've used templating languages like Nunjucks before, and Eleventy supports markdown, which was the bulk of my content already. No more dealing with the complexity of inline React components in MDX files 🤦🏼‍♂️. It was time to say goodbye to complex frameworks.

Streamlining the Migration Process

After exploring the docs and a few templates, I came across 11ty-Rapid-Starter. This template came preconfigured with Tailwind CSS and Alpine.js, everything I needed to replace my existing setup. I had tried adding these from scratch before, but the template did a better job than I did. So, I decided to use the whole setup.

You can read about the 11ty-Rapid-Starter in detail on fullstack digital.

Since my content was already in markdown format, the migration process was pretty painless. I simply dropped the folder of MDX files and removed the NextSEO and other baggage from each file. I used a few template files to simplify layouts, but they were all plain HTML.

Deployment Made Easy with Cloudflare Pages

Cloudflare has been quietly improving their hosting services while many PaaS providers have been churning and hitting customers with unexpected bills. I decided to deploy my site to Cloudflare Pages, which was simple since my DNS was already hosted there. The setup was similar to what I had at Vercel, including preview builds, but with more features at a lower cost.

Achieving Perfection: Fixing Issues and Optimizing Performance

The initial migration significantly improved my Lighthouse scores without much effort. However, I fixed a few issues to achieve a perfect score:

Poor contrast: I solved this by using a deeper orange color.
Missing HTML lang attribute: I hadn't correctly populated this in the global site data.
Including a robots.txt file: This required a bit more work, using the following template file:

---
permalink: /public/robots.txt
eleventyExcludeFromCollections: true
---
User-agent: *
Allow: /
Disallow:

Host: https://timothyreynolds.co.uk

Sitemap:https://timothyreynolds.co.uk/sitemap.xml

Eleventy's focus on performance, flexibility, and ease of use will hopefully encourage me to post more often. If you're considering a similar move, I recommend exploring Eleventy and giving the 11ty-Rapid-Starter a try. And if you want easy deployments and trust Cloudflare with your data, I have only good things to say.