---
url: /en/docs/frameworks/jekyll.md
description: >-
  Learn how to integrate Sveltia CMS with Jekyll, including the admin page
  setup, blog post configuration, starter templates and real-world examples.
---

# Jekyll Integration Guide

This guide provides resources and information for integrating Sveltia CMS with [Jekyll](https://jekyllrb.com/), a popular static site generator.

## Starter Templates

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

* [Jekyll Blades](https://github.com/anyblades/jekyll-blades) by [anyblades](https://github.com/anyblades)

::: 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 Jekyll integrations in our [Showcase](/en/showcase?framework=jekyll). 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](/en/docs/start#manual-installation) guide, and make sure the `admin` folder is not listed in the [`exclude`](https://jekyllrb.com/docs/configuration/options/) 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](https://jekyllrb.com/docs/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](/en/docs/collections/entries/slugs#defining-entry-slugs). The following example builds the date prefix from a DateTime field named `date` with the [`date` transformation](/en/docs/string-transformations#date):

```yaml [admin/config.yml]
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](https://jekyllrb.com/docs/configuration/front-matter-defaults/) in `_config.yml`.

::: tip 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](/en/docs/ui/content-editor#slug-panel), which renames the file. Since Jekyll’s default post URLs include the date, consider setting up [entry redirects](/en/docs/collections/entries/previews#customizing-the-redirect-property) with the `jekyll-redirect-from` plugin so the old URL keeps working.

:::

### Drafts

[Drafts](https://jekyllrb.com/docs/posts/#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](/en/docs/workflows/editorial) to review posts before they’re published.

### Data Files

[Data files](https://jekyllrb.com/docs/datafiles/) in the `_data` folder can be managed with a [file collection](/en/docs/collections/files). A data file whose top level is a list, such as `_data/members.yml`, can be edited with a [top-level List field](/en/docs/fields/list#top-level-list).

## Support for Jekyll

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

* [ASCII slugs](/en/docs/collections/entries/slugs#global-slug-options): Set the `encoding` slug option to `ascii` to transliterate non-ASCII characters, which can otherwise break Jekyll builds. ([Discussion](https://github.com/sveltia/sveltia-cms/discussions/544))
* [Nested collections](/en/docs/collections/entries/nested): Manage a folder tree of [pages](https://jekyllrb.com/docs/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](/en/docs/collections/entries/previews#customizing-the-redirect-property): Use the `aliases_field` option to store previous paths in the `redirect_from` property expected by the [`jekyll-redirect-from`](https://github.com/jekyll/jekyll-redirect-from) plugin, which is updated when the entry slug is changed in Sveltia CMS.
* [Top-level List field](/en/docs/fields/list#top-level-list): Use the `root` option to edit a [data file](https://jekyllrb.com/docs/datafiles/) whose top level is a list, such as a list of members.
* [Localizing entry slugs](/en/docs/i18n/slugs#localizing-entry-slugs): Generate localized slugs for multilingual Jekyll sites, using the `ref` property as the canonical slug key.