Ghost Headless: Next.js, Gatsby, Nuxt, Eleventy – Guides Officiels

Introduction

Ghost est un CMS open-source conçu pour les publications en ligne, comme les blogs et newsletters. En mode headless, Ghost sert uniquement de backend pour gérer le contenu, tandis que le frontend est construit avec des frameworks modernes. Cela permet de créer des sites rapides, sécurisés et évolutifs, en utilisant la Content API de Ghost pour récupérer les données.

Pour un public débutant, comme une petite entreprise ou une startup, cette approche est idéale : elle sépare la gestion de contenu (simple avec Ghost) de la présentation (flexible avec des outils comme Next.js). En 2025, avec l'essor des sites statiques, Ghost headless optimise les performances sans sacrifier la simplicité.

Dans cet article, nous explorons les starters officiels, les déploiements sur Vercel ou Netlify, et la différence entre SSG (Static Site Generation) et SSR (Server-Side Rendering). Tous les exemples sont basés sur les guides officiels de Ghost.

Pourquoi utiliser Ghost en mode Headless ?

Ghost headless transforme le CMS en une API pure pour le contenu (posts, pages, auteurs, tags). Vous publiez via l'admin Ghost, et votre site frontend tire les données dynamiquement ou statiquement.

Avantages pour une SMB ou startup :

Performance : Sites statiques chargent en millisecondes, idéaux pour le SEO et les mobiles.
Sécurité : Pas de base de données exposée côté frontend.
Évolutivité : Intégrez facilement avec d'autres outils (e-commerce, apps mobiles).
Coût : Hébergement statique sur Netlify ou Vercel est gratuit pour les petits volumes.

Limites avec Ghost(Pro) :

Pas de portail d'abonnement natif (rebuild manuel).
Liens d'emails (unsubscribe, view in browser) pointent vers ghost.io.
Pas de CDN Fastly ; reconstruisez sitemaps, archives tags/auteurs, et structured data.
Thème custom requis pour masquer le frontend Ghost (exemple : headless-placeholder).

Si vous débutez, commencez avec un starter officiel pour éviter les pièges.

SSG vs SSR : Quelle approche choisir ?

SSG (Static Site Generation) : Le site est généré au moment du build. Contenu pré-rendu en HTML statique. Avantages : ultra-rapide, bon pour le SEO, pas de serveur runtime. Idéal pour blogs statiques. Inconvénient : rebuild complet pour mises à jour (utilisez webhooks Ghost pour automatiser).
SSR (Server-Side Rendering) : Pages rendues à la demande sur un serveur. Avantages : contenu dynamique en temps réel. Inconvénient : plus lent, nécessite un hébergement serveur (mais Vercel gère bien).

Pour une startup, SSG suffit souvent ; passez à SSR si vous avez du contenu très dynamique.

Guide pour Next.js

Next.js est parfait pour les débutants React, avec support natif SSG/SSR.

Prérequis

Connaissances basiques en JS/React.
Compte Ghost actif.
Node.js installé.

Installation

Créez un projet :

yarn create next-app my-next-ghost
cd my-next-ghost
yarn dev

Installez la lib Ghost :

yarn add @tryghost/content-api

Configuration

Générez une clé Content API dans Ghost Admin > Intégrations > Ajouter une intégration (custom, avec accès read).

Créez lib/ghost.js :

import GhostContentAPI from "@tryghost/content-api";

const api = new GhostContentAPI({
  url: 'https://votre-site.ghost.io', // Remplacez par votre URL
  key: 'votre-cle-api',
  version: "v6.0"
});

export default api;

Récupérer le contenu

Pour tous les posts :

export async function getPosts() {
  return await api.posts.browse({ limit: 15 }).catch(err => console.error(err));
}

Pour un post unique :

export async function getSinglePost(slug) {
  return await api.posts.read({ slug }).catch(err => console.error(err));
}

Incluez tags/auteurs : ajoutez include: "tags,authors" dans browse.

Construire le site (SSG)

Dans pages/index.js (liste des posts) :

import { getPosts } from '../lib/ghost';

export async function getStaticProps() {
  const posts = await getPosts();
  return { props: { posts } };
}

export default function Home({ posts }) {
  return (
    <ul>
      {posts.map(post => <li key={post.id}>{post.title}</li>)}
    </ul>
  );
}

Pour un post dynamique pages/posts/[slug].js :
Utilisez getStaticPaths pour générer les paths (fetch tous les slugs avec pagination), et getStaticProps pour le contenu.

Déploiement

Sur Vercel : Connectez votre repo Git, build command yarn build. Sur Netlify : Ajoutez netlify.toml avec [build] command = yarn build.

Astuce : Utilisez webhooks Ghost pour rebuild automatique sur publication.

Guide pour Gatsby

Gatsby excelle en SSG avec GraphQL, idéal pour sites statiques complexes.

Prérequis

Gatsby CLI : npm install -g gatsby-cli.
Compte Ghost.

Installation

Utilisez le starter officiel :

gatsby new my-gatsby-site https://github.com/TryGhost/gatsby-starter-ghost.git
cd my-gatsby-site
yarn install
gatsby develop

Installez le plugin :

yarn add gatsby-source-ghost

Configuration

