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

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

Decap CMS не зависит от конкретного SSG — он работает с файловой системой и Git. Но у каждого генератора свои соглашения по структуре контента, frontmatter и путям к файлам. Правильная интеграция — это когда CMS пишет файлы в формате, который SSG понимает без дополнительной обработки.

Next.js + Decap CMS

Next.js читает контент через fs, gray-matter или @next/mdx. Пример схемы:

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

Astro + Decap CMS

Astro имеет встроенную систему Content Collections, которая валидирует frontmatter через Zod. Конфиг коллекций должен совпадать:

# Decap коллекция
collections:
  - name: blog
    folder: src/content/blog
    fields:
      - { name: title, widget: string }
      - { name: pubDate, widget: datetime }
      - { name: tags, widget: list }
      - { name: body, widget: markdown }

// src/content/config.ts
import { defineCollection, z } from 'astro:content'

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    pubDate: z.coerce.date(),
    tags: z.array(z.string()).default([]),
  }),
})

export const collections = { blog }

Астро автоматически парсит Markdown с frontmatter и валидирует по схеме при сборке.

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>

Eleventy + Decap CMS

Eleventy гибок по структуре. Для коллекций через теги:

collections:
  - name: projects
    folder: src/projects
    fields:
      - { name: title, widget: string }
      - { name: date, widget: datetime }
      - name: tags
        widget: hidden
        default: [project]    # Eleventy-тег для коллекции
      - { name: body, widget: markdown }

В Eleventy коллекция project собирается автоматически по тегу:

// .eleventy.js
module.exports = function(eleventyConfig) {
  eleventyConfig.addCollection('projects', collection =>
    collection.getFilteredByTag('project').sort((a, b) => b.date - a.date)
  )
}

Netlify/Vercel webhook для автоматического деплоя

Когда редактор публикует запись, Decap делает коммит в Git. Нужно триггернуть билд:

Netlify — Build Hooks:

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 — Deploy Hooks:

Project Settings → Git → Deploy Hooks → Create Hook

URL вида https://api.vercel.com/v1/integrations/deploy/prj_xxx/yyy.

Предпросмотр черновиков

С editorial_workflow: true черновики живут в отдельных ветках. Для предпросмотра можно настроить Deploy Previews:

• Netlify автоматически деплоит каждую ветку на уникальный URL
• Vercel делает то же самое через Preview Deployments

Редактор видит кнопку «Preview» прямо в CMS — она открывает preview-деплой черновика.

Сроки

Интеграция Decap CMS с существующим SSG-проектом (согласование схем, настройка аутентификации, деплой-хуки): 1 день. Если нужна i18n, editorial workflow и Cloudinary — 2–3 дня.