Visual CMS options
Two CMS tools let non-technical contributors edit content through a web interface without touching Markdown files or the command line.
Option A: Decap CMS
Decap CMS (formerly Netlify CMS) adds a /admin panel to the site. Editors log in with GitHub, write in a rich Markdown editor, and submit changes as pull requests.
Step 1 — Create static/admin/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Content Manager</title>
</head>
<body>
<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
</body>
</html>
Step 2 — Create static/admin/config.yml
backend:
name: git-gateway
branch: main
media_folder: static/images
public_folder: /images
collections:
- name: module_1
label: "Module 1 — Planning"
folder: content/Module_1
create: true
fields:
- { label: Title, name: title, widget: string }
- { label: Description, name: description, widget: string }
- { label: Weight, name: weight, widget: number }
- { label: Body, name: body, widget: markdown }
- name: module_2
label: "Module 2 — Consent"
folder: content/Module_2
create: true
fields:
- { label: Title, name: title, widget: string }
- { label: Description, name: description, widget: string }
- { label: Weight, name: weight, widget: number }
- { label: Body, name: body, widget: markdown }
- name: module_3
label: "Module 3 — Recording"
folder: content/Module_3
create: true
fields:
- { label: Title, name: title, widget: string }
- { label: Description, name: description, widget: string }
- { label: Weight, name: weight, widget: number }
- { label: Body, name: body, widget: markdown }Add a similar block for each Module (4–10) following the same pattern.
Step 3 — Enable Netlify Identity and Git Gateway
If hosting on Netlify:
- Go to your site dashboard → Configuration → Identity → Enable
- Under Registration, set to Invite only (recommended)
- Go to Configuration → Services → Git Gateway → Enable
- Invite editors via Identity → Invite users
If hosting on Cloudflare Pages or GitHub Pages, use the Decap CMS with GitHub backend instead:
backend:
name: github
repo: ofdn/clda
branch: main
With this backend, editors authenticate directly with GitHub — no Netlify Identity needed.
Step 4 — Access the editor
Navigate to https://ofdn.github.io/clda/admin/ and log in with GitHub. Changes are committed as pull requests and trigger a site rebuild on merge.
Option B: TinaCMS
TinaCMS embeds editing directly into the live site — click any text on the page to edit it in place. Changes are saved back to GitHub as commits.
Step 1 — Install the Tina CLI
npm install -g @tinacms/cli
Step 2 — Initialise Tina in the project
Run this from the project root:
npx @tinacms/cli@latest init
This creates:
tina/config.ts — schema and backend configurationtina/__generated__/ — auto-generated types (do not edit)
Step 3 — Configure tina/config.ts
import { defineConfig } from "tinacms";
export default defineConfig({
branch: "main",
clientId: "<your-tina-client-id>", // from tina.io dashboard
token: "<your-tina-read-token>", // from tina.io dashboard
build: {
outputFolder: "admin",
publicFolder: "static",
},
media: {
tina: {
mediaRoot: "images",
publicFolder: "static",
},
},
schema: {
collections: [
{
name: "module",
label: "Modules",
path: "content",
format: "md",
fields: [
{ type: "string", name: "title", label: "Title", isTitle: true, required: true },
{ type: "string", name: "description", label: "Description" },
{ type: "number", name: "weight", label: "Weight" },
{ type: "rich-text", name: "body", label: "Body", isBody: true },
],
},
],
},
});Step 4 — Create a Tina Cloud account
- Sign up at tina.io and create a project linked to the
ofdn/clda GitHub repo.
- Copy the Client ID and Read Token into
tina/config.ts.
Step 5 — Run locally with visual editing
npx tinacms dev -c "hugo server"
# open http://localhost:1313/admin
Click any text on the page to edit it inline. Save to commit directly to GitHub.
Step 6 — Deploy
Add the Tina build step before Hugo in your netlify.toml or GitHub Actions workflow:
# netlify.toml
[build]
command = "git submodule update --init --recursive && npx tinacms build && hugo --minify"
publish = "public"
Comparison
|
Decap CMS |
TinaCMS |
| Editor interface |
Separate /admin panel |
Inline on the live page |
| Auth |
GitHub OAuth or Netlify Identity |
Tina Cloud account |
| Self-hostable |
Yes |
Free tier available |
| Hugo support |
Native |
Via Tina config |
| Best for |
Teams comfortable with a form-based editor |
Teams who want to see changes in context |
| Cost |
Free |
Free tier (1 user); paid for teams |
Visual CMS options
Two CMS tools let non-technical contributors edit content through a web interface without touching Markdown files or the command line.
Option A: Decap CMS
Decap CMS (formerly Netlify CMS) adds a
/adminpanel to the site. Editors log in with GitHub, write in a rich Markdown editor, and submit changes as pull requests.Step 1 — Create
static/admin/index.htmlStep 2 — Create
static/admin/config.ymlAdd a similar block for each Module (4–10) following the same pattern.
Step 3 — Enable Netlify Identity and Git Gateway
If hosting on Netlify:
If hosting on Cloudflare Pages or GitHub Pages, use the Decap CMS with GitHub backend instead:
With this backend, editors authenticate directly with GitHub — no Netlify Identity needed.
Step 4 — Access the editor
Navigate to
https://ofdn.github.io/clda/admin/and log in with GitHub. Changes are committed as pull requests and trigger a site rebuild on merge.Option B: TinaCMS
TinaCMS embeds editing directly into the live site — click any text on the page to edit it in place. Changes are saved back to GitHub as commits.
Step 1 — Install the Tina CLI
Step 2 — Initialise Tina in the project
Run this from the project root:
This creates:
tina/config.ts— schema and backend configurationtina/__generated__/— auto-generated types (do not edit)Step 3 — Configure
tina/config.tsStep 4 — Create a Tina Cloud account
ofdn/cldaGitHub repo.tina/config.ts.Step 5 — Run locally with visual editing
Click any text on the page to edit it inline. Save to commit directly to GitHub.
Step 6 — Deploy
Add the Tina build step before Hugo in your
netlify.tomlor GitHub Actions workflow:Comparison
/adminpanel