ButterCMS & Astro

ButterCMS es un CMS headless y motor de blogs que te permite publicar contenido estructurado para usar en tu proyecto.

Integración con Astro

En esta sección, utilizaremos el SDK de ButterCMS para traer tus datos a tu proyecto de Astro. Para empezar, necesitarás tener lo siguiente:

Requisitos previos

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.
Una cuenta de ButterCMS. Si no tienes una cuenta, puedes registrarte para una prueba gratuita.
Tu token de API de ButterCMS - Puedes encontrar tu token de API en la página Settings.

Configuración

Crea un archivo .env en la raíz de tu proyecto y añade tu token de API como una variable de entorno:
.env
```
BUTTER_TOKEN=YOUR_API_TOKEN_HERE
```
Lee más sobre el uso de variables de entorno y archivos .env en Astro.
Instala el SDK de ButterCMS como una dependencia:
- npm
- pnpm
- Yarn
Ventana de la terminal
npm install buttercms
Ventana de la terminal
pnpm add buttercms
Ventana de la terminal
yarn add buttercms

Crea un archivo buttercms.js en un nuevo directorio src/lib/ en tu proyecto:

import Butter from "buttercms";

export const butterClient = Butter(import.meta.env.BUTTER_TOKEN);

Esto autentica el SDK utilizando tu token de API y lo exporta para ser utilizado en todo tu proyecto.

Obtención de datos

Para obtener contenido, importa este cliente y utiliza una de sus funciones retrieve.

En este ejemplo, obtenemos una colección que tiene tres campos: un texto corto name, un número price y una description WYSIWYG.

---
import { butterClient } from "../lib/buttercms";
const response = await butterClient.content.retrieve(["shopitem"]);

interface ShopItem {
  name: string,
  price: number,
  description: string,
}

const items = response.data.data.shopitem as ShopItem[];
---
<body>
  {items.map(item => <div>
    <h2>{item.name} - ${item.price}</h2>
    <p set:html={item.description}></p>
  </div>)}
</body>

La interfaz refleja los tipos de campos. El campo WYSIWYG description se carga como una cadena de HTML, y set:html te permite renderizarlo.

Del mismo modo, puedes obtener una página y mostrar sus campos:

---
import { butterClient } from "../lib/buttercms";
const response = await butterClient.page.retrieve("*", "simple-page");
const pageData = response.data.data;

interface Fields {
  seo_title: string,
  headline: string,
  hero_image: string,
}

const fields = pageData.fields as Fields;
---
<html>
  <title>{fields.seo_title}</title>
  <body>
    <h1>{fields.headline}</h1>
    <img src={fields.hero_image} />
  </body>
</html>