{"id":19606340,"url":"https://github.com/staticjscms/gatsby-plugin-static-cms","last_synced_at":"2025-04-27T19:33:02.307Z","repository":{"id":62369244,"uuid":"560037408","full_name":"StaticJsCMS/gatsby-plugin-static-cms","owner":"StaticJsCMS","description":null,"archived":true,"fork":false,"pushed_at":"2024-08-29T11:33:27.000Z","size":393,"stargazers_count":0,"open_issues_count":12,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-21T14:34:31.578Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StaticJsCMS.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["StaticJsCMS"],"open_collective":"staticjscms"}},"created_at":"2022-10-31T15:56:32.000Z","updated_at":"2024-09-09T14:56:58.000Z","dependencies_parsed_at":"2023-09-28T16:36:25.186Z","dependency_job_id":"4c77952a-769c-4e62-8a1d-57f3445b65d7","html_url":"https://github.com/StaticJsCMS/gatsby-plugin-static-cms","commit_stats":{"total_commits":45,"total_committers":2,"mean_commits":22.5,"dds":0.4,"last_synced_commit":"c05f4fd1761c196ce9c22ce72ec2e30be3d34658"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StaticJsCMS%2Fgatsby-plugin-static-cms","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StaticJsCMS%2Fgatsby-plugin-static-cms/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StaticJsCMS%2Fgatsby-plugin-static-cms/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StaticJsCMS%2Fgatsby-plugin-static-cms/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StaticJsCMS","download_url":"https://codeload.github.com/StaticJsCMS/gatsby-plugin-static-cms/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251196405,"owners_count":21550947,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T10:04:46.084Z","updated_at":"2025-04-27T19:33:02.017Z","avatar_url":"https://github.com/StaticJsCMS.png","language":"JavaScript","funding_links":["https://github.com/sponsors/StaticJsCMS","https://opencollective.com/staticjscms"],"categories":[],"sub_categories":[],"readme":"# gatsby-plugin-static-cms\r\n\r\n## Overview\r\n\r\nAutomatically generates an `admin/index.html` with a default Static CMS implementation.\r\n\r\nStatic CMS is a React single page app for editing git based content via API.\r\nIts built for non-technical and technical editors alike, and its super easy to\r\ninstall and configure. For more details, check out the [docs\r\nsite](https://staticjscms.netlify.app).\r\n\r\n## Install\r\n\r\n```shell\r\nnpm install @staticcms/app gatsby-plugin-static-cms\r\n```\r\n\r\n## How to use\r\n\r\nAdd the Static CMS plugin in your `gatsby-config.js`:\r\n\r\n```javascript\r\nplugins: [`gatsby-plugin-static-cms`]\r\n```\r\n\r\nThen add your Static CMS [configuration\r\nfile](https://staticjscms.netlify.app/docs/add-to-your-site-cdn#configuration) in\r\n`static/admin/config.yml`.\r\n\r\n## Options\r\n\r\nStatic CMS can be configured via the plugin options below. You can learn\r\nabout how to pass options to plugins in the [Gatsby\r\ndocs](https://www.gatsbyjs.com/docs/plugins/#how-to-use-gatsby-plugins).\r\n\r\n### `modulePath`\r\n\r\n(_optional_, type: `string | Array\u003cstring\u003e`, default: `undefined`)\r\n\r\nIf you need to customize Static CMS, e.g. registering [custom\r\nwidgets](https://staticjscms.netlify.app/docs/custom-widgets/#registerwidget) or\r\nstyling the [preview\r\npane](https://staticjscms.netlify.app/docs/customization/#registerpreviewstyle),\r\nyou'll need to do so in a JavaScript module and provide Gatsby with the path to\r\nyour module via the `modulePath` option. Any styles imported by this module (or\r\nby the modules that it imports, all the way down the chain) are automatically\r\napplied to the editor preview pane by the plugin.\r\n\r\n```javascript\r\nplugins: [\r\n  {\r\n    resolve: `gatsby-plugin-static-cms`,\r\n    options: {\r\n      /**\r\n       * One convention is to place your Static CMS customization code in a\r\n       * `src/cms` directory.\r\n       */\r\n      modulePath: `${__dirname}/src/cms/cms.js`,\r\n    },\r\n  },\r\n]\r\n```\r\n\r\nThe js module might look like this:\r\n\r\n```javascript\r\n/**\r\n * The default export of `@staticcms/app` is an object with all of the Static CMS\r\n * extension registration methods, such as `registerWidget` and\r\n * `registerPreviewTemplate`.\r\n */\r\nimport CMS from \"@staticcms/app\"\r\n\r\nimport '@staticcms/app/dist/main.css';\r\n\r\n/**\r\n * Any imported styles should be automatically be applied to the editor preview\r\n * pane thus eliminating the need to use `registerPreviewStyle` for imported\r\n * styles. However if you are experiencing build errors regarding importing css,\r\n * sass or scss into a cms module when deploying to the netlify platform, you\r\n * may need to follow the implementation found in netlify documentation here:\r\n * https://staticjscms.netlify.app/docs/beta-features/#raw-css-in-registerpreviewstyle\r\n * All of the example imports below would result in styles being applied to the\r\n * preview pane.\r\n */\r\nimport \"module-that-imports-styles.js\"\r\nimport \"styles.scss\"\r\nimport \"../other-styles.css\"\r\n\r\n/**\r\n * Let's say you've created widget and preview components for a custom image\r\n * gallery widget in separate files:\r\n */\r\nimport ImageGalleryWidget from \"./image-gallery-widget.js\"\r\nimport ImageGalleryPreview from \"./image-gallery-preview.js\"\r\n\r\n/**\r\n * Register the imported widget:\r\n */\r\nCMS.registerWidget(`image-gallery`, ImageGalleryWidget, ImageGalleryPreview)\r\n```\r\n\r\n### `manualInit`\r\n\r\n(_optional_, type: `boolean`, default: `false`)\r\n\r\nSet this to `true` If you need to [manually initialize](https://staticjscms.netlify.app/docs/beta-features/#manual-initialization) Static CMS. The plugin will take care of setting `window.CMS_MANUAL_INIT` to `true`:\r\n\r\n```javascript\r\nplugins: [\r\n  {\r\n    resolve: `gatsby-plugin-static-cms`,\r\n    options: {\r\n      manualInit: true,\r\n    },\r\n  },\r\n]\r\n```\r\n\r\nThe js module might look like this:\r\n\r\n```javascript\r\nimport CMS from \"@staticcms/app\"\r\n\r\nimport '@staticcms/app/dist/main.css';\r\n\r\n/**\r\n * Optionally pass in a config object. This object will be merged into `config.yml` if it exists\r\n */\r\n\r\nCMS.init({\r\n  config: {\r\n    backend: {\r\n      name: \"git-gateway\",\r\n    },\r\n  },\r\n})\r\n```\r\n\r\n### `enableIdentityWidget`\r\n\r\n(_optional_, type: `boolean`, default: `true`)\r\n\r\n`enableIdentityWidget` is `true` by default, allowing [Netlify\r\nIdentity](https://www.netlify.com/docs/identity/) to be used without\r\nconfiguration. Disable it when not using Netlify Identity to reduce bundle size.\r\n\r\n```javascript\r\nplugins: [\r\n  {\r\n    resolve: `gatsby-plugin-static-cms`,\r\n    options: {\r\n      enableIdentityWidget: true,\r\n    },\r\n  },\r\n]\r\n```\r\n\r\n### `publicPath`\r\n\r\n(_optional_, type: `string`, default: `\"admin\"`)\r\n\r\nCustomize the path to Static CMS on your Gatsby site.\r\n\r\n### `htmlTitle`\r\n\r\n(_optional_, type: `string`, default: `Content Manager`)\r\n\r\nCustomize the value of the `title` tag in your CMS HTML (shows in the browser\r\nbar).\r\n\r\n### `htmlFavicon`\r\n\r\n(_optional_, type: `string`, default: `\"\"`)\r\n\r\nCustomize the value of the `favicon` tag in your CMS HTML (shows in the browser\r\nbar).\r\n\r\n### `includeRobots`\r\n\r\n(_optional_, type: `boolean`, default: `false`)\r\n\r\nBy default, the CMS page is not indexed by crawlers. Use this to add a `meta` tag to invite robots to index the CMS page.\r\n\r\n### `customizeWebpackConfig`\r\n\r\n(_optional_, type: `function`)\r\n\r\nFunction to customize webpack configuration.\r\n\r\nFunction parameters:\r\n\r\n- config: webpack configuration for StaticCMS\r\n- destructured object from onCreateWebpackConfig { store, stage, pathPrefix, getConfig, rules, loaders, plugins} as seen in https://www.gatsbyjs.com/docs/node-apis/#onCreateWebpackConfig\r\n\r\n```javascript\r\nplugins: [\r\n  {\r\n    resolve: `gatsby-plugin-static-cms`,\r\n    options: {\r\n      customizeWebpackConfig: (config, { plugins }) =\u003e {\r\n        const Plugin = require(\"...\")\r\n\r\n        config.plugins.push(\r\n          plugins.define({\r\n            \"process.env.MY_VAR\": JSON.stringify(\"my var value\"),\r\n          })\r\n        )\r\n\r\n        config.plugins.push(new Plugin())\r\n      },\r\n    },\r\n  },\r\n]\r\n```\r\n\r\n## Example\r\n\r\nHere is the plugin with example values for all options (note that no option is\r\nrequired):\r\n\r\n```javascript\r\nplugins: [\r\n  {\r\n    resolve: `gatsby-plugin-static-cms`,\r\n    options: {\r\n      modulePath: `path/to/custom/script.js`, // default: undefined\r\n      enableIdentityWidget: true,\r\n      publicPath: `admin`,\r\n      htmlTitle: `Content Manager`,\r\n      htmlFavicon: `path/to/favicon`,\r\n      includeRobots: false,\r\n    },\r\n  },\r\n]\r\n```\r\n\r\n## Disable widget on site\r\n\r\nIf 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`:\r\n\r\n```javascript\r\nconst webpack = require(`webpack`)\r\n\r\nexports.onCreateWebpackConfig = ({ actions }) =\u003e {\r\n  actions.setWebpackConfig({\r\n    plugins: [\r\n      new webpack.IgnorePlugin({\r\n        resourceRegExp: /^netlify-identity-widget$/,\r\n      }),\r\n    ],\r\n  })\r\n}\r\n```\r\n\r\n## Support\r\n\r\nFor help with integrating Static CMS with Gatsby, check out the community [Discord](https://discord.com/invite/ZWJM9pBMjj).\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstaticjscms%2Fgatsby-plugin-static-cms","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstaticjscms%2Fgatsby-plugin-static-cms","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstaticjscms%2Fgatsby-plugin-static-cms/lists"}