Headless Statamic y Astro

Statamic es un CMS moderno que utiliza archivos planos. Permite a los desarrolladores crear fácilmente sitios web y aplicaciones dinámicas, mientras que ofrece a los editores de contenido una interfaz intuitiva y fácil de usar para administrar el contenido.

Integración con Astro

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

Prerrequisitos

Para empezar, necesitarás lo siguiente:

Solo están disponibles las API REST y GraphQL API en la versión pro de Statamic. Puedes probar la versión Pro gratis en tu máquina local.
Un proyecto Astro - Si todavía necesitas un proyecto Astro, nuestra guía de instalación te pondrá en marcha rápidamente.
Un sitio Statamic - Si necesitas un sitio Statamic, la guía de instalación de Statamic te ayudará a empezar. Recuerda habilitar la API REST o la API GraphQL añadiendo STATAMIC_API_ENABLED=true o STATAMIC_GRAPHQL_ENABLED=true en el archivo .env y habilitando los recursos necesarios en el archivo de configuración de la API.

Obteniendo Datos

REST API

Obtén los datos de Statamic de la URL de la API REST de tu sitio. Por defecto, es https://[YOUR-SITE]/api/. A continuación, 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 los datos de Statamic de la URL de la API GraphQL de tu sitio. Por defecto, es https://[YOUR-SITE]/graphql/. A continuación, puedes renderizar las propiedades de tus datos utilizando la directiva set:html={} de Astro.

Por ejemlo, 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>
{
  entires.data.map((post) => (
      <h2 set:html={post.title} />
      <p set:html={post.content} />
  ))
}

Publicando tu sitio

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

Recursos de la comunidad

Temas

Creek