Now Using Eleventy WordPress GraphQL System

Learn about how Most Useful website is now using the Eleventy WordPress GraphQL static site generator to produce this website

eleventy wordpress graphql system featured image
Reading Time: 2 minutes

What Is The Eleventy WordPress GraphQL System?

In the post previous to this one – which I promise will be short – I outlined that I had been working on a Static Site Generator for WordPress using GraphQL and Eleventy. I’ve now completed it sufficiently to be able to run a couple of my sites on it – including this one.

So, is now running as a fully static website.

Update for 2022: Actually, the site is now using Gatsby instead. I love Eleventy but Gatsby does some good stuff with image optimizations that at the time Eleventy didn’t do. It probably now does but I can’t keep switching back and forth!

Why Not Use A WordPress SSG Plugin

I did. Or at least I tried. But every one I tried, for some reason ended up either not working properly or creating far more pages than it should have. They all, that I used at least, started with generating their list of posts and pages from the WordPress database. Then they proceeded to interpret the pages looking for additional links. This isn’t necessarily a bad thing, but for some reason I ended up with just ridiculous amounts of duplicated data being produced. And none of them got images properly correct either.

In the end I had resigned myself to the fact I was just going to need a decent WordPress caching plugin and be done with it. Which I had.

Along Came Eleventy

What a learning curve for me. I used to be a Java programmer years ago so they syntax of Javascript is not totally unfamiliar. But some of the concepts around everything being async and Promises and all that – well, that’s a whole different ballgame. I’m probably still not comfortable with it all.

But Eleventy being built on Node.JS was a massive plus for me. I’d looked at other (non-WordPress plugin) SSG’s and some were built using Ruby and Python and Go and all those other languages I had no clue about. And Eleventy was relatively simple. Not easy, but simple. Which is also what I wanted. A nice templating language with a way to fetch in data. Worked for me.

So I began learning Eleventy and never looked back.

Roll Your Own Website In Eleventy With WordPress GraphQL

I’ve outlined how to do this using my creation in this post so go have a little look. When that was written I was still using WordPress for both the backend and the frontend on Most Useful. But now, the frontend is Eleventy and the backend is WordPress GraphQL.

Comments don’t work at the moment and I’m not sure how I will go about that. I don’t like the privacy implications of Disqus, or Facebook comments. There’s a few alternatives I might dabble with, but for now, it is what it is.

Have a look at the other post to learn how to build your website with Eleventy as the front end and WordPress GraphQL as the backend. You can tweet me @stevna if you have any comments you want to let me know of regarding it all – until I get comments re-instated.