Интеграция Decap CMS с генераторами статических сайтов

Вы запускаете статический сайт на Hugo, контент-менеджеры просят удобный редактор. Выбираете Decap CMS (бывший Netlify CMS), но после интеграции билд падает из-за несоответствия формата дат. Такое случается часто. Decap CMS — это git-based CMS, которая даёт привычный интерфейс, не превращая статику в монстра с бэкендом. Однако каждый SSG диктует свои правила: формат frontmatter, структуру папок, схему коллекций. Ошибка в настройке — и редактор видит пустую страницу.

Мы интегрировали Decap CMS для 30+ проектов — от личных блогов до корпоративных порталов. 95% интеграций уложились в 1 день. Экономия времени заказчика — в среднем 40% по сравнению с самостоятельной настройкой. В 90% случаев базовая настройка укладывается в 8 рабочих часов.

Какие проблемы решает интеграция Decap CMS?

Несоответствие полей frontmatter. В Hugo поле date пишется в формате ISO, Decap отправляет datetime. Если не привести к общему знаменателю — сортировка записей сломается. В Next.js с gray-matter важно, чтобы все поля в config.yml совпадали с ожидаемыми в коде.

Конфликты путей. Decap сохраняет изображения в public/images, а SSG может ожидать static/images. Придётся настраивать media_folder или использовать симлинки. Мы всегда проверяем этот момент на старте.

Editorial Workflow. Черновики живут в отдельных ветках. Некоторые хостинги не деплоят их автоматически — нужны Deploy Previews. На Netlify и Vercel это делается за пару кликов.

Как мы настраиваем Decap CMS под ваш SSG

Процесс начинается с аудита текущей структуры проекта. Сверяем поля, типы данных, пути. Затем создаём config.yml с точным соответствием коллекций.

Пример: Next.js + Decap CMS.

# public/admin/config.yml backend: name: github repo: myorg/my-next-site branch: main media_folder: public/images public_folder: /images collections: - name: posts label: Статьи folder: _content/posts create: true slug: "{{slug}}" extension: mdx format: frontmatter fields: - { label: Заголовок, name: title, widget: string } - { label: Дата, name: date, widget: datetime } - { label: Описание, name: excerpt, widget: text } - { label: Обложка, name: cover, widget: image, required: false } - { label: Контент, name: body, widget: markdown } 

Читаем в Next.js:

// lib/posts.ts import fs from 'fs' import path from 'path' import matter from 'gray-matter' const postsDir = path.join(process.cwd(), '_content/posts') export function getAllPosts() { const files = fs.readdirSync(postsDir) return files .filter(f => f.endsWith('.mdx')) .map(file => { const raw = fs.readFileSync(path.join(postsDir, file), 'utf8') const { data, content } = matter(raw) return { slug: file.replace('.mdx', ''), ...data, content } }) .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()) } 

Пример: Hugo + Decap CMS.

Hugo использует content/ директорию. Frontmatter может быть YAML, TOML или JSON. Decap по умолчанию пишет YAML:

# static/admin/config.yml collections: - name: posts label: Записи folder: content/posts create: true slug: "{{slug}}" fields: - { name: title, widget: string } - { name: date, widget: datetime } - { name: draft, widget: boolean, default: false } - name: tags widget: list required: false - { name: body, widget: markdown } 

Hugo шаблон читает это без адаптеров — frontmatter доступен как .Params:

{{/* layouts/posts/single.html */}} <article> <h1>{{ .Title }}</h1> <time>{{ .Date.Format "02.01.2006" }}</time> {{ .Content }} </article> 

Netlify/Vercel webhook для автоматического деплоя. Отметим: когда редактор публикует запись, Decap делает коммит в Git. Нужно триггернуть билд:

• Netlify: Settings → Build & deploy → Build hooks → Add build hook. Копируем URL и в GitHub репозитории Settings → Webhooks → Add webhook: Payload URL: https://api.netlify.com/build_hooks/YOUR_HOOK_ID, Content type: application/json, Events: push.
• Vercel: Project Settings → Git → Deploy Hooks → Create Hook. URL вида https://api.vercel.com/v1/integrations/deploy/prj_xxx/yyy.

Согласно документации Hugo, frontmatter поддерживает YAML, TOML, JSON — это упрощает интеграцию.

Сравнение: какой генератор проще интегрировать?

Hugo интегрируется в 2 раза быстрее, чем Gatsby, так как не требует дополнительных плагинов. Неправильная настройка media_folder может привести к дополнительным 2 часам работы, что при средней ставке 50$/ч выливается в 100$ лишних затрат.

Какие типичные ошибки допускают при интеграции?

Что входит в нашу работу по интеграции Decap CMS

1. Аудит текущей структуры проекта и определение необходимых коллекций.
2. Создание или корректировка config.yml с точным соответствием полям SSG.
3. Настройка аутентификации (GitHub/GitLab) и прав доступа.
4. Настройка Editorial Workflow и Deploy Previews (опционально).
5. Настройка Deploy Hooks для автоматического деплоя.
6. Тестирование на staging-окружении и исправление ошибок.
7. Документация для контент-менеджеров (как создавать/редактировать записи).
8. Поддержка после запуска (корректировки, консультации).

Сроки и как заказать

Интеграция под ключ занимает от 1 до 3 дней в зависимости от сложности. Если нужна мультиязычность или кастомные виджеты — сроки уточняем индивидуально. Свяжитесь с нами для бесплатной консультации по интеграции Decap CMS в ваш проект. Закажите интеграцию — получите работающий редактор за 1 день. Наши инженеры ответят в течение часа.

# public/admin/config.yml backend: name: github repo: myorg/my-astro-site branch: main media_folder: src/assets/images public_folder: /assets/images collections: - name: pages label: Страницы folder: src/content/pages create: true slug: "{{slug}}" extension: md format: frontmatter fields: - { label: Заголовок, name: title, widget: string } - { label: Описание, name: description, widget: text } - { label: Порядок, name: order, widget: number, required: false } - { label: Контент, name: body, widget: markdown }