Cómo conectar Astro con un CMS Headless (ejemplo con Contentful)

🎯 Objetivo

En este artículo veremos cómo conectar Astro con un CMS headless, tomando como ejemplo Contentful.
La idea es generar contenido dinámico durante el build, sin perder las ventajas del SSG (Static Site Generation).

---

🛠️ Pasos principales

1. Instalar el SDK de Contentful

pnpm add contentful

2. Crear un cliente en lib/contentful.ts

import { createClient } from "contentful";

export const client = createClient({
  space: import.meta.env.CONTENTFUL_SPACE_ID,
  accessToken: import.meta.env.CONTENTFUL_ACCESS_TOKEN,
});

Los valores se cargan desde .env para mantener segura tu configuración.

3. Consultar entradas en una página Astro

---
import { client } from "../lib/contentful";

const entries = await client.getEntries({ content_type: "blogPost" });
---

<ul>
  {
    entries.items.map((item) => (
      <li>
        <a href={`/blog/${item.fields.slug}/`}>{item.fields.title}</a>
      </li>
    ))
  }
</ul>

---

⚡ Beneficios de este enfoque

• Separas contenido (CMS) de presentación (Astro).
• Puedes actualizar artículos en el CMS y regenerar la página con un webhook.
• Escalable: si mañana cambias de CMS (Sanity, Strapi, Directus), el patrón es el mismo.

---

📌 Conclusión

Astro facilita trabajar con Markdown al inicio, pero conectar un CMS headless es un paso natural cuando tu contenido crece.
Este blog usará Markdown al comienzo, pero ya está preparado para migrar a un CMS cuando lo necesite 🚀.