Adding a CMS to ZeroPoint Starter

Work better from an example?

Static site generators like Eleventy (used in ZeroPoint) can be difficult for stakeholders to buy into because they don't have a familiar user experience.

Adding a git-based CMS like Decap CMS (formerly Netlify CMS) or Sveltia CMS to ZeroPoint Starter can provide a clear, understandable user interface for content editors and stakeholders looking for a more intuitive, "product"-like editing experience offered by monolithic content management systems.

Both Decap CMS and Sveltia CMS are free, open-source, offer useful feature sets, community support, and don't require an additional server. Everything is still static.

Advantages of a Git-based CMS

Steps to Add a CMS to ZeroPoint

  1. Create two files

    Adding Decap CMS or Sveltia to ZeroPoint is as simple as adding two files to your project. Both CMSes use a cross-compatible yaml-formatted configuration file, so switching between CMSes is straightforward. Feel free to try both!

    Decap CMS and Sveltia both run in the web browser, requiring no additional server infrastructure. Each authenticates users via GitHub.

    Add admin.yml and config.yml to your content/admin directory.

    1. src/content/admin/admin.yml

      This file is responsible for rendering the CMS interface.

      src/content/admin/admin.yml 
      ---
permalink: '/admin/index.html'
eleventyExcludeFromCollections: true
---
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>

</head>
<body>
  <!--
    If you want to use Decap CMS instead of Sveltia CMS, uncomment the following line and
    comment out the Sveltia CMS line below.
  -->
  <!-- <script src="https://unpkg.com/decap-cms@^3.8.3/dist/decap-cms.js"></script> -->
  <script src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js"></script>

</body>
</html>

    2. src/content/admin/config.yml.njk

      This file configures your CMS collections and settings.

      src/content/admin/config.yml.njk 
      ---
eleventyExcludeFromCollections: true
permalink: "/admin/config.yml.njk"
---

# Branding and configuration
logo_url: "/assets/images/favicon.svg"
site_url: "{{ site.url }}"
locale: "en"

# Backend configuration for Decap CMS/Sveltia CMS
backend:
  name: github
  branch: "{{ site.github_branch }}"
  repo: "{{ site.github_repo }}"

# Where uploaded media files are stored
media_folder: "src/assets/images"
public_folder: "/assets/images"

# Collections define editable content types in the CMS

# Pages
collections:
  - name: "pages"
    label: "Pages"
    editor:
      preview: false
    folder: "src/content/pages"
    create: true
    extension: "njk"
    format: "frontmatter"
    nested:
      depth: 100 # max depth to show in the collection tree
      summary: '{{title}}' # optional summary for a tree node, defaults to the inferred title field
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Permalink Override (Default: '/your-title/')", name: "permalink", widget: "string", required: false }
      - { label: "Content", name: "body", widget: "markdown" }

  # Posts (uncomment if your site has blog posts)
  # - name: "posts"
  #   label: "Blog Posts"
  #   editor:
  #     preview: true
  #   folder: "src/content/posts"
  #   create: true
  #   extension: "md"
  #   format: "frontmatter"
  #   sortable_fields:
  #     - { field: "date", direction: "desc" }
  #   fields:
  #     - { label: "Title", name: "title", widget: "string" }
  #     - { label: "Publish Date", name: "date", widget: "datetime" }
  #     - { label: "Excerpt", name: "excerpt", widget: "text", required: false }
  #     - { label: "Content", name: "body", widget: "markdown" }

  # Global settings and navigation
  - name: "settings"
    label: "Settings"
    editor:
      preview: false
    files:
      # Global site settings (site name, description, type)
      - label: "Global Settings"
        name: "site"
        file: "src/data/site.json"
        fields:
          - { label: "Name", name: "name", widget: "string" }
          - { label: "Description", name: "description", widget: "text" }
          - { label: "Type", name: "type", widget: "string" }
      # Navigation settings (menu items and structure)
      - label: "Navigation"
        name: "nav"
        file: "src/data/navigation.json"
        fields:
          - label: "Items"
            name: "items"
            widget: "list"
            fields:
              - label: "Text"
                name: "text"
                widget: "string"
              - label: "URL"
                name: "url"
                widget: "string"
              - label: "External"
                name: "external"
                widget: "boolean"
              - label: "Sub Items"
                name: "subitems"
                widget: "list"
                fields:
                  - label: "Text"
                    name: "text"
                    widget: "string"
                  - label: "URL"
                    name: "url"
                    widget: "string"
                  - label: "External"
                    name: "external"
                    widget: "boolean"

  2. Access your CMS

    Once you've added the necessary files and configured your collections, you can access your CMS at /admin/ on your site either locally or on the web!

    Log in using your GitHub account to start managing your content!

  3. Customize your CMS

    The example configuration above includes three collections: pages, posts, and settings. You can customize these collections to fit your content structure.

    For more information on configuring Decap CMS or Sveltia, see their respective documentation:

Advanced Examples

Some advanced examples of CMS configurations.

  1. Don't deploy the CMS to production

    Limit content management to your local or staging environments can help assure that content changes are reviewed before going live.

    To prevent the CMS from being deployed to production, add admin.11tydata.js to your content/admin directory with the following content:

    content/admin/admin.11tydata.js

    /**
 * Eleventy directory data file for src/content/admin
 * Sets permalink: false for all files in this directory if ELEVENTY_ENV is 'production'.
 * Otherwise, leaves permalink untouched (default behavior).
 *
 * @see https://www.11ty.dev/docs/data-computed/
 * @see https://www.11ty.dev/docs/permalinks/
 */
export default {
  eleventyComputed: {
    permalink: (data) => {
      if (process.env.ELEVENTY_ENV === 'production') {
        return false;
      }
      // Let individual file/frontmatter control permalink in non-production
      return data.permalink;
    },
  },
};