Pular para o conteúdo

Headless Statamic & Astro

Este conteúdo não está disponível em sua língua ainda.

Statamic is a modern, flat-file CMS. It allows developers to easily create dynamic websites and applications while offering content editors an intuitive and user-friendly interface for managing content.

Statamic comes with a built-in REST API and GraphQL API to connect your data to Astro.

To get started, you will need to have the following:

  1. REST API and GraphQL API are only available in a pro version of Statamic. You can try the Pro version free on your local machine.
  2. An Astro project - If you still need an Astro project, our Installation guide will get you up and running quickly.
  3. A Statamic site - If you need a Statamic website, this guide will help you get started. Remember to enable REST API or GraphQL API by adding STATAMIC_API_ENABLED=true or STATAMIC_GRAPHQL_ENABLED=true in the .env file and enable required resources in the API configuration file.

Fetch your Statamic data from your site’s REST API URL. By default, it’s https://[YOUR-SITE]/api/. Then, you can render your data properties using Astro’s set:html={} directive.

For example, to display a list of titles and their content from a selected collection:

---
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} />
))
}

Fetch your Statamic data with your site’s GraphQL API URL. By default, it’s https://[YOUR-SITE]/graphql/. Then, you can render your data properties using Astro’s set:html={} directive.

For example, to display a list of titles and their content from a selected collection:

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

To deploy your Astro site visit our deployment guides and follow the instructions for your preferred hosting provider.

Mais guias de CMS