Ghost y Astro

Ghost es un sistema de gestión de contenido de código abierto, headless y construido en Node.js.

Integración con Astro

En esta sección, usaremos la API de contenido de Ghost para traer tus datos a tu proyecto Astro.

Prerrequisitos

Para comenzar, necesitarás lo siguiente:

Un proyecto Astro - Si aún no tienes un proyecto Astro, nuestra guía de instalación te ayudará a comenzar en cuestión de minutos.
Un sitio Ghost - Se supone que tienes un sitio configurado con Ghost. Si no, puedes configurar uno en un entorno local.
Llave API de contenido - Puedes crear una integración en la sección Configuración > Integraciones de tu sitio. Desde allí puedes encontrar tu Llave API de contenido.

Configuración de credenciales

Para agregar las credenciales de tu sitio a Astro, crea un archivo .env en la raíz de tu proyecto con la siguiente variable:

CONTENT_API_KEY=TU_LLAVE_API

Ahora, deberías poder usar esta variable de entorno en tu proyecto.

Si quisieras tener IntelliSense para tu variable de entorno, puedes crear un archivo env.d.ts en el directorio src/ y configurar ImportMetaEnv de la siguiente manera:

interface ImportMetaEnv {
  readonly CONTENT_API_KEY: string;
}

Tu directorio raíz ahora debería incluir estos nuevos archivos:

Directorysrc/
- env.d.ts
.env
astro.config.mjs
package.json

Instalación de dependencias

Para conectar con Ghost, instala el paquete oficial @tryghost/content-api usando el comando de tu gestor de paquetes preferido:

npm install @tryghost/content-api

pnpm add @tryghost/content-api

yarn add @tryghost/content-api

Creando un blog con Astro y Ghost

Con la configuación de arriba, ahora puedes crear un blog que use Ghost como CMS.

Prerrequisitos

Un blog Ghost.
Un proyecto Astro integrado con la API de contenido de Ghost - Consulta integración con Astro para obtener más detalles sobre cómo configurar un proyecto Astro con Ghost.

Este ejemplo creará una página de índice que enumere las publicaciones con enlaces a páginas de publicaciones individuales generadas dinámicamente.

Obteniendo datos

Puedes obtener los datos de tu sitio con el paquete de la API de contenido de Ghost.

Primero, crea un archivo ghost.ts dentro de un directorio lib.

Directorysrc/
- Directorylib/
  - ghost.ts
- Directorypages/
  - index.astro
astro.config.mjs
package.json

Inicializa una instancia de API con la API de Ghost usando la llave API de la página de Integraciones del panel de control de Ghost.

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

// Crea una instancia de API con las credenciales del sitio
export const ghostClient = new GhostContentAPI({
    url: 'http://127.0.0.1:2368', // Esto es la URL predeterminada si tu sitio se está ejecutando en un entorno local
    key: import.meta.env.CONTENT_API_KEY,
    version: 'v5.0',
});

Mostrando una lista de publicaciones

La página src/pages/index.astro mostrará una lista de publicaciones, cada una con una descripción y un enlace a su propia página.

Directorysrc/
- …
Directorylib/
- ghost.ts
Directorypages/
- index.astro
astro.config.mjs
package.json

Impora ghostClient() en el frontmatter de Astro para usar el método posts.browse() para acceder a las publicaciones del blog de Ghost. Establece limit: all para recuperar todas las publicaciones.

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

Obteniendo los datos a través de la API de contenido devuelve un arreglo de objetos que contiene las propiedades de cada publicación como:

title - el título de la publicación
html - la representación HTML del contenido de la publicación
feature_image - la URL de origen de la imagen destacada de la publicación
slug - el slug de la publicación

Usa el arreglo posts devuelto de la petición para mostrar una lista de publicaciones en la página.

---
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>

Generando páginas

La página src/pages/post/[slug].astro genera dinámicamente una página para cada publicación.

Directorysrc/
- …
Directorylib/
- ghost.ts
Directorypages/
- index.astro
- Directorypost/
  - [slug].astro
astro.config.mjs
package.json

Importa ghostClient() para acceder a las publicaciones del blog usando posts.browse() y devuelve una publicación como props a cada una de tus rutas dinámicas.

---
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;
---

Crea la plantilla para cada página usando las propiedades de cada objeto 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="en">
    <head>
        <title>{post.title}</title>
    </head>
    <body>
        <img src={post.feature_image} alt={post.title} />

        <h1>{post.title}</h1>
        <p>{post.reading_time} min read</p>

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