Cosmic & Astro

Cosmic es un CMS headless que proporciona un panel de administración para gestionar contenido y una API que se puede integrar con una amplia gama de herramientas de frontend.

Requisitos previos

Un proyecto de Astro - Si deseas comenzar con un proyecto de Astro nuevo, lee la guía de instalación. Esta guía utiliza Tailwind CSS para el diseño.
Una cuenta y un Bucket de Cosmic - Crea una cuenta de Cosmic gratuita si no tienes una. Después de crear tu cuenta, se te pedirá que crees un nuevo proyecto vacío. También hay una plantilla de Blog de Astro simple disponible (esta es la misma plantilla que el tema de Astro Headless CMS) para importar automáticamente todo el contenido utilizado en esta guía.
Tus claves de API de Cosmic - Desde tu panel de control de Cosmic, deberás localizar tanto el slug del Bucket como la clave de lectura del Bucket para conectarte a Cosmic.

Integrar Cosmic con Astro

Instalar dependencias necesarias

Añade el SDK de JavaScript de Cosmic para obtener datos de tu Bucket de Cosmic.

npm install @cosmicjs/sdk

pnpm add @cosmicjs/sdk

yarn add @cosmicjs/sdk

Configurar claves de API

Crea un archivo .env en la raíz de tu proyecto de Astro (si no existe ya). Añade tanto el slug del Bucket como la clave de lectura del Bucket disponibles desde tu panel de control de Cosmic como variables de entorno públicas.

PUBLIC_COSMIC_BUCKET_SLUG=YOUR_BUCKET_SLUG
PUBLIC_COSMIC_READ_KEY=YOUR_READ_KEY

Obtener datos de Cosmic

Crea un nuevo archivo llamado cosmic.js. Coloca este archivo dentro de la carpeta src/lib en tu proyecto.

Añade el siguiente código para obtener datos de Cosmic utilizando el SDK y tus variables de entorno.

El siguiente ejemplo crea una función llamada getAllPosts() para obtener metadatos de los objetos de tipo posts de Cosmic:

import { createBucketClient } from '@cosmicjs/sdk'

const cosmic = createBucketClient({
  bucketSlug: import.meta.env.PUBLIC_COSMIC_BUCKET_SLUG,
  readKey: import.meta.env.PUBLIC_COSMIC_READ_KEY
})

export async function getAllPosts() {
  const data = await cosmic.objects
    .find({
      type: 'posts'
    })
    .props('title,slug,metadata,created_at')
  return data.objects
}

Lee más sobre las consultas en la documentación de Cosmic.

Importa tu función de consulta en un componente .astro. Después de obtener los datos, los resultados de la consulta se pueden utilizar en tu plantilla de Astro.

El siguiente ejemplo muestra la obtención de metadatos de posts de Cosmic y el paso de estos valores como props a un componente <Card /> para crear una lista de publicaciones de blog:

---
import Card from '../components/Card.astro'
import { getAllPosts } from '../lib/cosmic'

const data = await getAllPosts()
---

<section>
  <ul class="grid gap-8 md:grid-cols-2">
    {
      data.map((post) => (
        <Card
          title={post.title}
          href={post.slug}
          body={post.metadata.excerpt}
          tags={post.metadata.tags.map((tag) => tag)}
        />
      ))
    }
  </ul>
</section>

Ver el código fuente para el componente Card

Crear un blog con Astro y Cosmic

Puedes gestionar el contenido de tu blog de Astro utilizando Cosmic y crear webhooks para volver a desplegar automáticamente tu sitio web cuando actualices o añadas nuevo contenido.

Objetos de contenido de Cosmic

Las siguientes instrucciones asumen que tienes un tipo de objeto en Cosmic llamado posts. Cada publicación de blog individual es un post que se define en el panel de control de Cosmic con los siguientes Metafields:

Entrada de texto - Autor
Imagen - Imagen de portada
Repeater - Tags
- Entrada de texto - Título
Área de texto - Extracto
Texto enriquecido - Contenido

Mostrar una lista de publicaciones de blog en Astro

