Eleventy + Agility CMS is a sample JAMstack starter that connects the Eleventy static site generator with Agility CMS to build fully static websites from headless CMS content.
What is Eleventy + Agility CMS?
This is a starter repository that wires Agility CMS, a headless content management system, into Eleventy (11ty), a static site generator. The project takes content structured in Agility CMS — pages, sitemap, and blog posts — and outputs a static HTML website via Eleventy's build process. It was created by the Agility CMS team, with guidance from Joel Varty, and is published under the agility GitHub account.
Key Features
- Agility CMS Sync SDK — Content is fetched from Agility CMS and cached in the node_modules folder; use
npm run cms-clearto wipe the cache and re-pull on the next build. - Nunjucks templating — Pages, layouts, and modules are all
.njkfiles, with page routing driven by Agility CMS's page and sitemap objects. - Dynamic page rendering — Blog posts render through a dynamic page template that reads the
dynamicPageItemproperty from Agility CMS. - Tailwind CSS via CDN — The project loads Tailwind UI's CSS from a jsdelivr CDN link referenced in the layout header; no PostCSS build step is configured yet.
- Alpine.js — A global Alpine.js reference powers the mobile menu and preview bar interactivity.
- npm scripts —
npm startruns a hot-reloading local preview,npm run devbuilds in preview mode,npm run buildbuilds for production, andnpm run cms-clearresets cached content.
Who is it for?
- Eleventy developers who want to add a headless CMS to their static sites without writing custom integrations.
- Agility CMS users who need a ready-made blog template to start building with the platform.
- JAMstack learners looking for a concrete example of how a static site generator and a CMS work together in a real project.
What can you do with Eleventy + Agility CMS?
- Start a blog fast: The included blog template with Posts collection and dynamic page rendering gives you a working blog format that editors can update in Agility CMS.
- Build a marketing site: Use Agility CMS's page and module system to structure pages; the starter demonstrates the layout-to-module pattern you can extend with your own modules.
- Learn the data flow: Follow how Agility CMS's page objects become Eleventy data arrays and how dynamic page items drive individual blog posts.
How does it work?
The setup flow begins with creating a free Agility CMS account and a new project. Next, clone the repository, run npm install, and copy your Agility CMS GUID plus Preview and Fetch API keys into a .env file. After that, npm start launches a local preview with hot reloading, and npm run build produces a production-ready static site.
Known limitations
- The CSS approach uses a CDN link to Tailwind UI rather than a PostCSS build pipeline, so customizing Tailwind configuration is not yet covered.
- The starter includes only a few example modules; creating additional module templates is left to you.
Pricing
The starter itself is free open-source code. Agility CMS offers a free account tier you can use to set up the project and run the demo.
FAQ
Does this starter require an Agility CMS account?
Yes. The starter pulls all content from Agility CMS, so you need a free Agility CMS account and a project with the blog template. The signup link in the README creates an instance pre-configured for this starter.
What templating language does it use?
The project uses Nunjucks templates. Layout files, page templates, and module files all have the .njk extension, and page templates load dynamically based on the templateFileName property from Agility CMS.
How do I clear cached content?
Run npm run cms-clear (or yarn run cms-clear). This clears the content cached from Agility CMS, and the next time you run the project the content is pulled down again.
Is Tailwind CSS set up with PostCSS?
No. The project loads Tailwind UI's CSS via a CDN link in the layout header and does not include a PostCSS configuration, as the README notes "no post-css or anything, at least not yet."
Can I use this starter for a large production site?
The starter is intentionally minimal and educational. It gives you a foundation for static site generation with Agility CMS, but you'll likely need to add more modules, styles, and build tooling for a full production site.
