Website goes to 11(ty)

I’ve been playing around with Nunjucks and various static site generators (SSGs) over the last couple of years now. Building my smaller non-CMSy sites,, using a mixture of techniques and build scripts.

I’ve loved it, its’s like olden days web development, HTML, CSS, Javascript but with super powers. Gulp scripts taking the mundane tasks such as image resizing and optimisation, favicon generation, script and styles pre and post processing and much more.

Around a year ago (I think, pandemics have destroyed my concept of time) I started to use 11ty after playing around the edges for a while. It’s even more of a delight, it get’s out of the way, taking care of all the hard stuff so wonderfully. Local and remote data becomes such an easy thing. It’s concept of ‘collections’ is excellent, here’s my content type based on a local data file (say an object) or remote fetch (API, graphQL), here’s the template I want it to use and voila here’s the output.

A list of folders

You can use Nunjucks natively (or Liquid, Markdown, Moustache, Handlebars and more). Passing front matter into the markdown files allows for page / folder specific variables.

Anyhoo, after converting a couple of my sites to 11ty and both with data defined locally I wanted to try out something I’ve been meaning to do for a while….headless WordPress 💪.

And where better (and safer) to start than this blog as the source data.

There was a bit faffing about but I took a lot of inspiration from these articles / repos: How to use 11ty with Headless WordPress and deploy to Netlify, WordPress & Eleventy part one: WordPress, 11ty-wordpress-graphql.

So I now have a mirror site for this blog all built in 11ty.

I’ve blocked search engines from indexing it obvs. I tried to have the smallest footprint for it as well, so no client-side JS, 26KB of CSS. I even used some Tailwind (don’t generally like it, too many class names for this ageing brain) but I really liked this approach to typography. Just using the classname ‘prose’ on the container. Nice. I eschewed my goto build using Gulp and just do it all the build with npm built-in scripts.

I would like to trigger a build of the site when I hit publish on a post from WordPress, but given I post about once a decade running npm run build and git add commit push is not exactly a big deal.

Update: I rebuilt the 11ty instance and now this post, in a sort of hall of mirrors type afair, exists on the 11ty instance. 👻👻👻

Leave a Reply


No webmentions found.