Інтеграція 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('uk-UA')}</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 днів.