Sveltia CMS

Available in production Maintained CMS Preferred CMS

Enable Sveltia CMS

admin:
  cms: sveltiacms
  repo: Hugolify/hugolify-template # your repository, owner/name

Additional features

Disable Netlify Identity

Sveltia CMS signs in without Netlify Identity: stop loading its script.

admin:
  auth:
    netlify_identity: false

GitLab with PKCE

Since Sveltia CMS v0.223, the GitLab backend signs in through Netlify unless auth_type says otherwise. To sign in with a GitLab application, set pkce next to its Client ID:

admin:
  git: gitlab
  auth:
    app_id: your-client-id
    auth_type: pkce

Section index files

Each collection also edits the _index.md of its section, shown at the top of its list: Hugolify writes the index_file option of Sveltia CMS for every collection. The indexes collection, which lists the same files, can then go:

admin:
  collections:
    indexes:
      enable: false

Shortcodes

Since hugolify-admin v1.0.0

The enabled shortcodes join the markdown editor, as with Decap CMS.

Raw markdown and editor height

The markdown fields open in rich text only, in a compact editor. Add the raw mode and let the editor grow:

admin:
  fields:
    text_markdown:
      minimal: false
      modes: "['rich_text', 'raw']"

Deployments

skip_ci is true by default: commits made by the CMS do not trigger a build, and editors publish with the Publish Changes button.

Nested collections

Sveltia CMS supports nested collections, and fixes several long-standing problems of the Decap implementation along the way: entry paths, preview paths, media folders, folder labels and i18n.

Reorder

admin:
  collections:
    pages:
      reorder: true

Table view

summary_fields chooses the columns of the table view, written as table_columns.

admin:
  collections:
    persons:
      summary_fields:
        - summary
        - lastname
        - field: contact.email
          label: Email

Thumbnails

A collection with featured_image shows that image beside each entry, and in the grid view. Sveltia CMS only looks for an Image field at the root of the entry, while featured_image keeps the file in image.src, so Hugolify writes the thumbnail option. Turn it off, or name another field:

admin:
  collections:
    posts:
      thumbnail: false

The lists of images, galleries, logos and testimonials show their image beside each folded item as well.

Bulk edit

Every collection can edit the simple fields of many entries at once, in a table, saved in a single commit. It is off by default under the editorial workflow, as the commit bypasses the review. Turn it off, or pick the columns:

admin:
  collections:
    persons:
      bulk_edit: [title, draft]
    posts:
      bulk_edit: false

Publish mode

publish_mode also takes preview: each save goes to a pull request, checked on a deploy preview, then published without a review stage. An object sets the options of the workflow:

admin:
  publish_mode:
    type: editorial_workflow
    stages: [draft, pending_publish] # leaves out In Review
    direct_publish: true # adds Save and Publish for a quick fix

Image conversion on upload

HEIC photos from phones, which only Safari can display, are converted to WebP on upload and scaled down to 2560 pixels. Add raster_image to convert every image, JPEG and PNG included, or set transformations: false to upload them as they are:

admin:
  media:
    transformations:
      raster_image:
        quality: 85
        width: 2560
        height: 2560

The Asset Library accepts any file a field accepts: its size limit is the largest of the *_max_file_size, and each field keeps its own.

Stock photos

Editors search and insert free photos without leaving the CMS, each one entering the API key of the service in Sveltia CMS. Hugolify displays them like any other image:

• Pexels and Pixabay forbid hotlinking: the photo is downloaded into the media folder, then processed by Hugo.
• Unsplash is hotlinked: the field stores an images.unsplash.com URL, which hugolify-theme resizes, crops and converts on the fly through the Imgix parameters of Unsplash, as it does with Cloudinary and Uploadcare.
• Lorem Picsum is hotlinked too: the field stores a picsum.photos/id/… URL, which hugolify-theme sizes through its path, in WebP. Picsum always crops around the center, whatever the crop anchor. Its pictures come without description: write the alternative text.

Out of the box, Sveltia CMS offers all four services, Lorem Picsum to every editor as it needs no key. Pick the ones offered, or set false to hide them:

admin:
  media:
    providers: [unsplash, pexels, pixabay]

Block descriptions

The menu of the Add button shows a line under each block, such as “Questions whose answer opens on click” for the FAQ, in the language of the site. A block from another module takes its own from admin.blocks.{block}._description in the i18n files.

Dividers

A divider separates two groups of collections in the sidebar. Out of the box, pages and indexes come first, then the other collections, then menus and config.

admin:
  collection_groups:
    - collections: [pages, indexes]
    - collections: [posts, posts_categories, posts_tags]
    - collections: ['*']
    - collections: [menus, config]

Computed fields

The compute widget builds a read-only field from the other fields of the entry, and refreshes it as they are typed. No other supported CMS ships an equivalent.

Icon library

• Material Symbols , by default. See Icon sets for the others.

Documentation

• Hugolify Admin setup
• Sveltia CMS documentation
• Sveltia CMS repository

Tutorial

• How to create a Website with Hugo and Sveltia CMS using Hugolify
• How to connect Sveltia CMS to GitHub and Netlify using Hugolify