Ghost y Astro

Ghost es un sistema de gestión de contenidos (CMS) headless de código abierto creado sobre Node.js.

Integración con Astro

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

Requisitos previos

Para empezar necesitarás tener lo siguiente:

Un proyecto de Astro - Si aún no tienes un proyecto de Astro, nuestra guía de instalación te pondrá en marcha en poco tiempo.
Un sitio de Ghost - Se asume que ya tienes un sitio configurado con Ghost. Si no es así, puedes configurar uno en un entorno local.
Clave de API de contenido - Puedes crear una integración en la sección de tu sitio Settings > Integrations. Desde allí podrás encontrar tu clave de API de contenido

Configuración de credenciales

Para añadir 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=YOUR_API_KEY

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

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

interface ImportMetaEnv {
  readonly CONTENT_API_KEY: string;
}

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

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

Instalación de dependencias

Para conectarte con Ghost, instala el wrapper oficial de la API de contenido @tryghost/content-api usando el comando a continuación para tu gestor de paquetes preferido y, opcionalmente, un paquete útil que contenga las definiciones de tipos si estás usando 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

Creación de un blog con Astro y Ghost

Con la configuración anterior, ahora puedes crear un blog que utilice Ghost como CMS.

Requisitos previos

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

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

Obtención de datos

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

Primero, crea un archivo ghost.ts bajo el directorio lib.

Directoriosrc/
- Directoriolib/
  - ghost.ts
- Directoriopages/
  - index.astro
astro.config.mjs
package.json

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

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

// Create API instance with site credentials
export const ghostClient = new GhostContentAPI({
    url: 'http://127.0.0.1:2368', // This is the default URL if your site is running on a local environment
    key: import.meta.env.CONTENT_API_KEY,
    version: 'v5.0',
});

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

Directoriosrc/
- Directoriolib/
  - ghost.ts
- Directoriopages/
  - index.astro
astro.config.mjs
package.json

Importa ghostClient() en el frontmatter de Astro para usar el método posts.browse() para acceder a las publicaciones de blog de Ghost. Configura 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);
    });
---

La obtención a través de la API de contenido devuelve una matriz de objetos que contienen 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 la matriz posts devuelta por la consulta para mostrar una lista de publicaciones de blog 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>

Generación de páginas

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

Directoriosrc/
- Directoriolib/
  - ghost.ts
- Directoriopages/
  - index.astro
  - Directoriopost/
    [slug].astro
astro.config.mjs
package.json

Importa ghostClient() para acceder a las publicaciones de blog usando posts.browse() y devolver 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>