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:
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
encodingslug option toasciito 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: falsemode, where every file is a page at its own path and editors can create new folders as needed. - Entry redirects: Use the
aliases_fieldoption to store previous paths in theredirect_fromproperty expected by thejekyll-redirect-fromplugin, which is updated when the entry slug is changed in Sveltia CMS. - Top-level List field: Use the
rootoption 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
refproperty as the canonical slug key.