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.

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

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.

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:

"src/pages/index.astro
---
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} />
))
}

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:

"src/pages/index.astro
---
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} />
))
}

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

Más guías de CMS