Headless CMS отдаёт данные через API, не диктуя фронтенд. Astro поддерживает любую: от Git-based решений до облачных платформ. Разбираем 7 лучших вариантов с примерами кода.
Типы Headless CMS
Git-based — контент в .md/.mdx-файлах в репозитории:
- ✅ Бесплатно, без API-лимитов, история в Git
- ✅ Нативно работает с Content Collections Astro
API-based — контент в облачной БД, Astro забирает при сборке:
- ✅ Удобный UI без Git, медиабиблиотека, роли
- ⚠️ Платные тарифы, webhook нужен для пересборки
Сравнительная таблица
| CMS | Тип | Бесплатно | UI | Интеграция с Astro |
|---|---|---|---|---|
| Keystatic | Git-based | ✅ Полностью | Отличный | ✅ Официальная |
| Decap CMS | Git-based | ✅ Полностью | Хороший | ✅ Простая |
| Sanity | API-based | ✅ 3 юзера | Отличный | ✅ Официальная |
| TinaCMS | Git + облако | ⚠️ Ограничено | Отличный (визуал) | ✅ Официальная |
| Contentful | API-based | ✅ 5 юзеров | Хороший | Через SDK |
| Prismic | API-based | ✅ 1 юзер | Хороший | Через SDK |
| Directus | API (self-hosted) | ✅ Self-hosted | Отличный | Через API |
1. Keystatic — Рекомендация для большинства
Создан специально для Astro и Next.js командой Thinkmill.
npx astro add keystatic// keystatic.config.ts
import { config, collection, fields } from '@keystatic/core';
export default config({
storage: { kind: 'local' },
collections: {
articles: collection({
label: 'Статьи',
slugField: 'title',
path: 'src/content/articles/*',
format: { contentField: 'content' },
schema: {
title: fields.slug({ name: { label: 'Заголовок' } }),
description: fields.text({ label: 'Описание', multiline: true }),
date: fields.date({ label: 'Дата' }),
tags: fields.array(fields.text({ label: 'Тег' }), {
label: 'Теги',
itemLabel: (p) => p.value,
}),
cover: fields.image({ label: 'Обложка', directory: 'src/assets/covers/' }),
content: fields.mdx({ label: 'Контент' }),
},
}),
},
});Перейдите на /keystatic — полноценный CMS без деплоя.
✅ Бесплатно навсегда | ✅ Контент в Git | ✅ Нативная интеграция с Content Collections
2. Decap CMS — Проверенная классика
<!-- public/admin/index.html -->
<script src="https://unpkg.com/decap-cms@latest/dist/decap-cms.js"></script># public/admin/config.yml
backend:
name: github
repo: username/repo
branch: main
collections:
- name: articles
label: Статьи
folder: src/content/articles
create: true
format: frontmatter
extension: mdx
fields:
- { label: Заголовок, name: title, widget: string }
- { label: Описание, name: description, widget: text }
- { label: Дата, name: date, widget: datetime }
- { label: Теги, name: tags, widget: list }
- { label: Контент, name: body, widget: markdown }✅ Бесплатно | ✅ Зрелый продукт | ⚠️ Требует OAuth | ⚠️ UI устарел
3. Sanity — Для сложных структур
GROQ — мощный язык запросов, недостижимый для других CMS:
npm install @sanity/client @sanity/image-url// src/lib/sanity.ts
import { createClient } from '@sanity/client';
export const client = createClient({
projectId: import.meta.env.SANITY_PROJECT_ID,
dataset: 'production',
apiVersion: '2026-01-01',
useCdn: true,
});
export async function getAllArticles() {
return client.fetch(`
*[_type == "article"] | order(date desc) {
_id, title, "slug": slug.current,
description, date, "cover": cover.asset->url, tags
}
`);
}✅ Мощный GROQ | ✅ Отличный DX | ✅ Бесплатно до 3 юзеров | ⚠️ Vendor lock-in
4. TinaCMS — Визуальное редактирование
Уникальная фича: редактор видит изменения прямо на сайте в реальном времени.
npx @tinacms/cli@latest init// tina/config.ts
import { defineConfig } from 'tinacms';
export default defineConfig({
branch: process.env.TINA_BRANCH ?? 'main',
clientId: process.env.TINA_CLIENT_ID,
token: process.env.TINA_TOKEN,
build: { outputFolder: 'admin', publicFolder: 'public' },
schema: {
collections: [
{
name: 'article',
label: 'Статьи',
path: 'src/content/articles',
format: 'mdx',
fields: [
{ type: 'string', name: 'title', isTitle: true, required: true },
{ type: 'string', name: 'description', ui: { component: 'textarea' } },
{ type: 'datetime', name: 'date' },
{ type: 'string', name: 'tags', list: true },
{ type: 'rich-text', name: 'body', isBody: true },
],
},
],
},
});✅ Визуальное редактирование | ✅ Контент в Git | ⚠️ Платно для команд ($29/мес)
5. Contentful — Enterprise-стандарт
// src/lib/contentful.ts
import contentful from 'contentful';
export const client = contentful.createClient({
space: import.meta.env.CONTENTFUL_SPACE_ID,
accessToken: import.meta.env.CONTENTFUL_ACCESS_TOKEN,
});
export async function getAllArticles() {
const entries = await client.getEntries({
content_type: 'article',
order: ['-sys.createdAt'],
});
return entries.items;
}✅ Зрелый, enterprise-поддержка | ✅ Workflow и i18n | ⚠️ Дорого на больших объёмах
6. Directus — Self-hosted с полным контролем
docker run -p 8055:8055 \
-e SECRET=your-secret \
-e ADMIN_EMAIL=admin@example.com \
-e ADMIN_PASSWORD=password \
directus/directus// src/lib/directus.ts
import { createDirectus, rest, readItems } from '@directus/sdk';
const client = createDirectus(import.meta.env.DIRECTUS_URL).with(rest());
export async function getAllArticles() {
return client.request(
readItems('articles', {
sort: ['-date'],
filter: { status: { _eq: 'published' } },
}),
);
}✅ Бесплатно self-hosted | ✅ Без vendor lock-in | ⚠️ Нужен VPS и обслуживание
Итоговые рекомендации
| Ситуация | Рекомендация |
|---|---|
| Один разработчик, Git-based | Keystatic |
| Нетехнические редакторы без GitHub | Sanity или Decap |
| Визуальное редактирование | TinaCMS |
| Сложные структуры, big content | Sanity |
| Enterprise, переводы, workflow | Contentful |
| Self-hosted, нет vendor lock-in | Directus |
| Ghost-блог + Astro фронтенд | Ghost Headless → гайд |
Итог
Для большинства Astro-проектов в 2026 году Keystatic — оптимальный выбор: бесплатно, Git-based, нативная интеграция с Content Collections, отличный UI. Нужны нетехнические редакторы без GitHub — Sanity. Enterprise с workflow — Contentful. Максимальный контроль без vendor lock-in — Directus self-hosted. Выбирайте CMS под команду, а не под технологию.
