Tutorial: Primeros pasos con Astro — 6. Conectando Content Island con Astro

00:00 / 00:00

1x

0.25x 0.5x 0.75x 1x 1.25x 1.5x 1.75x 2x

• 1. Creando el proyecto en Content Island
• 2. Definiendo el modelo de datos
• 3. Añadiendo datos
• 4. Creando el proyecto en Astro
• 5. Creando la estructura de carpetas
• 6. Conectando Content Island con Astro
• 7. Montando la página de About
• 8. Página con lista de posts
• 9. Montando un post
• 10. Despliegue automático con Astro y Content Island usando GitHub Actions
• 11. Desplegando en Netlify
• 12. Automatizar el despliegue con GitHub Webhooks + Content Island

6. Conectando Content Island con Astro

Ya estamos listos para empezar a insertar contenido de Content Island en nuestro sitio.

Vamos a hacer el setup de Content Island ¿Qué nos va a hacer falta?

• Instalarnos la librería de API de Content Island.
• Añadir una variable de entorno con el API Key de nuestro proyecto en content Island.

Para instalar la librería de API de Content Island:

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

También nos hace falta añadir como variable de entorno el API Key de nuestro proyecto en Content Island.

Para ello, nos vamos a content island, elegimos el proyecto en el que estamos trabajando "get-started-blog", y en la pestaña de "General" podemos copiar el API Key (campo Token).

Ahora creamos un fichero ".env" en el raíz del proyecto y añadimos la variable de entorno:

CONTENT_ISLAND_SECRET_TOKEN=55e5a31cc5573948d5c08b9902fd135d

Y desde Astro 5, podemos tipar las variables de entorno de esta manera:

./astro.config.mjs

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

export default defineConfig({
  env: {
    schema: {
      CONTENT_ISLAND_SECRET_TOKEN: envField.string({
        context: 'server',
        access: 'secret',
        optional: false,
        default: 'INFORM_VALID_TOKEN'
      })
    }
  }
});

Está variable se ejecutará en el servidor, cuando Astro generé el sitio web estático.

Vamos a iniciar ahora la librería de Content Island en nuestro proyecto e inyectarle la API Key.

./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 ya tenemos todo listo para empezar a trabajar con Content Island. :)