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:

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:

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