Skip to content

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 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:

    Terminal window
    npm i 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 { docsSchema } from '@astrojs/starlight/schema';
    import { blogSchema } from 'starlight-blog/schema'
    export const collections = {
    docs: defineCollection({
    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.