Установка та настройка Decap CMS (Git-Based)
Decap CMS монтується в існуючий проект додаванням двох файлів: admin/index.html та admin/config.yml. Весь адміністративний інтерфейс завантажується на клієнті — серверної частини немає. Git-репозиторій виступає базою даних, коміти — транзакціями.
Додавання в існуючий проект
Для будь-якого статичного генератора або Next.js-проекту папку admin кладемо у директорію статичних файлів:
# Next.js
public/admin/index.html
public/admin/config.yml
# Astro
public/admin/index.html
public/admin/config.yml
# Hugo
static/admin/index.html
static/admin/config.yml
# Eleventy
admin/index.html → копіюється passthrough
admin/config.yml → копіюється passthrough
Для Eleventy потрібно явно прописати passthrough:
// .eleventy.js
module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy('admin')
}
index.html
<!doctype html>
<html lang="uk">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="noindex" />
<title>Управління контентом</title>
</head>
<body>
<script src="https://unpkg.com/decap-cms@^3.1.2/dist/decap-cms.js"></script>
</body>
</html>
Зафіксуємо версію — не ^3.0.0, а конкретну 3.1.2.
Бекенди аутентифікації
GitHub + Netlify Identity — найпростіший варіант, якщо хостинг на Netlify:
backend:
name: git-gateway
branch: main
publish_mode: editorial_workflow
Включаємо Identity та Git Gateway в настройках Netlify.
GitHub OAuth без Netlify — для хостингу на Vercel, VPS, GitHub Pages:
backend:
name: github
repo: myorg/my-site
branch: main
base_url: https://cms-oauth.mysite.com
OAuth-прокси — маленький сервер, що приймає код від GitHub та повертає токен. Готова реалізація:
git clone https://github.com/vencax/netlify-cms-github-oauth-provider
cd netlify-cms-github-oauth-provider
cp .env.example .env
# Заповнюємо GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET, REDIRECT_URL
npm install
node index.js
Деплоїмо на Railway або як Docker-контейнер. 20–30 хвилин.
Editorial Workflow
Включаємо чорновики та процес узгодження:
publish_mode: editorial_workflow
З'являється Kanban-дошка: Draft → In Review → Ready. Кожен чорновик створює окрему ветку, при публікації — мёрдж в main.
Локальне тестування
Decap підтримує локальний бекенд:
# Тільки для розробки
backend:
name: proxy
proxy_url: http://localhost:8081/api/v1
npx decap-server
Тепер http://localhost:3000/admin працює без GitHub-аутентифікації.
Терміни
Базова установка з 2–3 колекціями та GitHub OAuth: 4–6 годин. Повна настройка з Editorial Workflow, Cloudinary: 1–2 дні.