---
url: /en/docs/frameworks/eleventy.md
description: >-
  Learn how to integrate Sveltia CMS with Eleventy, including the passthrough
  copy setup, blog collection configuration, starter templates and real-world
  examples.
---

# Eleventy Integration Guide

This guide provides resources and information for integrating Sveltia CMS with [Eleventy](https://www.11ty.dev/) (11ty), a simple and flexible static site generator.

## Starter Templates

Here are some starter templates built by the community using Eleventy:

* [Eleventy starter template](https://github.com/danurbanowicz/eleventy-sveltia-cms-starter) by [danurbanowicz](https://github.com/danurbanowicz)
* [ZeroPoint](https://getzeropoint.com/) by [MWDelaney](https://github.com/MWDelaney)
* [Huwindty](https://github.com/aloxe/huwindty) by [aloxe](https://github.com/aloxe)
* [One Starter](https://github.com/buildawesome-one/starter) by [buildawesome-one](https://github.com/buildawesome-one)

::: info Disclaimer

These third-party resources are not necessarily reviewed by the Sveltia CMS team. We are not responsible for their maintenance or support. Please contact the respective authors for any issues or questions.

:::

## Examples

See real-world examples of Eleventy integrations in our [Showcase](/en/showcase?framework=eleventy). Most of the listed sites include links to their source code, so you can explore how they implemented Sveltia CMS with Eleventy.

## Setup

### Adding the Admin Page

Eleventy doesn’t have a static files folder. It processes template files, including HTML, in the input folder, which is the project root by default, and ignores other files. Create `admin/index.html` and `admin/config.yml` as described in the [Getting Started](/en/docs/start#manual-installation) guide, then add a [passthrough file copy](https://www.11ty.dev/docs/copy/) to your Eleventy configuration file so that both files are copied to the output folder as is:

```js [eleventy.config.js]
export default function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy('admin');
}
```

Without this, `config.yml` is not copied at all, and the CMS fails to load the configuration. If your input folder is not the project root, such as `src`, put the admin folder in it and use `addPassthroughCopy('src/admin')` instead. The admin page is then available at `/admin/` on the development server started with `eleventy --serve` as well as on the built site.

## Configuration

Eleventy doesn’t have a fixed content folder, so blog posts can be stored in any folder in the input folder, such as `posts`. The following example manages Markdown posts in the `posts` folder:

```yaml [admin/config.yml]
media_folder: images
public_folder: /images
collections:
  - name: posts
    label: Posts
    folder: posts
    create: true
    fields:
      - { name: title, label: Title }
      - { name: date, label: Date, widget: datetime }
      - { name: tags, label: Tags, widget: list, required: false }
      - { name: body, label: Body, widget: markdown }
```

Some notes on this configuration:

* The `images` media folder also needs a passthrough file copy, such as `addPassthroughCopy('images')`, to be included in the output.
* The layout and the `posts` tag shared by all posts are usually defined in a [directory data file](https://www.11ty.dev/docs/data-template-dir/) like `posts/posts.json` instead of the front matter of each post. Eleventy merges the `tags` in the front matter with the ones in the data file, so editors only need to add extra tags. The data file itself can be managed in the same collection, as explained below.
* Eleventy uses the file name as the URL of a post by default, such as `/posts/hello-world/`. Each post can override it with a [`permalink`](https://www.11ty.dev/docs/permalinks/) property, which can be added as a String field if needed.

## Support for Eleventy

We have implemented specific features to enhance the integration of Sveltia CMS with Eleventy:

* [Nested collections](/en/docs/collections/entries/nested): Manage a folder tree of pages in the sidebar with the `subfolders: false` mode, where every file is a page at its own [path-based permalink](https://www.11ty.dev/docs/permalinks/) and editors can create new folders as needed.
* [Directory data files](/en/docs/collections/entries/listings#managing-eleventy-s-directory-data-file): Manage a folder’s [directory data file](https://www.11ty.dev/docs/data-template-dir/), like `posts/posts.json`, beside the Markdown entries it applies to, using the `index_file` option with an `extension` or `format` of its own.
* [Editor components](/en/docs/api/editor-components#styled-separator): An example of a custom component that inserts an Eleventy [shortcode](https://www.11ty.dev/docs/shortcodes/) into Markdown content.