Lemoncode TV

05. Tour y Setup: Content Island (Headless CMS)

Ahora que hemos hecho el setup del proyecto de Astro, vamos a integrar un headless CMS para gestionar el contenido de nuestro sitio web.

En nuestro caso, usaremos Content Island, esto nos permitirá crear y gestionar contenido de forma sencilla: vamos a ver como están estructurados los datos, como conectarnos a la API y como consumirlos desde nuestro proyecto Astro.

📚 Modelo de datos: cursos y lecciones

En nuestro proyecto de Content Island hemos definido dos tipos de contenido:

• Curso (Training)
  Cada curso tiene:

  • title (título).
  • slug (identificador para URLs).
  • thumbnail (imagen de portada).
  • overview (resumen breve).
  • lessons (un array de lecciones lecciones).

• Lección (Lesson)
  Cada lección contiene:

  • title (título).
  • slug (identificador para URLs).
  • content (contenido en texto de la lección, enriquecido en formato Markdown).
  • video (duración estimada).

Este modelo nos permite construir un pequeño catálogo formativo estructurado y fácilmente escalable.

👀 Visualizando el contenido

Desde Content Island podemos ver el contenido cargado y editarlo con una interfaz amigable. Esto nos permitirá, desde nuestro proyecto Astro:

• Mostrar un listado de cursos.
• Acceder al detalle de cada curso.
• Ver el contenido completo de cada lección.

🧠 Podremos acceder desde nuestro proyecto a este contenido, gracias a una librería que se integra con la API de Content Island.

✅ ¿Por qué usar un CMS headless?

Comparado con almacenar esta información en archivos locales, o en una solución custom, un headless CMS como Content Island nos ofrece varias ventajas:

• Actualización sin programadores:
  Un editor de contenido puede modificar textos, añadir cursos o cambiar el orden de las lecciones sin tocar el código.

• Multiplataforma:
  El contenido puede ser reutilizado fácilmente desde distintas plataformas: sitio web, app móvil, aplicaciones internas, pantallas informativas, etc.

• Escalable y flexible:
  Podemos modificar o extender el modelo de datos sin romper la estructura existente.

• Ahorro de tiempo: No tenemos que ir modificando fichero locales a mano, o programar una solución custom para gestionar el contenido. Todo está centralizado en el HCMS.

🔌 Preparando la conexión con Content Island

📝 Para este tutorial vamos a usar un proyecto ya creado en Content Island, y te compartiremos una clave de acceso para que puedas conectarte directamente y probar sin necesidad de configurar nada.

Si lo prefieres, también puedes crear una cuenta gratuita en Content Island y reproducir los mismos pasos con tu propio proyecto.

📦 Instalando el cliente de Content Island

Content Island nos proporciona una librería para conectarnos a su API desde el servidor. Vamos a instalarla:

npm install @content-island/api-client --save

🔐 Añadir la API Key como variable de entorno

Para acceder a nuestro contenido, necesitamos una API Key (Token). Para obtenerla:

1. Entra a tu cuenta de Content Island.
2. Elige el proyecto que estás usando.
3. En la pestaña General, copia el campo Token.

Luego, crea un archivo .env en la raíz de tu proyecto (si no existe ya) y pega la clave así:

📄 ./.env

CONTENT_ISLAND_SECRET_TOKEN=TU_API_KEY_AQUI

El valor API token del proyecto de ejemplo es: f38a94366651cc72879e0d71cfd339d4

🔐 Tipar variables de entorno (Astro 5)

Desde Astro v5, podemos definir un esquema tipado para las variables de entorno. Esto permite validarlas y acceder a ellas de forma segura.

📄 ./astro.config.mjs

- import { defineConfig } from 'astro/config';
+ import { defineConfig, envField } from "astro/config";

import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  vite: {
    plugins: [tailwindcss()]
  },
+  env: {
+    schema: {
+      CONTENT_ISLAND_SECRET_TOKEN: envField.string({
+        context: "server", // Sólo se usa en el servidor
+        access: "secret",  // No se expone al cliente
+        optional: false,   // Obligatoria
+        default: "INFORM_VALID_TOKEN", // Valor por defecto (opcional)
+      }),
+    },
+  },
});

¿Qué estamos haciendo aquí?

• Importamos envField de astro/config para definir variables de entorno.

• Usamos envField.string para definir CONTENT_ISLAND_SECRET_TOKEN como una variable de entorno de tipo cadena.

• Especificamos que es una variable del servidor (context: "server"), que no se expone al cliente.

• La marcamos como obligatoria (optional: false), y le damos un valor por defecto (opcional).

⚙️ Inicializar el cliente de Content Island

Vamos a crear un cliente reutilizable que usará la API Key para conectarse al HCMS.

📄 ./src/lib/client.ts

import { CONTENT_ISLAND_SECRET_TOKEN } from "astro:env/server";
import { createClient } from "@content-island/api-client";

const client = createClient({
  accessToken: CONTENT_ISLAND_SECRET_TOKEN,
});

export default client;

Y con esto ya tenemos todo preparado para empezar a explotar los datos desde nuestro proyecto Astro.

Siguiente

En el siguiente vídeo, veremos como leer el listado de cursos desde Content Island y mostrarlos en nuestra página principal.