Разработка сайта на CMS Netlify CMS / Decap CMS
Decap CMS (бывший Netlify 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>
Никаких npm-пакетов для интерфейса — просто CDN-скрипт. Конфигурация читается из config.yml рядом.
Конфигурация коллекций
# public/admin/config.yml
backend:
name: github
repo: username/my-site
branch: main
media_folder: public/images/uploads
public_folder: /images/uploads
locale: ru
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: description, widget: text, required: false }
- { label: Теги, name: tags, widget: list, required: false }
- { label: Контент, name: body, widget: markdown }
- name: pages
label: Страницы
files:
- label: О нас
name: about
file: content/pages/about.md
fields:
- { label: Заголовок, name: title, widget: string }
- { 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()
---
<article>
<h1>{post.data.title}</h1>
<time>{post.data.date.toLocaleDateString('ru-RU')}</time>
<Content />
</article>
Аутентификация
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
Минималистичный OAuth-прокси на Express разворачивается на Railway или Fly.io за 30 минут.
Сроки
Разработка сайта-визитки или блога с Decap CMS: 3–7 дней. Корпоративный сайт с 5–8 типами страниц, кастомными виджетами и настроенным CI/CD: 2–3 недели.