withastro · dreyfus92 · Jul 20, 2026 · Jul 18, 2026
diff --git a/src/content/docs/es/guides/cms/buttercms.mdx b/src/content/docs/es/guides/cms/buttercms.mdx
@@ -0,0 +1,141 @@
+---
+title: ButterCMS y Astro
+description: Agrega contenido a tu proyecto Astro usando ButterCMS
+sidebar:
+  label: ButterCMS
+type: cms
+logo: buttercms
+stub: false
+i18nReady: true
+---
+
+import { Steps } from '@astrojs/starlight/components';
+import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';
+
+[ButterCMS](https://buttercms.com/) es un CMS headless y un motor de blogs que te permite publicar contenido estructurado para usarlo en tu proyecto.
+
+## Integración con Astro
+
+:::note
+Para ver un ejemplo completo de un blog, consulta el [Proyecto inicial Astro + ButterCMS](https://buttercms.com/starters/astro-starter-project/).
+:::
+
+En esta sección, usaremos el [SDK de ButterCMS](https://www.npmjs.com/package/buttercms) para importar tus datos a tu proyecto Astro.
+
+Para empezar, necesitarás lo siguiente:
+
+### Prerequisitos
+
+1. **Un proyecto Astro** - Si aún no tienes un proyecto Astro, nuestra [Guía de instalación](/es/install-and-setup/) te permitirá ponerlo en marcha en un momento.
+
+2. **Una cuenta de ButterCMS** - Si aún no tienes una cuenta, puedes [registrarte](https://buttercms.com/join/) para disfrutar de una prueba gratuita.
+
+3. **Tu token de la API de ButterCMS** - Puedes encontrar tu token de la API en la página [configuración](https://buttercms.com/settings/).
+
+### Configuración
+
+<Steps>
+1. Crea un archivo `.env` en el directorio raíz de tu proyecto y añade tu token de la API como variable de entorno:
+
+    ```ini title=".env"
+    BUTTER_TOKEN=YOUR_API_TOKEN_HERE
+    ```
+
+    :::tip
+    Más información sobre [el uso de variables de entorno](/es/guides/environment-variables/) y los archivos `.env` en Astro.
+    :::
+
+2. Instala el SDK de ButterCMS como dependencia:
+
+    <PackageManagerTabs>
+      <Fragment slot="npm">
+      ```shell
+      npm install buttercms
+      ```
+      </Fragment>
+      <Fragment slot="pnpm">
+      ```shell
+      pnpm add buttercms
+      ```
+      </Fragment>
+      <Fragment slot="yarn">
+      ```shell
+      yarn add buttercms
+      ```
+      </Fragment>
+    </PackageManagerTabs>
+
+3. Crea un archivo `buttercms.js` en un nuevo directorio `src/lib/` de tu proyecto:
+
+    ```js title="src/lib/buttercms.js"
+    import Butter from 'buttercms';
+
+    export const butterClient = Butter(import.meta.env.BUTTER_TOKEN);
+    ```
+</Steps>
+
+**Esto autentica el SDK mediante tu token de la API y lo exporta para que puedas usarlo en todo tu proyecto.**
+
+### Obtención de datos
+
+Para obtener contenido, importa este cliente y usa una de sus funciones `retrieve`. 
+
+En este ejemplo, [recuperamos una colección](https://buttercms.com/docs/api/#retrieve-a-collection) que tiene tres campos: un texto breve `name`, un número `price` y un campo WYSIWYG `description`.
+
+```astro title="src/pages/ShopItem.astro"
+---
+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 campo. El campo `description` de tipo WYSIWYG se carga como una cadena de texto HTML, y [`set:html`](/es/reference/directives-reference/#sethtml) te permite mostrarlo.
+
+Del mismo modo, puedes [recuperar una página](https://buttercms.com/docs/api/#get-a-single-page) y mostrar sus campos:
+
+```astro title="src/pages/ShopItem.astro"
+---
+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>
+```
+
+## Recursos Oficiales
+
+- [Proyecto inicial Astro + ButterCMS](https://buttercms.com/starters/astro-starter-project/).
+- La [documentación completa de la API de ButterCMS](https://buttercms.com/docs/api/).
+- [Guía de JavaScript](https://buttercms.com/docs/api-client/javascript/) de ButterCMS.
+
+## Recursos de la comunidad
+
+- ¡Agrega el tuyo!