Adam Laycock

AboutProjectsContact

Featured Posts

Moving to Gatsby

4th December 2018

Ive moved my site over to Gatsby!

Everything an Option in the Theme

18th August 2016

My aproach to WordPress theme development.

RADIUS With Windows Server 2012R2

22nd July 2016

RADIUS authentication for wireless networks using NAP in Windows Server 2012R2.

Netlify CMS on the filesystem with Gatsby

19th January 2019

  • Netlify
  • Gatsby

I was looking at Netlify CMS for a website I was building and I wanted to test it before I put code to repo. Unfortunatley by default Netlify CMS will only let you use git as a backend which is great once the site is launched but when I want to test the CMS or dratically change the config the only way to test it would be to commit code that should work and then hope. This leaves a bad taste in my mouth, if code is hitting the repo it should pass tests so comitting something that on paper should work doesn’t feel right to me.

Netlify CMS edits the source files directly normally by commiting to the git repo. I needed a way of making changes to the local file system directly.

Before making changes to the config I needed to install gatsby-plugin-netlify-cms which adds everything you need to get going with Netlify CMS and Gatsby and created static/admin/config.yml.

The important part of the file for this article is the backend which for me is:

backend:
  name: github
  repo: Arcath/...

FS Backend

Enter netlify-cms-backend-fs.

Update 25/2/19 netlify-cms-backend-fs is in beta and there may/will be breaking changes eventually.

To get this working in Gatsby I needed to make a couple of edits to my gatsby-config.js to load the fs-api and configure gatsby-plugin-netlify-cms so that it uses the fs backend.

First off the entry in the plugins array needs changing to this:

{
  resolve: `gatsby-plugin-netlify-cms`,
  options: {
    modulePath: `${__dirname}/src/cms/init.js`, // Or another path if you don't want to create /src/cms/init.js
    enableIdentityWidget: false,
    publicPath: 'admin',
    htmlTitle: 'Content Manager',
    manualInit: true,
  },
}

After that I needed to require the file system api from the backend.

let fsApi = require('netlify-cms-backend-fs/dist/fs/fs-express-api')

The Gatsby config needs the middleware loading which can be done by adding developMiddleware: fsApi to the config object.

To use it in development I added a development_overrides key to my config.yml:

development_overrides:
  backend:
    name: file-system
    api_root: 'http://localhost:8000/api'

Now I have all the config in place I just need to tie it all together with src/cms/init.js

import CMS, { init } from 'netlify-cms'
import {FileSystemBackend} from 'netlify-cms-backend-fs'

// If running in development
if(process.env.NODE_ENV === 'development') {
  window.CMS_ENV = 'development_overrides' // Set the CMS_ENV to the development_ overrides.
  CMS.registerBackend('file-system', FileSystemBackend) // Register the FileSystemBackend.
}

// Start NetlifyCMS
init()

This has worked really well for me letting me test and use Netlify CMS on my local machine.

Syndication

Dev.to

Other Posts

Robocopy, the best copying tool you already have.

8th December 2018

If you want more control and better performance robocopy is the way to go.

Snow Crash

22nd January 2019

    Adam Laycock
    TwitterGitHubDev.toInstagramYouTube
    Recent Articles
    Disclaimer

    All content is my own unless otherwise stated.

    My content is licensed under the CC-BY-NC-SA 4.0 license

    cc by-nc-sa