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
  • RSS (requires the Astro site option to be set)

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!

Configure your RSS feed

Set the Astro site configuration option and add Starlight’s social RSS configuration option using your website’s full URL. Your RSS feed will be located at /blog/rss.xml

astro.config.mjs
import { defineConfig } from 'astro/config'


export default defineConfig({
  site: 'https://www.example.com'
  starlight({
    social: {
      rss: 'https://www.example.com/blog/rss.xml',
    },
  }),
})

This will create a .xml file for feed readers and add the standard RSS icon to your website’s header.

Learn more about RSS feeds in Astro, including how to enable RSS feed auto-discovery in the official Astro documentation.