DatoCMS & Astro

DatoCMS es un CMS headless basado en la web para gestionar contenido digital para tus sitios y aplicaciones.

Integración con Astro

En esta guía, obtendrás datos de contenido de DatoCMS en tu proyecto de Astro, y luego los mostrarás en una página.

Requisitos previos

Para empezar, necesitarás lo siguiente:

Un proyecto de Astro - Si aún no tienes un proyecto de Astro, puedes seguir las instrucciones de nuestra guía de instalación.
Una cuenta y un proyecto de DatoCMS - Si no tienes una cuenta, puedes registrarte para obtener una cuenta gratuita.
La clave de API de solo lectura para tu proyecto de DatoCMS - Puedes encontrarla en el panel de administración de tu proyecto, bajo “Settings” > “API Tokens”.

Configurar las credenciales

Crea un nuevo archivo (si no existe ya) llamado .env en la raíz de tu proyecto de Astro. Añade una nueva variable de entorno de la siguiente manera, utilizando la clave de API que se encuentra en el panel de administración de DatoCMS:

DATOCMS_API_KEY=YOUR_API_KEY

Para el soporte de TypeScript, declara el tipado de esta variable de entorno en el archivo env.d.ts en la carpeta src/. Si este archivo no existe, puedes crearlo y añadir lo siguiente:

interface ImportMetaEnv {
  readonly DATOCMS_API_KEY: string;
}

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

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

Aprende más sobre las variables de entorno y los archivos .env en Astro.

Crear un modelo en DatoCMS

En el panel de administración de DatoCMS de tu proyecto, navega a “Settings” > “Models” y crea un nuevo modelo llamado “Home” con el interruptor “Single Instance” seleccionado. Esto creará una página de inicio para tu proyecto. En este modelo, añade un nuevo campo de texto para el título de la página.

Navega a la pestaña “Content” en tu proyecto y haz clic en tu página de inicio recién creada. Ahora puedes añadir un título. Guarda la página y continúa.

Obtención de datos

En tu proyecto de Astro, navega a la página que obtendrá y mostrará el contenido de tu CMS. Añade la siguiente consulta para obtener el contenido de home utilizando la API de GraphQL de DatoCMS.

Este ejemplo muestra el título de la página de DatoCMS en src/pages/index.astro:

---
const response = await fetch('https://graphql.datocms.com/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
    Authorization: `Bearer ${import.meta.env.DATOCMS_API_KEY}`,
  },
  body: JSON.stringify({
    query: `query Homepage {
          home {
            title
          }
        }
      `,
  }),
});

const json = await response.json();
const data = json.data.home;
---

<h1>{data.title}</h1>

Esta consulta de GraphQL obtendrá el campo title en la página home de tu proyecto de DatoCMS. Cuando actualices tu navegador, deberías ver el título en tu página.

Añadir bloques de contenido dinámicos y modulares

Si tu proyecto de DatoCMS incluye contenido modular, entonces necesitarás compilar un componente .astro correspondiente para cada bloque de contenido (por ejemplo, una sección de texto, un vídeo, un bloque de cita, etc.) que permita el campo modular en tu proyecto.

El siguiente ejemplo es un componente de Astro <Text /> para mostrar un bloque de “Texto de múltiples párrafos” de DatoCMS.

---
export interface TextProps {
  text: string
}

export interface Props {
  item: TextProps
}

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

<div set:html={item.text} />

Para obtener estos bloques, edita tu consulta de GraphQL para incluir el bloque de contenido modular que creaste en DatoCMS.

En este ejemplo, el bloque de contenido modular se llama content en DatoCMS. Esta consulta también incluye la clave única _modelApiKey de cada elemento para verificar qué bloque debe mostrarse en el campo modular, según el bloque elegido por el autor del contenido en el editor de DatoCMS. Utiliza una sentencia switch en la plantilla de Astro para permitir la renderización dinámica basada en los datos recibidos de la consulta.

El siguiente ejemplo representa un bloque de contenido modular de DatoCMS que permite al autor elegir entre un campo de texto (<Text />) y una imagen (<Image />) renderizados en la página de inicio:

---
import Image from '../components/Image.astro';
import Text from '../components/Text.astro';

const response = await fetch('https://graphql.datocms.com/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
    Authorization: `Bearer ${import.meta.env.DATOCMS_API_KEY}`,
  },
  body: JSON.stringify({
    query: `query Homepage {
          home {
            title
            content {
              ... on ImageRecord {
                _modelApiKey
               image{
                url
               }
              }
              ... on TextRecord {
                _modelApiKey
                text(markdown: true)
              }
            }
          }
        }
      `,
  }),
});

const json = await response.json();
const data = json.data.home;
---

<h1>{data.title}</h1>
{
  data.content.map((item: any) => {
    switch (item._modelApiKey) {
      case 'image':
        return <Image item={item} />;
      case 'text':
        return <Text item={item} />;
      default:
        return null;
    }
  })
}

Publicando tu sitio

Para desplegar tu sitio web, visita nuestras guías de despliegue y sigue las instrucciones para tu proveedor de alojamiento preferido.

Publicar al cambiar el contenido en DatoCMS

Si tu proyecto utiliza el modo estático por defecto de Astro, necesitarás configurar un webhook para activar una nueva compilación cuando tu contenido cambie. Si utilizas Netlify o Vercel como tu proveedor de alojamiento, puedes utilizar su función de webhook para activar una nueva compilación cuando cambies el contenido en DatoCMS.

Netlify

Para configurar un webhook en Netlify:

Ve al panel de control de tu sitio y haz clic en Build & deploy.
En la pestaña Continuous Deployment, busca la sección Build hooks y haz clic en Add build hook.
Proporciona un nombre para tu webhook y selecciona la rama en la que deseas activar la compilación. Haz clic en Save y copia la URL generada.

Vercel

Para configurar un webhook en Vercel:

Ve al panel de control de tu proyecto y haz clic en Settings.
En la pestaña Git, busca la sección Deploy Hooks.
Proporciona un nombre para tu webhook y la rama en la que deseas activar la compilación. Haz clic en Add y copia la URL generada.

Añadir un webhook a DatoCMS

En el panel de administración de tu proyecto de DatoCMS, navega a la pestaña Settings y haz clic en Webhooks. Haz clic en el icono de más para crear un nuevo webhook y dale un nombre. En el campo de URL, pega la URL generada por tu servicio de alojamiento preferido. Como disparador (Trigger), selecciona la opción que mejor se adapte a tus necesidades. (Por ejemplo: compilar cada vez que se publique un nuevo registro).