I recently built a sample Eleventy starter site that uses Agility CMS and aims to be a foundation for building fully static sites using 11ty and Agility CMS.
The first thing you need is a free Agility CMS account. You can get that here 👋.
Since this 11ty starter is so ✨new✨, we don't have an Official Starter package for it, so for now, we're linking to our NextJS starter, which happens to have the right demo content for this 🧐.
Now that you've got the content, you need the
Go ahead and clone the repo from github: 👇
npm install or
Normally, this will create 9,999,999,999 files in your
node_modules folder. Luckily, we're only gonna create 9,999,999 for this small demo.
You care about the environment don't you? 🌲🌳🌴🎋
Either way, you're gonna need to grab a few variables from your Agility CMS account. Head over to the API Keys page in Agility CMS (https://manager.agilitycms.com/settings/apikeys) and grab your GUID, and API Keys for Preview and Fetch.
🗄🗄🗄 Copy those into your
.env file (rename it from
We've hooked up some neat commands to make your life easy.
If you want to run the project locally in preview mode, with a hot-reloading server, do this:
npm start or
This is the entire reason for being for 11ty.
npm run dev or
npm run build or
This example is using the Agility CMS Sync SDK. That content is cached in the node_modules folder. If you want to clear all that out, use this.
npm run cms-clear or
yarn run cms-clear
The next time you run the project, the content will be pulled down again.
This projects uses nunjucks templates, and all the magic happens in the
Open that thing up and take a peek.
Agility CMS has the concept of pages and a sitemap. Those obejects are made available in the
_data/pages.js data array.
Each page is rendered via the
index.njk file, which just splits each page object into its own, er... page :). It also sets the
permalink property to the path of the page object. Voila! Our Agility CMS pages are magically routed and rendered.
Now let's take a look at how the templating works.
Each page uses the
layout.njk template for the main html output.
Then, based on the
page.templateFileName property, we load a
.njk template file dynamically. In this case we only have the
In that template, we set the zoneName parameter and render the modules in the
Each module zone has one or more modules in there, which are in turn rendered by a
.njk file. I've put them in the
/modules folder, and we've only got a few that are configured in this Agility CMS instance.
Hopefully, you can use the examples in this project to create your own modules.
A well-thought-out project with useful modules can empower your content editors with a set of building blocks for creating and updates the pages of your website.
This project is a blog template, so we have set of pages that are rendered based on the
Posts list. Most of that is configured as a Dynamic Page in Agility CMS, so you don't have to do much to implement it, but you'll notice on the
modules/postdetails.njk file that we use a property called
page.dynamicPageItem. That object represents the Blog Post that we are currently rendering.
To keep things super simple, this project makes use of free and amazing TailwindUI components, and it's all used via a dead simple https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css file referenced in the header. No post-css or anything, at least not yet.
We've pulled in a global reference to Alpine.js in the layout template, too.
It's being used in a couple places to hide/show the mobile menu and the preview bar.
Amazing that you've gotten this far! Keep learning with me (Joel Varty) or the rest of the Agility CMS team.
Join us on Slack to answer questions and provide feedback directly to the team.