Keystatic & Astro

Add content to your Astro project using Keystatic as a CMS

Keystatic is an open source, headless content-management system that allows you to structure your content and sync it with GitHub.

Prerequisites

An existing Astro project with an adapter configured.

Installing dependencies

Add both the Markdoc (for content entries) and the React (for the Keystatic Admin UI Dashboard) integrations to your Astro project, using the astro add command for your package manager.

You will also need two Keystatic packages:

Adding the Astro integration

Add the Astro integration from @keystatic/astro in your Astro config file:

import { defineConfig } from 'astro/config'

import react from '@astrojs/react'
import markdoc from '@astrojs/markdoc'
import keystatic from '@keystatic/astro'

// https://astro.build/config
export default defineConfig({
  integrations: [react(), markdoc(), keystatic()],
  output: 'static',
})

Creating a Keystatic config file

A Keystatic config file is required to define your content schema. This file will also allow you to connect a project to a specific GitHub repository (if you decide to do so).

Create a file called keystatic.config.ts in the root of the project and add the following code to define both your storage type (local) and a single content collection (posts):

import { config, fields, collection } from '@keystatic/core';

export default config({
  storage: {
    kind: 'local',
  },

  collections: {
    posts: collection({
      label: 'Posts',
      slugField: 'title',
      path: 'src/content/posts/*',
      format: { contentField: 'content' },
      schema: {
        title: fields.slug({ name: { label: 'Title' } }),
        content: fields.markdoc({
          label: 'Content',
        }),
      },
    }),
  },
});

Keystatic is now configured to manage your content based on your schema.

Running Keystatic locally

To launch your Keystatic Admin UI dashboard, start Astro’s dev server:

```bash
npm run dev
```

Visit http://127.0.0.1:4321/keystatic in the browser to see the Keystatic Admin UI running.

Creating a new post

Rendering Keystatic content

Query and display your posts and collections, just as you would in any Astro project.

Displaying a collection list

The following example displays a list of each post title, with a link to an individual post page.

---
import { getCollection } from 'astro:content'

const posts = await getCollection('posts')
---
<ul>
  {posts.map(post => (
    <li>
      <a href={`/posts/${post.id}`}>{post.data.title}</a>
    </li>
  ))}
</ul>

Displaying a single entry

To display content from an individual post, you can import and use the <Content /> component to render your content to HTML:

---
import { getEntry } from 'astro:content'

const post = await getEntry('posts', 'my-first-post')
const { Content } = await post.render()
---

<main>
  <h1>{post.data.title}</h1>
  <Content />
</main>

For more information on querying, filtering, displaying your collections content and more, see the full content collections documentation.

Deploying Keystatic + Astro

To deploy your website, visit our deployment guides and follow the instructions for your preferred hosting provider.

You’ll also probably want to connect Keystatic to GitHub so you can manage content on the deployed instance of the project.

Official Resources

Check out the official Keystatic guide
Keystatic starter template