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
• Cover images
• Custom sidebar with recent/featured posts and tags
• RSS

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.

Installation

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

   npm

   npm i starlight-blog

   pnpm

   pnpm add starlight-blog

   yarn

   yarn add starlight-blog

   ni

   ni starlight-blog

2. Configure the plugin 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',
       }),
     ],
   })

3. Starlight Blog uses Astro’s content collections, which are configured in the src/content.config.ts file.

   Update the content config file to add support for customizing individual blog posts using their frontmatter:

   src/content.config.ts

   import { defineCollection } from 'astro:content';
   import { docsLoader } from '@astrojs/starlight/loaders';
   import { docsSchema } from '@astrojs/starlight/schema';
   import { blogSchema } from 'starlight-blog/schema'
   
   export const collections = {
     docs: defineCollection({
       loader: docsLoader(),
       schema: docsSchema({
         extend: (context) => blogSchema(context)
       })
     }),
   };

4. 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!

5. Start the development server to preview your blog.

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