Skip to content
Starlight Blog
Demo Blog

Getting Started

A Starlight plugin to add a blog to your documentation site.

  • Link to the blog in the header
  • Post list with pagination
  • Global and per-post authors
  • Tags
  • Custom sidebar with recent posts and tags

Check out the demo for a preview of the blog.

Prerequisites

You will need to have a Starlight website set up. If you don’t have one yet, you can follow the “Getting Started” guide in the Starlight docs to create one.

Install the plugin

Starlight Blog is a Starlight plugin. Install it using your favorite package manager:

Terminal window
npm install starlight-blog

Configure the plugin

The Starlight Blog plugin can be configured in your Starlight configuration in the astro.config.mjs file.

astro.config.mjs
import starlight from '@astrojs/starlight'
import { defineConfig } from 'astro/config'
import starlightBlog from 'starlight-blog'


export default defineConfig({
  integrations: [
    starlight({
      plugins: [starlightBlog()],
      title: 'My Docs',
    }),
  ],
})

The Starlight Blog plugin behavior can be tweaked using various configuration options.

Extend frontmatter schema

Extend Starlight’s frontmatter default schema to add support for customizing individual blog posts using their frontmatter in the src/content/config.ts file:

src/content/config.ts
import { defineCollection } from 'astro:content';
import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
import { blogSchema } from 'starlight-blog/schema'


export const collections = {
  docs: defineCollection({ schema: docsSchema({ extend: blogSchema() }) }),
  i18n: defineCollection({ type: 'data', schema: i18nSchema() }),
};

Create your first blog post

Create your first blog post by creating a .md or .mdx file in the src/content/docs/blog/ directory:

src/content/docs/blog/my-first-blog-post.md
---
title: My first blog post
date: 2023-07-24
---


## Hello


Hello world!