Astro Starter

An Astro ButterCMS Starter in Only Two Minutes

Get started using Astro with this fully-functional Astro starter project, fully integrated with ButterCMS, a leading headless CMS that makes collaborative content management of your app as easy as pie.

In less than two minutes, you can clone from GitHub, plug in your token, and run locally. Or, if you prefer, you can instantly deploy to Vercel with a single click, giving you an app you can share with your team.

http://localhost:3000/
A screenshot of the ButterCMS starter project
View Project on Github
First, clone the repo and install the dependencies by running npm install
git clone https://github.com/ButterCMS/astro-starter-buttercms.git cd astro-starter-buttercms npm install
To fetch your ButterCMS content, add your API token as an environment variable.
$ echo 'ASTRO_APP_BUTTER_CMS_API_KEY=<Your API Token>' >> .env
To view the app in the browser, you'll need to run the local development server:
$ npm run start

Astro quick start guide

This starter project will have you up and running with a rich Astro project in minutes. It comes integrated with ButterCMS a feature-filled SaaS CMS.

  • Native support for user-created Pages, including reusable Page Types. Define your Page schema once by dragging and dropping desired fields with the easy-to-use graphical interface inside the Butter dashboard. Team members can then roll out as many pages of that type as needed.
  • Global components and Collection Items, which allow you to define content and partial schemas that can then be reused on any page.
  • Powerful, native media-file handling and CDN via Filestack. Make static file management a thing of the past.

How to start the Astro project

Our Astro + ButterCMS starter project is designed to showcase all the features of ButterCMS, including the usage of Components for content modeling and Collections to build the customizable navigation. Once you've set up your starter project, you'll be able to log into your new Butter account and make changes to your content in real-time! Follow the steps above to get running locally.

Includes Astro Blog Starter

This starter project also incorporates a powerful blog engine, complete with tags, categories, filtering, search, and more.

Astro additional resources

Check out some additional Astro examples and starters