gatsby-theme-netlify-cms

A Gatsby theme for Netlify CMS

The theme uses netlify-cms-backend-fs to support local development.

Install

npm install --save gatsby-theme-netlify-cms

How to use

Edit gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-netlify-cms',
      options: {
        //...
      }
    }
  ],
};

Plugin Options

Netlify CMS can be configured via the plugin options below.

publicPath

(optional, type: string, default: "admin")

Customize the path to Netlify CMS on your Gatsby site.

htmlTitle

(optional, type: string, default: Content Manager)

Customize the value of the title tag in your CMS HTML (shows in the browser bar).

CMS Configuration

All configuration options for Netlify CMS are specified in the config.js JavaScript module.

// src/gatsby-theme-netlify-cms/config.js
 
import { createConfig } from 'gatsby-theme-netlify-cms';
 
const config = createConfig({
  collections: [
    {
      label: 'Pages',
      name: 'pages',
      files: [
        {
          label: 'Index',
          name: 'index',
          file: 'src/pages/index.md',
          fields: [
            {
              label: 'Template Key',
              name: 'templateKey',
              widget: 'hidden',
              default: 'about-page'
            },
            { label: 'Title', name: 'title', widget: 'string' },
            { label: 'Body', name: 'body', widget: 'markdown' }
          ]
        }
      ]
    }
  ]
});
 
//...
 
export default config;

CMS Customization

If you need to customize Netlify CMS, e.g. registering custom widgets or styling the preview pane, you'll need to do in the config.js JavaScript module.

// src/gatsby-theme-netlify-cms/config.js
 
import { registerPreviewTemplate } from 'gatsby-theme-netlify-cms';
 
import IndexPagePreview from './preview-templates/index-page-preview';
 
//...
 
registerPreviewTemplate('index', IndexPagePreview);