Migrating from Statamic to Eleventy. This site’s had major surgery

If you’re reading this, the patient survived the surgery, and I successfully migrated this website and all its many parts from its old Statamic CMS to a brand new Eleventy installation.

My website’s been through several transitions since I first published it. The original site used MovableType, which was the blogging standard at the time. I then migrated it to ExpressionEngine, when that was the fashionable choice, before ending up on Statamic, which seemed like the natural progression.

On my mind for years

Migrating this website from Statamic to Eleventy has been on my mind for the past couple of years, and there were several reasons for wanting to do it:

1) The only truly dynamic part of my site was the blog. All other content, including my portfolio, shop, and other sections, was hard-coded into Statamic templates. This seemed like a poor way to structure my website.

2) Over time, I added books like Transcending CSS Revisited, demos including Layout Love, and projects like Toon Titles. I created these as standalone sections in their own folders, in the site root, but outside Statamic. This meant they didn’t share the same headers, footers, scripts, or stylesheets with Statamic or with each other.

3) I was never completely comfortable developing with Statamic, and there were always things I wanted to add to the website, but didn’t know how. This was partly due to my lack of knowledge and in part to how Statamic is set up. Either way, even adding something as rudimentary as a contact form seemed like a challenge.

4) A few months ago, I updated my Statamic installation to the latest version. I only used Statamic’s admin to publish blog posts, but after the upgrade, even that became unusable, with a laggy interface and frequent crashes. Whether these were down to the Statamic upgrade or my computer, it didn’t matter. I needed something new.

For the past few years, I’ve developed most of my client projects using Eleventy. At the start, most development was done by Sush. But I slowly got more familiar with how Eleventy works, to the point where I’m very comfortable developing with it myself. Eleventy was the obvious choice for the next CMS migration, but there were several reasons I hadn’t done it:

1) Over 1200 blog posts stretching back over twenty-plus years to 2004. Statamic had these as Markdown files, but migrating them to Eleventy frontmatter and managing categories and tags wasn’t something I relished.

2) Working out a system for bringing those books, demos, and other standalone sections seemed complicated.

3) Preserving URLs while reorganising the website structure seemed challenging.

But the benefits would be huge:

• A simplified file structure I understand how to navigate
• Better portability if I needed to change hosts
• Common components, scripts, and styles across the entire website
• Cleaner separation between content and templates
• The ability for me to develop the new features I wanted

Transition from Statamic to Eleventy

AI coding tools, in particular Codex, not only made the transition from Statamic to Eleventy doable but also relatively straightforward. Using my Eleventy in a Box boilerplate, I worked across the site’s main pages like home, about, and contact, then introduced the sections, including my portfolio.

Instead of static content in a template, portfolio entries became Markdown files. The same applies to my services and the items in my shop. This means I can reuse their data in different ways, including filtering them by categories and tags.

Then, I moved on to the blog. Codex converted all the entry files and even integrated my earliest MovableType entries, which had been separate static HTML files for years. Codex also brought all my separate projects, like Layout Love and Toon Titles, into a common shell with shared assets, a header, and a footer, consistent with the rest of the site. Legacy URLs were all over the place. We managed them with a redirect map, including broad catch-alls for archives, old blog paths, service aliases, and the sections we removed.

I have to say, I’ve been conflicted about using AI tools, but in this instance, Codex turned what I’d thought might be a job that could take several months end-to-end into one that I turned around in just over a week. And that’s with me still writing every bit of CSS and HTML code that gets to the browser. Codex didn’t design the site or code everything. What it did was help me with the kind of repetitive, risky migration work that had been blocking me for years.

Adding to the design

While I was improving the blog and shop sections, I decided to add graphic headlines to my blog’s carousel cards using a variety of typefaces to give them extra personality.

I took the same approach with my Killer Docs products by creating a new suite of product icons.

The biggest benefit of this migration isn’t that my website now runs on Eleventy. It’s the consistency and the fact that I understand how everything fits together. For years, parts of the site were bolted on. Now, it feels like one system. Blog posts, portfolio entries, services, shop products, books, demos, and projects all share the same structure, components, scripts, and styles.

The patient survived. Better than that, it’s awake and needing coffee.