A simpler, faster site: moving to pure Eleventy v3

  Filed in: eleventy, build pipeline, visual framework

Diagram metaphorically breaking the old build cycle between Eleventy and Gulp.
Metaphorically breaking free from the Fractal ↔ Eleventy ↔ Gulp loop. This overhaul retires that loop. Image made with Loras.dev

I upgraded the site to Eleventy v3, removed Gulp and the Visual Framework, and simplified everything.

Craving a lighter, nimbler site, I finally parted a long goodbye with Gulp and the Visual Framework for a streamlined Eleventy stack making the codebase is easier to tinker with and build fun things.

tl;dr#

  • Slimmer, more experimental setup on Eleventy v3.
  • Dropped Gulp and upstream Visual Framework.
  • Images and the search index now build via Eleventy-integrated scripts.
  • CI/build is streamlined; local yarn dev stays snappy.

Why change#

Let’s be honest: I’m not in the thick of the Visual Framework anymore. Back when I was at EMBL/EMBL‑EBI, I brought it in here as a bit of “dogfooding” — but for a personal site, that kind of heavyweight integration is overkill unless you're building for EMBL.

Now, I’m aiming for something leaner and more playful: I’ve kept the templates and local styles I actually use, trimmed away the rest, and rebuilt the workflow around Eleventy v3 for a much simpler, more modern stack. If you’re curious about what the Visual Framework offers these days, it’s still a fantastic toolkit for federated life science sites.

With Eleventy v4 around the corner — and having followed Eleventy since its 2018 debut (Introducing Eleventy; early supporters) — this felt like the right moment to simplify and get current on v3.

What changed#

By the numbers: +3,069 additions, −10,252 deletions (net −7,183 lines, excluding yarn.lock) across 190 files—and 127 fewer files (140 deleted, 14 added) PR #12.

  • Build and tooling

    • Switched to Eleventy v3.
    • Dropped Gulp and Fractal.
    • Dropped much custom NJK templates.
    • Removed legacy {% render %}/codeblock usage and their shims; converted posts to plain HTML or fenced code.
    • Condensed and audited local SCSS and components.

  • Eleventy-integrated tasks

    • Images: scripts/process-images.js (sharp) runs on build and during dev.
    • Search: scripts/build-search-index.js regenerates the client-side index on build.
    • Cleaned passthroughs; removed unused VF assets.

What’s next#

I’m looking forward to playing with some new CSS techniques and blog visualisations, and, honestly, just posting more.

Thanks for reading.