Decap CMS (formerly Netlify CMS) Website Development
Decap CMS — git-based headless CMS. Content stored in repository as Markdown and YAML files. No database, no separate backend — only Git. Editor works in browser interface, clicks "Save," and behind the scenes a commit happens to repository, CI/CD builds updated site.
When It's Appropriate
Decap CMS suits small sites where development team accepts git model limitations: content manager can't update page at 2am and see changes in 10 seconds — build takes 1–3 minutes on Netlify/Vercel. But zero database hosting costs, zero backend, zero operational expenses on infrastructure.
Typical stack: Next.js / Astro / Hugo + Decap CMS + Netlify/GitHub Pages.
Project Structure
my-site/
├── public/
│ └── admin/
│ ├── index.html # CMS Interface
│ └── config.yml # Collections Config
├── content/
│ ├── posts/
│ │ ├── first-post.md
│ │ └── second-post.md
│ └── pages/
│ └── about.md
├── src/
│ └── ... # Frontend Code
└── astro.config.mjs
CMS Entry Point
<!-- public/admin/index.html -->
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CMS</title>
</head>
<body>
<script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
</body>
</html>
Just CDN script. No npm packages for interface.
Collections Configuration
# public/admin/config.yml
backend:
name: github
repo: username/my-site
branch: main
media_folder: public/images/uploads
public_folder: /images/uploads
locale: en
collections:
- name: posts
label: Articles
folder: content/posts
create: true
slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
fields:
- { label: Title, name: title, widget: string }
- { label: Date, name: date, widget: datetime }
- { label: Cover, name: cover, widget: image, required: false }
- { label: Body, name: body, widget: markdown }
Reading Content in Astro
// src/pages/blog/[slug].astro
import { getCollection } from 'astro:content'
export async function getStaticPaths() {
const posts = await getCollection('posts')
return posts.map(post => ({
params: { slug: post.slug },
props: { post },
}))
}
const { post } = Astro.props
const { Content } = await post.render()
Authentication
Decap CMS supports multiple backends:
- GitHub OAuth — via Netlify Identity or third-party OAuth proxy
- GitLab — similar
- Git Gateway — Netlify-specific proxy
For non-Netlify hosting, standalone OAuth server:
backend:
name: github
repo: username/my-site
base_url: https://your-oauth-server.com
Timeline
Blog or landing page: 3–7 days. Corporate site with 5–8 page types: 2–3 weeks.