How to Integrate Eleventy with Your Headless CMS

What is Eleventy?

Eleventy is a Node.js static site generator that turns templates, Markdown, and data files into HTML. It supports Liquid, Nunjucks, Markdown, WebC, JavaScript templates, and more, which makes it a common choice for documentation sites, marketing pages, blogs, and lightweight web apps. Teams use Eleventy when they want a small build tool, readable output, and minimal runtime code.

Why integrate Eleventy with a headless CMS?

Eleventy is great when your content can be generated ahead of time. The trade-off is that content needs to be available at build time, usually through Markdown files, JSON data files, or remote data fetched by JavaScript. If editors are sending developers copy in docs, spreadsheets, or tickets, every change becomes a pull request, and publishing depends on someone rebuilding the site manually.

Connecting Eleventy to a headless CMS category tool solves that handoff. Editors publish from a structured workspace, developers query the exact fields the build needs, and Eleventy turns that data into static pages. With Sanity's AI Content Operating System, content lives as typed JSON in the Content Lake, GROQ selects fields like title, slug, author, and Portable Text blocks, and webhooks fire on publish so your Eleventy build can run right away.

The alternative is disconnected content. You might keep Markdown in Git, copy product descriptions from another system, and rebuild on a schedule every hour. That works for small sites, but it breaks down when you have 500 product pages, three locales, and editors who need to fix a typo without waiting for a developer.

Architecture overview

A typical Eleventy integration starts when an editor publishes a document in Sanity Studio. The document is written to the Content Lake as structured JSON. A GROQ-powered webhook filters for the events you care about, such as published posts, changed navigation items, or deleted docs. From there, you have two common paths. The simplest path sends the webhook to your hosting provider's build hook, such as Netlify, Vercel, or GitHub Actions. During the build, Eleventy uses @sanity/client inside a global data file, pagination file, or build script to fetch content with GROQ and generate static pages. For more control, a webhook listener or Sanity Function can process the event first. For example, it can fetch the updated document and its referenced author, categories, and related posts, write a JSON snapshot into src/_data, and call Eleventy's programmatic API from @11ty/eleventy. Eleventy then reads that data through its data cascade, renders templates into a dist folder, and your host serves plain HTML, CSS, and assets to visitors.

Common use cases

Step-by-step integration

1. 1

   Set up Eleventy

   Eleventy doesn't require an account or API key. Create a Node project, install @11ty/eleventy, add an input folder like src, and add a build script such as "build": "eleventy --input=src --output=dist". If you're deploying on Netlify, Vercel, or GitHub Actions, create a build hook or workflow URL that Sanity can call after publish.

2. 2

   Create the Sanity project and install the client

   Create a Sanity project, note the project ID and dataset, and create a read token if your dataset is private. In the Eleventy project, install @sanity/client so build scripts and data files can query the Content Lake with GROQ.

3. 3

   Model content in Sanity Studio

   Define schemas that match the pages Eleventy will render. For a blog, use fields like title, slug, publishedAt, excerpt, body, mainImage, author reference, and category references. For documentation, add fields like section, orderRank, parent page, and lastReviewedAt.

4. 4

   Fetch content with GROQ during the Eleventy build

   Add a global data file such as src/_data/posts.js, or a build script, that runs a GROQ query. Project only the fields Eleventy templates need, including resolved references like author->{name, image} and image asset URLs.

5. 5

   Trigger rebuilds on publish

   Create a Sanity webhook filtered to publish, update, and delete events for the document types your Eleventy site uses. Send it directly to a hosting build hook, or send it to a webhook listener or Sanity Function when you need signing checks, payload shaping, cache tags, or extra API calls.

6. 6

   Test the generated pages

   Run Eleventy locally, inspect the generated dist output, and test deleted content, changed slugs, drafts, and missing references. Static builds are predictable, but broken references can still create empty pages if your GROQ projections don't guard against them.

Code example

import express from "express";
import { mkdir, writeFile } from "node:fs/promises";
import Eleventy from "@11ty/eleventy";
import { createClient } from "@sanity/client";

const app = express();
app.use(express.json());

const sanity = createClient({
  projectId: process.env.SANITY_PROJECT_ID!,
  dataset: process.env.SANITY_DATASET!,
  apiVersion: "2025-02-19",
  token: process.env.SANITY_READ_TOKEN,
  useCdn: false
});

app.post("/api/sanity-publish", async (req, res) => {
  const posts = await sanity.fetch(`
    *[_type == "post" && defined(slug.current)] | order(publishedAt desc) {
      title,
      "slug": slug.current,
      excerpt,
      publishedAt,
      "author": author->{name}
    }
  `);

  await mkdir("src/_data", { recursive: true });
  await writeFile("src/_data/posts.json", JSON.stringify(posts, null, 2));

  const elev = new Eleventy("src", "dist", { configPath: ".eleventy.js" });
  await elev.write();

  res.json({ ok: true, count: posts.length });
});

app.listen(3000);

How Sanity + Eleventy works

CMS approaches to Eleventy

Keep building

Explore related integrations to complete your content stack.