Dans gatsby-config.js :

{
  resolve: `gatsby-source-ghost`,
  options: {
    apiUrl: `https://votre-site.ghost.io`,
    contentApiKey: `votre-cle`
  }
}

Créez .ghost.json pour envs (dev/prod).

Récupérer le contenu

Via GraphQL (lancez gatsby develop et utilisez GraphiQL à /___graphql).

Exemple requête posts :

{
  allGhostPost(sort: {published_at: DESC}) {
    edges {
      node { title, html, slug }
    }
  }
}

Filtrez par tag : filter: { tags: { elemMatch: { slug: { eq: "votre-tag" } } } }.

Construire le site

Gatsby génère statiquement. Utilisez les nodes GhostPost, GhostPage, etc.

Déployez sur Netlify (fichier netlify.toml inclus) ou Vercel.

Guide pour Eleventy

Eleventy est minimaliste, parfait pour débutants voulant du simple et rapide (SSG pur).

Prérequis

Yarn/Node.
Clé API Ghost.

Installation

Clonez le starter :

git clone https://github.com/TryGhost/eleventy-starter-ghost.git
cd eleventy-starter-ghost
yarn
yarn start

Configuration

Dans .env :

GHOST_API_URL=https://votre-site.ghost.io
GHOST_CONTENT_API_KEY=votre-cle

Dans .eleventy.js, initialisez l'API (version v6.0).

Récupérer le contenu

Créez des collections :

config.addCollection("posts", async () => {
  let page = 1;
  let posts = [];
  while (true) {
    const res = await api.posts.browse({ include: "tags,authors", limit: 100, page });
    posts.push(...res);
    if (!res.meta.pagination.next) break;
    page++;
  }
  return posts.map(post => ({ ...post, published_at: new Date(post.published_at) }));
});

Accédez via collections.posts dans les templates Nunjucks.

Construire et déployer

yarn build génère le statique. Netlify via netlify.toml ; webhooks pour rebuilds.

Guide pour Nuxt

Nuxt (Vue.js) supporte SSG/SSR, bon pour apps interactives.

Prérequis

Connaissances Vue basiques.

Installation

yarn create nuxt-app my-nuxt-ghost
yarn add @tryghost/content-api

Configuration

Dans plugins/ghost.client.js ou API module, initialisez comme Next.js (v6.0).

Récupérer le contenu

Fonctions similaires : getPosts(), getSinglePost(slug).

Dans pages/index.vue :

<script>
import { getPosts } from '~/api/ghost';
export default {
  async asyncData() { return { posts: await getPosts() }; }
};
</script>

Pour SSG : Utilisez nuxt generate.

Déploiement

Vercel/Netlify avec yarn generate.

Autres frameworks : Gridsome, Hexo, VuePress

Gridsome (Vue + GraphQL) : Installez @gridsome/source-ghost, configurez routes (post: '/:slug'). Query via GraphQL (allGhostPost). SSG par défaut. Déployez sur Netlify.
Hexo : Script ./scripts/ghost.js pour fetch et hexo.post.create(). Générez pages/authors. hexo generate pour statique. Simple pour blogs purs.
VuePress : Script Node pour convertir HTML en MD (turndown pour code blocks). Configurez sidebar auto. yarn build pour dist. Bon pour docs.

Ces starters sont sur GitHub ; clonez et adaptez.

Déploiement sur Vercel ou Netlify

Vercel : Idéal pour Next.js/Nuxt (SSR auto). Connectez Git, set build yarn build, output out ou dist.
Netlify : Parfait pour Gatsby/Eleventy (SSG). Ajoutez netlify.toml : [build] command = yarn build ; publish = dist. Webhooks Ghost : Dans Ghost Admin > Intégrations, ajoutez webhook vers Netlify build hook.

Pour rebuilds auto : Configurez webhook Ghost sur "post.published" pour trigger le build.

Bonnes pratiques et conclusion

Commencez par un starter, testez localement, puis déployez. Utilisez pagination (limit 100, check meta.pagination.next) pour gros volumes. Pour Ghost(Pro), vérifiez les limites (pas de portal).

En 2025, Ghost headless reste une solution robuste pour startups : rapide à scaler, sans frais cachés. Choisissez Next.js pour polyvalence, Gatsby pour GraphQL. Consultez les docs officielles pour mises à jour.

Ghost Headless

Ghost Headless: Next.js, Gatsby, Nuxt, Eleventy – Guides Officiels

Introduction

Pourquoi utiliser Ghost en mode Headless ?

SSG vs SSR : Quelle approche choisir ?

Guide pour Next.js

Prérequis

Installation

Configuration

Récupérer le contenu

Construire le site (SSG)

Déploiement

Guide pour Gatsby

Prérequis

Installation

Configuration

Récupérer le contenu

Construire le site

Guide pour Eleventy

Prérequis

Installation

Configuration

Récupérer le contenu

Construire et déployer

Guide pour Nuxt

Prérequis

Installation

Configuration

Récupérer le contenu

Déploiement

Autres frameworks : Gridsome, Hexo, VuePress

Déploiement sur Vercel ou Netlify

Bonnes pratiques et conclusion

You may be interested

Admin API Ghost Détail

Tutoriels Ghost