Skip to content

Jekyll Integration Guide ​

This guide provides resources and information for integrating Sveltia CMS with Jekyll, a popular static site generator.

Starter Templates ​

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

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 Jekyll 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 Jekyll.

Setup ​

Adding the Admin Page ​

Jekyll copies any file without front matter to the generated site as is, so the admin folder can be placed in the root of your project. Create admin/index.html and admin/config.yml as described in the Getting Started guide, and make sure the admin folder is not listed in the exclude option of _config.yml. The admin page is then available at /admin/ on the development server started with jekyll serve as well as on the built site.

Configuration ​

Blog Posts ​

Jekyll requires posts in the _posts folder to be named YEAR-MONTH-DAY-title.MARKUP, such as 2026-10-01-hello-world.md. Files that don’t follow this pattern are ignored. To create matching file names, add the date to the entry slug. The following example builds the date prefix from a DateTime field named date with the date transformation:

yaml
media_folder: assets/images
public_folder: /assets/images
collections:
  - name: posts
    label: Posts
    folder: _posts
    slug: "{{date | date('YYYY-MM-DD')}}-{{slug}}"
    create: true
    fields:
      - { name: layout, label: Layout, widget: hidden, default: post }
      - { name: title, label: Title }
      - { name: date, label: Date, widget: datetime, default: '{{now}}' }
      - { name: categories, label: Categories, widget: list, required: false }
      - { name: tags, label: Tags, widget: list, required: false }
      - { name: body, label: Body, widget: markdown }

If you don’t need a date field, the {{year}}-{{month}}-{{day}}-{{slug}} template creates the prefix from the entry creation date instead.

The Hidden field adds layout: post to every new post without showing it in the Content Editor. You can remove it if you set the default layout with front matter defaults in _config.yml.

Changing the Date of a Saved Post

The file name is set when a post is first saved. If an editor changes the date of an existing post later, the date property in the front matter takes precedence, but the file name and the post URL derived from it keep the original date. To keep them in sync, update the date in the slug from the Slug panel, which renames the file. Since Jekyll’s default post URLs include the date, consider setting up entry redirects with the jekyll-redirect-from plugin so the old URL keeps working.

Drafts ​

Drafts are stored in the _drafts folder without a date in the file name and are only built with the --drafts option. If you want editors to manage drafts, add another collection with folder: _drafts and the default slug. Publishing a draft means moving the file to _posts with a date prefix, which needs to be done outside the CMS. Alternatively, use the Editorial Workflow to review posts before they’re published.

Data Files ​

Data files in the _data folder can be managed with a file collection. A data file whose top level is a list, such as _data/members.yml, can be edited with a top-level List field.

Support for Jekyll ​

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

  • ASCII slugs: Set the encoding slug option to ascii to transliterate non-ASCII characters, which can otherwise break Jekyll builds. (Discussion)
  • 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 and editors can create new folders as needed.
  • Entry redirects: Use the aliases_field option to store previous paths in the redirect_from property expected by the jekyll-redirect-from plugin, which is updated when the entry slug is changed in Sveltia CMS.
  • Top-level List field: Use the root option to edit a data file whose top level is a list, such as a list of members.
  • Localizing entry slugs: Generate localized slugs for multilingual Jekyll sites, using the ref property as the canonical slug key.