Skip to main content
Official Plugin
View plugin on GitHub
See starters using this


The Gatsby notes theme

A Gatsby theme for publishing notes to your website.


For a new site

If you’re creating a new site and want to use the notes theme, you can use the notes theme starter. This will generate a new site that pre-configures use of the notes theme.

gatsby new my-themed-notes

Manually add to your site

  1. Install the theme
npm install gatsby-theme-notes
  1. Add the configuration to your gatsby-config.js file
// gatsby-config.js
module.exports = {
  plugins: [
      resolve: `gatsby-theme-notes`,
      options: {
        // basePath defaults to `/`
        basePath: `/notes`,
  1. Add notes to your site by creating md or mdx files inside /content/notes.

    Note that if you’ve changed the default contentPath in the configuration, you’ll want to add your markdown files in the directory specified by that path.

  2. Run your site using gatsby develop and navigate to your notes. If you used the above configuration, your URL will be http://localhost:8000/notes


Key Default value Description
basePath / Root url for all notes pages
contentPath /content/notes Location of notes content
mdxOtherwiseConfigured false Set this flag true if gatsby-plugin-mdx is already configured for your site.
homeText ~ Root text for notes breadcrumb trail
breadcrumbSeparator / Separator for the breadcrumb trail