Eleventy Integration Guide

This guide provides resources and information for integrating Sveltia CMS with Eleventy (11ty), a simple and flexible static site generator.

Starter Templates

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

• Eleventy starter template by danurbanowicz
• ZeroPoint by MWDelaney
• Huwindty by aloxe
• One Starter by buildawesome-one

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. 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 guide, then add a passthrough file copy to your Eleventy configuration file so that both files are copied to the output folder as is:

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:

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 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 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: 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 and editors can create new folders as needed.
• Directory data files: Manage a folder’s directory data file, 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: An example of a custom component that inserts an Eleventy shortcode into Markdown content.