Headless Statamic & Astro

Statamic es un CMS flat-file moderno. Permite a los desarrolladores crear fácilmente sitios web y aplicaciones dinámicas al mismo tiempo que ofrece a los editores de contenido una interfaz intuitiva y fácil de usar para gestionar el contenido.

Integración con Astro

Statamic viene con una REST API y GraphQL API incorporadas para conectar tus datos a Astro.

Requisitos previos

Para empezar, necesitarás lo siguiente:

La REST API y GraphQL API solo están disponibles en la versión pro de Statamic. Puedes probar la versión Pro de forma gratuita en tu máquina local.
Un proyecto de Astro - Si aún necesitas un proyecto de Astro, nuestra guía de instalación te pondrá en marcha rápidamente.
Un sitio de Statamic - Si necesitas un sitio web de Statamic, esta guía te ayudará a comenzar. Recuerda activar la REST API o la GraphQL API agregando STATAMIC_API_ENABLED=true o STATAMIC_GRAPHQL_ENABLED=true en el archivo .env y activa los recursos requeridos en el archivo de configuración de la API.

Obtención de datos

REST API

Obtén tus datos de Statamic desde la URL de la REST API de tu sitio. Por defecto, es https://[TU-SITIO]/api/. Luego, puedes renderizar las propiedades de tus datos utilizando la directiva set:html={} de Astro.

Por ejemplo, para mostrar una lista de títulos y su contenido de una colección seleccionada:

---
const res = await fetch("https://[YOUR-SITE]/api/collections/posts/entries?sort=-date")
const posts = await res.json()
---
<h1>Astro + Statamic 🚀</h1>
{
  posts.map((post) => (
      <h2 set:html={post.title} />
      <p set:html={post.content} />
  ))
}

GraphQL

Obtén tus datos de Statamic con la URL de la GraphQL API de tu sitio. Por defecto, es https://[TU-SITIO]/graphql/. Luego, puedes renderizar las propiedades de tus datos utilizando la directiva set:html={} de Astro.

Por ejemplo, para mostrar una lista de títulos y su contenido de una colección seleccionada:

---
const graphqlQuery = {
  query: `
    query Entries($page: Int, $locale: String) {
      entries(
        collection: "posts"
        sort: "date asc"
        limit: 20
        page: $page
        filter: { locale: $locale }
      ) {
        current_page
        has_more_pages
        data {
          title
          ... on Entry_Posts_Post {
              content
            }
        }
      }
    }
  `,
  variables: {
    page: page,
    locale: locale,
  },
};

const res = await fetch("https://[YOUR-SITE]/graphql", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(graphqlQuery),
})

const { data } = await res.json();
const entries = data?.entries;
---
<h1>Astro + Statamic 🚀</h1>
{
  entries.data.map((post) => (
      <h2 set:html={post.title} />
      <p set:html={post.content} />
  ))
}

Publicando tu sitio

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

Recursos de la comunidad

Más guías de CMS

Socios de CMS destacados

CloudCannon

CMS basado en Git creado para mayor velocidad, seguridad y cero dolores de cabeza.

Todas las guías de CMS

Contribuir Comunidad Patrocinar