Ghost & Astro

Ghost est un système de gestion de contenu open-source, headless, construit sur Node.js.

Intégration avec Astro

Dans cette section, nous utiliserons l’API de contenu Ghost pour intégrer vos données dans votre projet Astro.

Prérequis

Pour commencer, vous devez disposer des éléments suivants :

Un projet Astro - Si vous n’avez pas encore de projet Astro, notre guide d’installation vous permettra d’être opérationnel en un rien de temps.
Un site Ghost - Il est supposé que vous avez un site configuré avec Ghost. Sinon, vous pouvez en configurer un dans un environnement local.
Clé d’API de contenu - Vous pouvez effectuer une intégration dans les paramètres Settings > Integrations de votre site. A partir de là, vous pouvez trouver votre Content API key

Configuration des informations d’identification

Pour ajouter les identifiants de votre site à Astro, créez un fichier .env à la racine de votre projet avec la variable suivante :

CONTENT_API_KEY=VOTRE_CLE_API

Maintenant, vous devriez être capable d’utiliser cette variable d’environnement dans votre projet.

Si vous voulez avoir IntelliSense pour votre variable d’environnement, vous pouvez créer un fichier env.d.ts dans le répertoire src/ et configurer ImportMetaEnv comme ceci :

interface ImportMetaEnv {
  readonly CONTENT_API_KEY: string;
}

Votre répertoire racine doit maintenant contenir ces nouveaux fichiers :

Répertoiresrc/
- env.d.ts
.env
astro.config.mjs
package.json

Installation des dépendances

Pour se connecter à Ghost, installez l’API de contenu officielle @tryghost/content-api en utilisant la commande ci-dessous pour votre gestionnaire de paquets préféré et, éventuellement, un paquet utile contenant des définitions de types si vous utilisez TypeScript :

npm install @tryghost/content-api
npm install --save @types/tryghost__content-api

pnpm add @tryghost/content-api
pnpm add --save-dev @types/tryghost__content-api

yarn add @tryghost/content-api
yarn add --dev @types/tryghost__content-api

Créer un blog avec Astro et Ghost

Avec la configuration ci-dessus, vous êtes maintenant en mesure de créer un blog qui utilise Ghost comme CMS.

Prérequis

Un blog Ghost
Un projet Astro intégré à l’API de contenu Ghost - Voir intégration avec Astro pour plus de détails sur la façon de configurer un projet Astro avec Ghost.

Cet exemple crée une page d’index qui répertorie les articles avec des liens vers des pages individuelles générées dynamiquement.

Récupération de données

Vous pouvez récupérer les données de votre site avec l’API de contenu de Ghost.

Tout d’abord, créez un fichier ghost.ts dans un répertoire lib.

Répertoiresrc/
- Répertoirelib/
  - ghost.ts
- Répertoirepages/
  - index.astro
astro.config.mjs
package.json

Initialisez une instance API avec l’API de Ghost en utilisant la clé d’API de la page Intégrations du tableau de bord de Ghost.

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

// Créer une instance API avec les informations d'identification du site
export const ghostClient = new GhostContentAPI({
    url: 'http://127.0.0.1:2368', // Il s'agit de l'URL par défaut si votre site fonctionne dans un environnement local.
    key: import.meta.env.CONTENT_API_KEY,
    version: 'v5.0',
});

Afficher une liste d’articles

La page src/pages/index.astro affichera une liste d’articles, chacun avec une description et un lien vers sa propre page.

Répertoiresrc/
- Répertoirelib/
  - ghost.ts
- Répertoirepages/
  - index.astro
astro.config.mjs
package.json

Importez ghostClient() dans le frontmatter Astro pour utiliser la méthode posts.browse() afin d’accéder aux articles du blog depuis Ghost. Définissez limit: all pour récupérer tous les articles.

---
import { ghostClient } from '../lib/ghost';
const posts = await ghostClient.posts
    .browse({
        limit: 'all',
    })
    .catch((err) => {
        console.error(err);
    });
---

La récupération via l’API de contenu renvoie un tableau d’objets contenant les propriétés de chaque article telles que :

title - le titre de l’article
html - le rendu HTML du contenu de l’article
feature_image - l’URL source de l’image vedette de l’article
slug - le nom de l’article.

Utilisez le tableau posts renvoyé par la recherche pour afficher une liste d’articles de blog sur la page.

---
import { ghostClient } from '../lib/ghost';
const posts = await ghostClient.posts
    .browse({
        limit: 'all',
    })
    .catch((err) => {
        console.error(err);
    });
---

<html lang="en">
    <head>
        <title>Astro + Ghost 👻</title>
    </head>
    <body>

        {
            posts.map((post) => (
                <a href={`/post/${post.slug}`}>
                    <h1> {post.title} </h1>
                </a>
            ))
        }
    </body>
</html>

Génération des pages

La page src/pages/post/[slug].astro génère dynamiquement une page pour chaque article.

Répertoiresrc/
- Répertoirelib/
  - ghost.ts
- Répertoirepages/
  - index.astro
  - Répertoirepost/
    [slug].astro
astro.config.mjs
package.json

Importez ghostClient() pour accéder aux articles de blogs en utilisant posts.browse() et renvoyer un article en tant que props à chacune de vos routes dynamiques.

---
import { ghostClient } from '../../lib/ghost';

export async function getStaticPaths() {
    const posts = await ghostClient.posts
        .browse({
            limit: 'all',
        })
        .catch((err) => {
            console.error(err);
        });

    return posts.map((post) => {
        return {
            params: {
                slug: post.slug,
            },
            props: {
                post: post,
            },
        };
    });
}

const { post } = Astro.props;
---

Créez le modèle pour chaque page en utilisant les propriétés de chaque objet post.

---
import { ghostClient } from '../../lib/ghost';
export async function getStaticPaths() {
    const posts = await ghostClient.posts
        .browse({
            limit: 'all',
        })
        .catch((err) => {
            console.error(err);
        });
    return posts.map((post) => {
        return {
            params: {
                slug: post.slug,
            },
            props: {
                post: post,
            },
        };
    });
}
const { post } = Astro.props;
---
<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>{post.title}</title>
    </head>
    <body>
        <img src={post.feature_image} alt={post.title} />

        <h1>{post.title}</h1>
        <p>{post.reading_time} minutes de lecture</p>

        <Fragment set:html={post.html} />
    </body>
</html>