Skip to content

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:

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

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:

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

More CMS guides

Contribute

What’s on your mind?

Create GitHub Issue

Quickest way to alert our team of a problem.

Community