ButterCMS & Astro
ButterCMS is a headless CMS and blog engine that allows you to publish structured content to use in your project.
Integrating with AstroSection titled Integrating with Astro
For a full blog site example, see the Astro + ButterCMS Starter Project.
In this section, we’ll use the ButterCMS SDK to bring your data into your Astro project. To get started, you will need to have the following:
PrerequisitesSection titled Prerequisites
An Astro project - If you don’t have an Astro project yet, our Installation guide will get you up and running in no time.
A ButterCMS account. If you don’t have an account, you can sign up for a free trial.
Your ButterCMS API Token - You can find your API Token on the Settings page.
SetupSection titled Setup
.envfile in the root of your project and add your API token as an environment variable:
Read more about using environment variables and
.envfiles in Astro.
Install the ButterCMS SDK as a dependency:
buttercms.jsfile in a new
src/lib/directory in your project:
This authenticates the SDK using your API Token and exports it to be used across your project.
Fetching DataSection titled Fetching Data
To fetch content, import this client and use one of its
In this example, we retrieve a collection that has three fields: a short text
name, a number
price, and a WYSIWYG
The interface mirrors the field types. The WYSIWYG
description field loads as a string of HTML, and
set:html lets you render it.
Similarly, you can retrieve a page and display its fields:
Official ResourcesSection titled Official Resources
Community ResourcesSection titled Community Resources
- Add yours!