Розробка веб-сайту на Decap CMS (раніше Netlify CMS)
Decap CMS — git-based headless CMS. Контент зберігається в репозиторії як Markdown та YAML-файли. Немає бази даних, немає окремого бекенду — тільки Git. Редактор працює в браузерному інтерфейсі, натискає «Зберегти», й за кулісами відбувається коміт у репозиторій, CI/CD будує оновлений сайт.
Коли це уместо
Decap CMS підходить для невеликих сайтів, де команда розробки готова до обмежень git-моделі: контент-менеджер не може оновити сторінку в 2 години ночі й побачити зміни через 10 секунд — білд займе 1–3 хвилини на Netlify/Vercel. Але немає хостингу БД, немає бекенду, нулю операційних витрат на інфраструктуру.
Типовий стек: Next.js / Astro / Hugo + Decap CMS + Netlify/GitHub Pages.
Структура проекту
my-site/
├── public/
│ └── admin/
│ ├── index.html # Інтерфейс CMS
│ └── config.yml # Конфігурація колекцій
├── content/
│ ├── posts/
│ │ ├── first-post.md
│ │ └── second-post.md
│ └── pages/
│ └── about.md
├── src/
│ └── ... # Код фронтенду
└── astro.config.mjs
Точка входу CMS
<!-- 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>
Просто CDN-скрипт. Немає npm-пакетів для інтерфейсу.
Конфігурація колекцій
# public/admin/config.yml
backend:
name: github
repo: username/my-site
branch: main
media_folder: public/images/uploads
public_folder: /images/uploads
locale: uk
collections:
- name: posts
label: Статті
folder: content/posts
create: true
slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
fields:
- { label: Заголовок, name: title, widget: string }
- { label: Дата, name: date, widget: datetime }
- { label: Обложка, name: cover, widget: image, required: false }
- { label: Контент, name: body, widget: markdown }
Читання контенту в 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()
Аутентифікація
Decap CMS підтримує кілька бекендів:
- GitHub OAuth — через Netlify Identity або сторонній OAuth-прокси
- GitLab — аналогічно
- Git Gateway — Netlify-специфічний прокси
Для не-Netlify хостингу — окремий OAuth-сервер:
backend:
name: github
repo: username/my-site
base_url: https://your-oauth-server.com
Терміни
Блог або лендінг: 3–7 днів. Корпоративний сайт з 5–8 типами сторінок: 2–3 тижні.