Eleventy and Ghost

We’ve expanded our roster of headless starter repositories – now you can build a completely custom front-end for a Ghost site with Eleventy.

Earlier this year we shared what's possible with Ghost when used as a flexible headless CMS. One of those possibilities being the option to deliver content via our API to a Gatsby site. The end result: A robust and familiar space to create, organise and store your content, with a blazing fast static site on the front-end.

We're now extending our documentation to show what's possible with the Content API and Eleventy, a popular static site generator in the JAMstack space.

What is Eleventy?

Eleventy, or 11ty for those of you in a hurry, is a static site generator that was designed to be the JavaScript alternative to Jekyll. Without going into too much depth; Eleventy is designed to be a flexible and easy tool to take an assortment of files and turn them into a static website. Those files could be Markdown, HTML, Nunjucks, Handlebars or even straight up JavaScript!

Eleventy works without configuration – meaning it's accessible to newcomers but not overly opinionated on file structure and settings.

How does this flexible static site generator fit in with Ghost?

I'm glad you asked that question: Under the hood of Eleventy is a clever data pipeline that is accessible from any template file within an Eleventy project. It's possible to feed any type of data into it, including content coming from the Ghost content API.

Posts, pages, tags, authors, global site data; you name it. Eleventy is built on top of Node.js (great choice if you ask us) which means it works really well with our open source JavaScript libraries.

So what's new?

We're excited to share what's possible with the Ghost API – hopefully these resources inspire and help you to create unique websites using Ghost as a headless CMS.

🚢 NEW: Eleventy Starter Ghost

We've created an official Eleventy starter repository, similar to our Gatsby starter, that's all setup to consume content from Ghost and build out a simple flat-file website with a clean blog-style design. The best way to use this starter is to fork it. Want to see it in action? Check out this live demo we've created.

🚢 NEW: Eleventy & Ghost Documentation

To coincide with this starter we've also created documentation on how to use this starter as well as ways you can use the Content API Client Library to expose specific parts of your content to Eleventy.

💠 Works great with Netlify

This combination of Ghost and Eleventy works great when deploying to Netlify. With the power of webhooks we can automatically let Netlify know when a change is made in Ghost and trigger a deploy causing Eleventy to rebuild the website with the new content. Check out our Netlify Integration page for more information.

What the future holds

From a personal perspective I'm very excited about the possibilities that exist with headless CMSs, APIs and static site generators – AKA the JAMstack. Ghost is a battle-tested headless solution for businesses who need the power and flexibility of a modern CMS to build and run successful digital publications ✨

For those of you that don't know me; my name is Dave and I recently joined the team as Developer Advocate. I've been a fan of the JAMstack for many years, creating open source projects and contributing to the community along the way. Feel free to get in touch with me via Twitter, or hop onto the Ghost Forum to share what you're making with Ghost!

Put the new Eleventy starter and Ghost through their paces with a free, no strings attached Ghost(Pro) trial – or get started with a self-hosted install.