Интеграция CMS Ghost для блога

Интеграция CMS Ghost для блога

Ghost — специализированная CMS для публикаций. Редактор карточек, нативная поддержка платных подписок, встроенная рассылка, SEO из коробки. Не стоит использовать Ghost как универсальную CMS — это инструмент для медиа-продуктов и блогов, где основной контент это статьи.

Два сценария интеграции: Ghost как headless backend с кастомным фронтендом через Content API, или Ghost с собственными темами на Handlebars.

Content API

Ghost предоставляет публичный Content API и закрытый Admin API. Для чтения на фронтенде нужен только Content API:

npm install @tryghost/content-api

// lib/ghost.ts
import GhostContentAPI from '@tryghost/content-api'

export const ghost = new GhostContentAPI({
  url: process.env.GHOST_URL!,        // https://blog.example.com
  key: process.env.GHOST_CONTENT_KEY!, // из настроек Ghost > Integrations
  version: 'v5.0',
})

// Все посты с тегами и авторами
export async function getPosts(options = {}) {
  return ghost.posts.browse({
    limit: 'all',
    include: ['tags', 'authors'],
    filter: 'visibility:public',
    order: 'published_at DESC',
    ...options,
  })
}

// Один пост по slug
export async function getPostBySlug(slug: string) {
  return ghost.posts.read({ slug }, { include: ['tags', 'authors'] })
}

// Страницы (статические, не посты)
export async function getPage(slug: string) {
  return ghost.pages.read({ slug })
}

Интеграция с Next.js 14

// app/blog/page.tsx
import { getPosts } from '@/lib/ghost'

export const revalidate = 3600 // ISR — обновлять раз в час

export default async function BlogPage() {
  const posts = await getPosts({ limit: 20 })

  return (
    <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
      {posts.map(post => (
        <article key={post.id}>
          {post.feature_image && (
            <img src={post.feature_image} alt={post.feature_image_alt || post.title} />
          )}
          <h2><a href={`/blog/${post.slug}`}>{post.title}</a></h2>
          <p>{post.excerpt}</p>
          <time>{new Date(post.published_at!).toLocaleDateString('ru-RU')}</time>
        </article>
      ))}
    </div>
  )
}

// app/blog/[slug]/page.tsx
import { getPosts, getPostBySlug } from '@/lib/ghost'

export async function generateStaticParams() {
  const posts = await getPosts({ fields: ['slug'] })
  return posts.map(p => ({ slug: p.slug }))
}

export default async function PostPage({ params }: { params: { slug: string } }) {
  const post = await getPostBySlug(params.slug).catch(() => notFound())

  return (
    <article>
      <h1>{post.title}</h1>
      {/* Ghost возвращает готовый HTML */}
      <div
        className="prose prose-lg max-w-none"
        dangerouslySetInnerHTML={{ __html: post.html! }}
      />
    </article>
  )
}

Ghost возвращает уже отрендеренный HTML. Для кастомной обработки есть Lexical JSON (поле lexical) — внутренний формат редактора Ghost 6.

Webhook для реинвалидации

// app/api/ghost-webhook/route.ts
import { revalidatePath, revalidateTag } from 'next/cache'

export async function POST(request: Request) {
  const secret = request.headers.get('x-ghost-signature')
  // проверка подписи HMAC
  const body = await request.json()

  // Ghost шлёт событие post.published, post.updated, etc.
  const { event } = body
  if (['post.published', 'post.updated', 'post.deleted'].includes(event)) {
    revalidateTag('ghost-posts')
    revalidatePath('/blog')
  }

  return new Response('OK')
}

В настройках Ghost: Settings → Integrations → Custom Integrations → Add webhook.

Admin API — создание контента программно

import GhostAdminAPI from '@tryghost/admin-api'

const ghostAdmin = new GhostAdminAPI({
  url: process.env.GHOST_URL!,
  key: process.env.GHOST_ADMIN_KEY!, // формат: id:secret
  version: 'v5.0',
})

// Создать пост
await ghostAdmin.posts.add({
  title: 'Автоматически созданный пост',
  html: '<p>Содержимое</p>',
  status: 'published',
  tags: [{ name: 'автоматизация' }],
  authors: [{ email: '[email protected]' }],
})

// Загрузить изображение
const image = await ghostAdmin.images.upload({ file: './cover.jpg' })

Это используется при миграции контента из других CMS или автоматической публикации.

Self-hosted Ghost на Docker

# docker-compose.yml
services:
  ghost:
    image: ghost:5-alpine
    restart: always
    environment:
      url: https://blog.example.com
      database__client: mysql
      database__connection__host: db
      database__connection__user: ghost
      database__connection__password: ${DB_PASSWORD}
      database__connection__database: ghost
      mail__transport: SMTP
      mail__options__service: Mailgun
      mail__options__auth__user: ${MAILGUN_USER}
      mail__options__auth__pass: ${MAILGUN_PASS}
    volumes:
      - ghost-content:/var/lib/ghost/content
    ports:
      - "2368:2368"

  db:
    image: mysql:8
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
      MYSQL_DATABASE: ghost
      MYSQL_USER: ghost
      MYSQL_PASSWORD: ${DB_PASSWORD}
    volumes:
      - mysql-data:/var/lib/mysql

Ghost поддерживает SQLite (для небольших блогов) и MySQL. PostgreSQL официально не поддерживается.

Темы на Handlebars

Если headless не нужен — Ghost работает с собственными темами:

{{!-- index.hbs --}}
{{#foreach posts}}
  <article class="post">
    <h2><a href="{{url}}">{{title}}</a></h2>
    {{#if feature_image}}
      <img src="{{img_url feature_image size="m"}}" alt="{{feature_image_alt}}">
    {{/if}}
    <p>{{excerpt words="30"}}</p>
    {{#foreach tags}}
      <a href="{{url}}" class="tag">{{name}}</a>
    {{/foreach}}
  </article>
{{/foreach}}
{{pagination}}

Для разработки темы: ghost-cli + локальный Ghost, горячая перезагрузка через gscan.

Членство и подписки

Ghost 5+ включает встроенную монетизацию через Stripe. Конфиг в config.production.json:

{
  "members": {
    "enabled": true,
    "trackSources": true
  },
  "stripeDirect": true
}

Платный контент отмечается в редакторе как Members only или Paid members only — Ghost сам контролирует доступ.

Сроки

Headless интеграция с Next.js, webhook, ISR: 2–3 дня. Self-hosted деплой + кастомная тема + настройка подписок: 5–8 дней.