Інтеграція 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: 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 }
    })
}

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: 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(),
  }),
})

export const collections = { blog }

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

Settings → Build & deploy → Build hooks → Add build hook

Копіюємо URL та додаємо до GitHub repo Settings → Webhooks.

Vercel — Deploy Hooks:

Project Settings → Git → Deploy Hooks

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

Попередній перегляд чорновиків

З editorial_workflow: true чорновики живуть у окремих гілках. Для попереднього перегляду налаштовуємо Deploy Previews:

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

Редактор бачить кнопку «Preview» — вона відкриває preview-деплой чорновика.

Терміни

Інтеграція з існуючим SSG: 1 день. З i18n, editorial workflow: 2–3 дні.