Saltearse al contenido

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

Sección titulada Integración con Astro

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

Prerrequisitos

Sección titulada Prerrequisitos

Para empezar, necesitarás lo siguiente:

  1. 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.
  2. Un proyecto Astro - Si todavía necesitas un proyecto Astro, nuestra guía de instalación te pondrá en marcha rápidamente.
  3. 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

Sección titulada Obteniendo Datos

REST API

Sección titulada 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

Sección titulada 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 res = await fetch("https://[YOUR-SITE]/graphql/",
  {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      query: `
        posts: entries(collection: "posts", sort: "date desc") {
          data {
            title
            ... on Entry_Posts_Post {
              content
            }
          }
        }
      `
    }),
  });
const entries = await res.json()
---
<h1>Astro + Statamic 🚀</h1>
{
  entires.data.posts.data.map((post) => (
      <h2 set:html={post.title} />
      <p set:html={post.content} />
  ))
}

Publicando tu sitio

Sección titulada 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

Sección titulada Recursos de la comunidad

Temas

Sección titulada Temas

Más guías de CMS