Інтеграція Decap CMS з генераторами статичних сайтів

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

Як швидко налаштувати Decap CMS?

Наша команда має досвід впровадження Decap CMS у понад 30 проектах — від особистих блогів до корпоративних порталів. 95% інтеграцій вклалися в 1 день. Економія часу замовника — в середньому 40% порівняно з самостійним налаштуванням. У 90% випадків базове налаштування вкладається в 8 робочих годин. Завдяки автоматичній синхронізації з Git, підключення Decap CMS займає в 5 разів менше ручної роботи, ніж налаштування WordPress з REST API. Клієнти відзначають, що редактор контенту стає інтуїтивним, а швидкість публікації зростає на 70%.

Вирішення типових проблем

Невідповідність полів frontmatter. У Hugo поле date пишеться в форматі ISO, Decap відправляє datetime. Якщо не привести до спільного знаменника — сортування записів зламається. У Next.js з gray-matter важливо, щоб усі поля в config.yml збігалися з очікуваними в коді. Ми налаштовуємо колекції з урахуванням типової схеми Zod для Astro.

Конфлікти шляхів. Decap зберігає зображення в public/images, а SSG може очікувати static/images. Доведеться налаштовувати media_folder або використовувати симлінки. Ми завжди перевіряємо цей момент на старті — це заощаджує до 2 годин.

Editorial Workflow. Чернетки живуть в окремих гілках. Деякі хостинги не деплоять їх автоматично — потрібні Deploy Previews. На Netlify і Vercel це робиться за пару кліків, але забутий вебхук може коштувати 50$ зайвих витрат.

Процес налаштування Decap CMS під ваш SSG

Процес починається з аудиту поточної структури проекту. Звіряємо поля, типи даних, шляхи. Потім створюємо Decap CMS конфіг (config.yml) з точним відповідністю колекцій. Ми налаштовуємо конфігурацію Netlify CMS (тепер Decap CMS) так, щоб вона ідеально відповідала вашій схемі.

Приклад: 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 днів залежно від складності. Ми гарантуємо стандартне налаштування за 1 день. Якщо потрібна мультимовність або кастомні віджети — терміни уточнюємо індивідуально. Наші сертифіковані інженери мають багаторічний досвід роботи з git-based CMS. Зв'яжіться з нами для безкоштовної консультації з інтеграції Decap CMS у ваш проект. Замовте інтеграцію — отримайте працюючий редактор за 1 день з гарантованою якістю. Наші інженери відповідають протягом години. Decap CMS — ідеальне рішення статичний сайт CMS для вашого проекту, що поєднує швидкість статики та зручність редактора.

# 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 }