Decap CMS

Nocturne ships with Decap CMS pre-configured. This gives you a browser-based editor at /admin/ — no code needed.

This page shows you how it works and how to customize it.

---

What Is Decap CMS?

Decap CMS is a Git-based CMS. It commits changes to your repository when you save.

Two ways to use it:

Mode	When to Use	Setup
Local	Content editing before deploying	npx decap-server + npm start
Cloud	Editing from any device	GitHub OAuth or Netlify Identity

For most teams, start with local mode.

---

File Location

static/admin/config.yml

Also needed:

static/admin/index.html

Both files are in your repo. No installation required — Decap CMS runs from a CDN.

---

Local Mode Setup

Step 1 — Install decap-server

In your terminal:

npx decap-server

Leave it running.

Step 2 — Start the dev server

In a second terminal:

npm start

Step 3 — Open the admin panel

http://localhost:3000/admin/index.html

Click Login. No password needed for local mode.

---

What You Can Edit

Nocturne's Decap CMS config covers:

Collection	What It Edits
Site Settings	Site config, navbar, widgets, homepage
Static Pages	src/pages/*.md
Documentation	docs/*
Docs Categories	_category_.json for user and developer guides
Blog Posts	blog/*

---

Collections Overview

Site Settings has four sub-collections:

1. Site Configuration — src/data/site.json
2. Navbar — src/data/navbar.json
3. Widgets — src/data/widgets.json
4. Home Content — src/data/home.json

Documentation handles your docs folder. Create new docs, edit existing ones, set sidebar_position.

Blog Posts handles your blog. Add, edit, remove articles.

---

Editing Homepage Content

The homepage content lives in src/data/home.json. In Decap CMS:

1. Click Site Settings → Home Content
2. Edit any field — hero, features, pricing, CTA
3. Click Save

The JSON file updates, the site rebuilds, changes appear live.

---

Editing Navbar

1. Click Site Settings → Navbar
2. Edit logo, links, CTA button
3. Click Save

---

Editing Docs

1. Click Documentation in the sidebar
2. Click any doc — or New Documentation
3. Edit fields: Title, Description, Sidebar Position, Sidebar Label, Body
4. Click Save

Important: New docs must be added to sidebars.ts manually — Decap CMS doesn't update it.

---

Adding a New Category

Decap CMS cannot create _category_.json files automatically.

To add a new category:

1. Create the folder in docs/ (e.g., docs/tutorials/)
2. Create docs/tutorials/_category_.json manually:

{
  "label": "Tutorials",
  "position": 5,
  "collapsed": false,
  "link": {
    "type": "generated-index",
    "title": "Tutorials",
    "description": "Step-by-step tutorials for Nocturne."
  }
}

3. Add the category to sidebars.ts
4. Restart the dev server

This is the main limitation of Decap CMS with Nocturne. Folders and category files must be created in code.

---

Cloud Mode Setup

To edit from any device, connect Decap CMS to GitHub.

Option A — Netlify Identity (recommended)

1. Deploy to Netlify
2. Enable Identity in Netlify settings
3. Enable Git Gateway
4. Change config.yml backend:

backend:
  name: git-gateway
  branch: main

5. Add the identity widget to static/admin/index.html:

<script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>

Option B — GitHub OAuth

1. Create a GitHub OAuth App
2. Configure Netlify as the OAuth proxy
3. Change config.yml backend:

backend:
  name: github
  repo: YOUR-USERNAME/nocturne-docs
  branch: main

See Decap CMS docs for details.

---

Customizing Collections

Open static/admin/config.yml to add fields or collections. Every field maps to a JSON or Markdown field.

Example — add a "Team" field to Navbar:

- label: "Team Link"
  name: "teamLink"
  widget: "string"
  required: false

Then add teamLink to src/data/navbar.json.

---

Troubleshooting

Admin panel is blank

1. Check that npx decap-server is running
2. Check that npm start is running
3. Open DevTools → Console for errors

"Unrecognized front-matter format"

The Decap server is not running from the correct folder. Restart it inside the Nocturne project root.

Changes don't save

1. Check that both terminals are running
2. Check the terminal output for errors
3. Try a different browser

Can't see the admin panel on the live site

Local mode only works locally. For cloud access, set up Netlify Identity or GitHub OAuth.

New category doesn't appear

Decap CMS can't create _category_.json files. Create them manually and add to sidebars.ts.

---

What's Next?

Now let's look at the JSON data files.

👉 Next: Data Files →