Utilizando el mismo método de obtención de datos que arriba, importa la consulta getAllPosts() desde tu archivo de script y espera los datos. Esta función proporciona metadatos sobre cada post que se pueden mostrar dinámicamente.

El siguiente ejemplo pasa estos valores a un componente <Card /> para mostrar una lista formateada de publicaciones de blog:

---
import Card from '../components/Card.astro'
import { getAllPosts } from '../lib/cosmic'

const data = await getAllPosts()
---

<section>
  <ul class="grid gap-8 md:grid-cols-2">
    {
      data.map((post) => (
        <Card
          title={post.title}
          href={post.slug}
          body={post.metadata.excerpt}
          tags={post.metadata.tags.map((tag) => tag)}
        />
      ))
    }
  </ul>
</section>

Generar publicaciones de blog individuales con Astro

Para generar una página individual con el contenido completo de cada publicación de blog, crea una página de enrutamiento dinámico en src/pages/blog/[slug].astro.

Esta página exportará una función getStaticPaths() para generar una ruta de página en el slug devuelto por cada objeto post. Esta función se llama en el momento de la compilación y genera y renderiza todas tus publicaciones de blog a la vez.

Para acceder a tus datos de Cosmic:

Realiza una consulta a Cosmic dentro de getStaticPaths() para obtener datos sobre cada publicación y proporcionárselos a la función.
Utiliza cada post.slug como un parámetro de ruta, creando las URLs para cada publicación de blog.
Devuelve cada post dentro de Astro.props, haciendo que los datos de la publicación estén disponibles en la parte de la plantilla HTML del componente de la página para su renderización.

El marcado HTML a continuación utiliza varios datos de Cosmic, como el título de la publicación, la imagen de portada y el contenido de texto enriquecido (el contenido completo de la publicación de blog). Utiliza set:html en el elemento que muestra el contenido de texto enriquecido de Cosmic para renderizar los elementos HTML en la página exactamente como se obtuvieron de Cosmic.

---
import { getAllPosts } from '../../lib/cosmic'
import { Image } from 'astro:assets'

export async function getStaticPaths() {
  const data = (await getAllPosts()) || []

  return data.map((post) => {
    return {
      params: { slug: post.slug },
      props: { post }
    }
  })
}

const { post } = Astro.props
---

<article class="mx-auto max-w-screen-md pt-20">
  <section class="border-b pb-8">
    <h1 class="text-4xl font-bold">{post.title}</h1>
    <div class="my-4"></div>
    <span class="text-sm font-semibold">{post.metadata.author?.title}</span>
  </section>
  {
    post.metadata.cover_image && (
      <Image
        src={post.metadata.cover_image.imgix_url}
        format="webp"
        width={1200}
        height={675}
        aspectRatio={16 / 9}
        quality={50}
        alt={`Cover image for the blog ${post.title}`}
        class={'my-12 rounded-md shadow-lg'}
      />
    )
  }
  <div set:html={post.metadata.content} />
</article>

Publicando tu sitio

Para desplegar tu sitio web, visita las guías de despliegue y sigue las instrucciones para tu proveedor de alojamiento preferido.

Reconstruir al actualizar contenido en Cosmic

Puedes configurar un webhook directamente en Cosmic para activar un nuevo despliegue de tu sitio en tu plataforma de alojamiento (por ejemplo, Vercel) cada vez que actualices o añadas objetos de contenido.

Bajo “Settings” > “webhooks”, añade el endpoint de la URL de Vercel y selecciona el tipo de objeto que deseas que active el webhook. Haz clic en “Add webhook” para guardarlo.

Netlify

Para configurar un webhook en Netlify:

Ve al panel de control de tu sitio y haz clic en Build & deploy.
En la pestaña Continuous Deployment, busca la sección Build hooks y haz clic en Add build hook.
Proporciona un nombre para tu webhook y selecciona la rama en la que deseas activar la compilación. Haz clic en Save y copia la URL generada.

Vercel

Para configurar un webhook en Vercel:

Ve al panel de control de tu proyecto y haz clic en Settings.
En la pestaña Git, busca la sección Deploy Hooks.
Proporciona un nombre para tu webhook y la rama en la que deseas activar la compilación. Haz clic en Add y copia la URL generada.