Headless Statamic & Astro

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.

• How to build a static site using Statamic as headless CMS
• Implementing Astro live previews in headless Statamic

More CMS guides