Add a blog to an Astro site

Before you start

• An Astro project
• A project API key from Developer → API keys

Install and connect

npm install cmskite marked

CMSKITE_API_KEY=csk_live_...

---
import { createCMSKite } from 'cmskite'
import { marked } from 'marked'

export async function getStaticPaths() {
  const cms = createCMSKite({ apiKey: import.meta.env.CMSKITE_API_KEY })
  const paths = []
  for await (const post of cms.posts.all()) paths.push({ params: { slug: post.slug }, props: { post } })
  return paths
}

const { post } = Astro.props
const html = post.bodyFormat === 'markdown' ? await marked.parse(post.body) : post.body
---
<article>
  <h1>{post.title}</h1>
  <Fragment set:html={html} />
</article>

Static or on demand

With getStaticPaths the posts are read when you build, so a new post needs a new build. Point a webhook at your host's deploy hook to rebuild on every publish. Or render on demand with an adapter and drop getStaticPaths, reading the post with cms.posts.findBySlug(Astro.params.slug).

Check that it works

1. Publish a short test post in the dashboard
2. Open /blog on your deployed site in a private window and reload. The post should be in the list within a minute
3. Open the post. Its address should be your site's, not cmskite.com
4. Delete or unpublish the test post when you are done