Strapi x 11ty is a blog starter template that pairs the Eleventy static site generator with the Strapi headless CMS, providing a GraphQL-driven content workflow and a static frontend for blog publishing.
What is Strapi x 11ty?
Strapi x 11ty is an open-source starter project on GitHub that builds a simple blog with Eleventy (11ty) on the frontend and Strapi as the backend CMS. It takes content modeled in Strapi with fields for title, rich text content, publish date, author, and slug, and outputs a static multi-page site with home, about, blog, and blog post routes. The project is split into two folders — frontend for 11ty and backend for Strapi — so each side can be developed and deployed independently.
Key Features
- Minimal design — A clean, unstyled layout with a small set of pages: home, about, blog listing, and blog post detail.
- Page slugs — Blog posts are accessible at /blog/:Slug, driven by the slug field in Strapi's content model.
- GraphQL first approach — The Strapi backend is set up for GraphQL queries, aligning with Strapi's GraphQL plugin.
- Defined content model — Strapi content type includes title (text), content (rich text), published_at (date), author (text), and slug (text).
- Two-folder structure — The repository separates concerns into frontend (Eleventy) and backend (Strapi) for clearer workflows.
- Simple local startup — After cloning, run yarn install and yarn serve in frontend, and yarn install and yarn develop in backend.
- Static deployment — 11ty builds to a _site directory that can be served on Netlify or Vercel.
Who is it for?
- Jamstack developers wanting a reference architecture for combining a headless CMS with a static site generator.
- Technical bloggers who want to manage content through Strapi's admin UI and serve a fast static site.
- Freelancers building small client sites who need a minimal blog setup with a GraphQL API.
- Developers learning Strapi or 11ty who can use this starter as a working baseline before customizing.
What can you do with it?
- Create a blog: Write posts in Strapi, set a publish date and author, and see them rendered on the Eleventy frontend.
- Customize pages: Edit the minimal design and add new routes in the frontend, while extending the Strapi content model as needed.
- Deploy separately: Host the Eleventy output on static platforms and deploy the Strapi backend using its own deployment guide.
How does it work?
Clone the repo, install dependencies with yarn in both folders, run yarn serve for the 11ty frontend and yarn develop for the Strapi backend, and then build the static site with eleventy to output the _site folder.
Pros and cons
Pros
- GraphQL-first content delivery from Strapi.
- Simple, small codebase with only four page templates.
- Frontend and backend are isolated for independent scaling.
Cons
- Pagination is not yet implemented — it is listed as a "in the works" feature.
FAQ
Is Strapi x 11ty free?
The project is a public GitHub repository that you can clone, fork, and modify without payment, so it is free to use. No license is specified in the README, so check the repository before commercial use.
What content fields does Strapi use?
The content model uses five fields: title (text), content (rich text), published_at (date), author (text), and slug (text). These map directly to blog post metadata and text.
What pages are included?
The template includes a home page at /, an about page at /about, a blog listing at /blog, and a blog post page at /blog/:Slug. There is no pagination yet.
Which static site generator does this template use?
It uses Eleventy (11ty), a Node.js-based static site generator that outputs plain HTML to a _site directory for deployment.
Does the template support pagination?
Not yet. Pagination is listed under "In the works" in the README, meaning the template currently displays all blog posts on one page.
