How and why to create a headless WordPress with 11ty

WordPress is widely regarded as one of the most popular content management systems in the world.

In fact, as of late 2021, WordPress powered 35% of the top 1 million websites in the world. Thats remarkable!

Why is it so popular?

First, its free to download and use. However, if you want to customize it, WordPress does charge a fee for some of their templates and plug-ins. Especially some of the most useful ones.

Beyond being free, WordPresss ubiquity means if youre a content creator on the internet, youve probably used it before.

And if you havent, thats no problem because its extremely user-friendly. Plus, its versatile enough to not only work as a great as a blog, but for many different possible projects.

Downsides to WordPress

However, even though it's very popular, there are some serious downsides to using WordPress.

One is security simply because its so popular. The logic used by hackers is, if its popular, it makes more sense to figure out how to hack inside. Then, once discovered how to, the process can be repeated.

Another downside is that WordPress sites have slower download times. That means the audience is waiting for the site to load and could become disinterested and leave. Their use of redundant code and heavy themes certainly hurt their sites speeds.

Finally, the necessity of plugins is a third drawback. Using many plugins at once will result in lethargic loading times. On top of that, many crucial plugins are only accessible by paying a yearly subscription fee. That means your free site is now much more to operate a year.

Solution: Headless WordPress with Eleventy

Luckily, theres a way around all of those issues we just illustrated above.

Its called a headless WordPress.

Headless might sound scary like something from The Walking Dead but it just refers to using WordPress to manage the content, and a different framework to display the content.

In this example, well be using Eleventy (11ty), a simpler static site generator as they call themselves.

What makes Eleventy so great?

It has multiple different templates with multiple different JavaScript languages. Which is certainly a plus when youre using micro frontends, as theyre also open to using whichever JavaScript language works best for you.

11ty also makes it clear that their product isnt a JavaSctipt framework itself, its a static site generator. And one of the best aspects of SSGs is they are pre-rendered at the time of build, meaning they load incredibly quickly when theyre requested by a visitor. Thats a major upgrade as compared to WordPress and their slow loading speeds.

Beyond the faster loading times, because sites are pre-rendered with static site generators, it helps with SEO for the site, too because search engines can find that rendered data. In comparison, WordPress sites that are single-page applications (SPAs) only send back a blank HTML page.

Another solid aspect of Eleventy is the templates they have. That means a customer or developer doesnt have to start from scratch. It makes getting a website up and running quick and easy.

Use case: RedwoodCrystals.com

To go one step further, weve actually put 11ty to use. Fathyms George Hatch used Eleventy as part of his website that utilized all kinds of open-source applications.

The result was easy-to-use content management, and a website with eCommerce abilities hosted by Fathym which he was able to flashup in mere minutes thanks to 11ty as well as our micro frontends.

Transfer your WordPress website over to Fathym today and try it out for free with Eleventy. And once you see the improved speed and user experience, we have a feeling youll stick around.