gatsby-plugin-static-cms

Overview

Automatically generates an admin/index.html with a default Static CMS implementation.

Static CMS is a React single page app for editing git based content via API. Its built for non-technical and technical editors alike, and its super easy to install and configure. For more details, check out the docs site.

Install

1npm install @staticcms/app gatsby-plugin-static-cms

How to use

Add the Static CMS plugin in your gatsby-config.js:

1plugins: [`gatsby-plugin-static-cms`]

Then add your Static CMS configuration file in static/admin/config.yml.

Options

Static CMS can be configured via the plugin options below. You can learn about how to pass options to plugins in the Gatsby docs.

modulePath

(optional, type: string | Array<string>, default: undefined)

If you need to customize Static CMS, e.g. registering custom widgets or styling the preview pane, you'll need to do so in a JavaScript module and provide Gatsby with the path to your module via the modulePath option. Any styles imported by this module (or by the modules that it imports, all the way down the chain) are automatically applied to the editor preview pane by the plugin.

1plugins: [
2  {
3    resolve: `gatsby-plugin-static-cms`,
4    options: {
5      /**
6       * One convention is to place your Static CMS customization code in a
7       * `src/cms` directory.
8       */
9      modulePath: `${__dirname}/src/cms/cms.js`,
10    },
11  },
12]

The js module might look like this:

1/**
2 * The default export of `@staticcms/app` is an object with all of the Static CMS
3 * extension registration methods, such as `registerWidget` and
4 * `registerPreviewTemplate`.
5 */
6import CMS from "@staticcms/app"
7
8import '@staticcms/app/dist/main.css';
9
10/**
11 * Any imported styles should be automatically be applied to the editor preview
12 * pane thus eliminating the need to use `registerPreviewStyle` for imported
13 * styles. However if you are experiencing build errors regarding importing css,
14 * sass or scss into a cms module when deploying to the netlify platform, you
15 * may need to follow the implementation found in netlify documentation here:
16 * https://staticjscms.netlify.app/docs/beta-features/#raw-css-in-registerpreviewstyle
17 * All of the example imports below would result in styles being applied to the
18 * preview pane.
19 */
20import "module-that-imports-styles.js"
21import "styles.scss"
22import "../other-styles.css"
23
24/**
25 * Let's say you've created widget and preview components for a custom image
26 * gallery widget in separate files:
27 */
28import ImageGalleryWidget from "./image-gallery-widget.js"
29import ImageGalleryPreview from "./image-gallery-preview.js"
30
31/**
32 * Register the imported widget:
33 */
34CMS.registerWidget(`image-gallery`, ImageGalleryWidget, ImageGalleryPreview)

manualInit

(optional, type: boolean, default: false)

Set this to true If you need to manually initialize Static CMS. The plugin will take care of setting window.CMS_MANUAL_INIT to true:

1plugins: [
2  {
3    resolve: `gatsby-plugin-static-cms`,
4    options: {
5      manualInit: true,
6    },
7  },
8]

The js module might look like this:

1import CMS from "@staticcms/app"
2
3import '@staticcms/app/dist/main.css';
4
5/**
6 * Optionally pass in a config object. This object will be merged into `config.yml` if it exists
7 */
8
9CMS.init({
10  config: {
11    backend: {
12      name: "git-gateway",
13    },
14  },
15})

enableIdentityWidget

(optional, type: boolean, default: true)

enableIdentityWidget is true by default, allowing Netlify Identity to be used without configuration. Disable it when not using Netlify Identity to reduce bundle size.

1plugins: [
2  {
3    resolve: `gatsby-plugin-static-cms`,
4    options: {
5      enableIdentityWidget: true,
6    },
7  },
8]

publicPath

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

Customize the path to Static 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).

htmlFavicon

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

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

includeRobots

(optional, type: boolean, default: false)

By default, the CMS page is not indexed by crawlers. Use this to add a meta tag to invite robots to index the CMS page.

customizeWebpackConfig

(optional, type: function)

Function to customize webpack configuration.

Function parameters:

• config: webpack configuration for StaticCMS
• destructured object from onCreateWebpackConfig { store, stage, pathPrefix, getConfig, rules, loaders, plugins} as seen in https://www.gatsbyjs.com/docs/node-apis/#onCreateWebpackConfig

1plugins: [
2  {
3    resolve: `gatsby-plugin-static-cms`,
4    options: {
5      customizeWebpackConfig: (config, { plugins }) => {
6        const Plugin = require("...")
7
8        config.plugins.push(
9          plugins.define({
10            "process.env.MY_VAR": JSON.stringify("my var value"),
11          })
12        )
13
14        config.plugins.push(new Plugin())
15      },
16    },
17  },
18]

Example

Here is the plugin with example values for all options (note that no option is required):

1plugins: [
2  {
3    resolve: `gatsby-plugin-static-cms`,
4    options: {
5      modulePath: `path/to/custom/script.js`, // default: undefined
6      enableIdentityWidget: true,
7      publicPath: `admin`,
8      htmlTitle: `Content Manager`,
9      htmlFavicon: `path/to/favicon`,
10      includeRobots: false,
11    },
12  },
13]

Disable widget on site

If you're not using Netlify Identity within your site you have the option to completely disable the widget (and not the CMS). To do so, add the following to gatsby-node.js:

1const webpack = require(`webpack`)
2
3exports.onCreateWebpackConfig = ({ actions }) => {
4  actions.setWebpackConfig({
5    plugins: [
6      new webpack.IgnorePlugin({
7        resourceRegExp: /^netlify-identity-widget$/,
8      }),
9    ],
10  })
11}

Support

For help with integrating Static CMS with Gatsby, check out the community Discord.