How to create a free cms with Netlify CMS and Gatsby


  1. You should have a Github Page. Follow the steps of creating a Gatsby/Github page from here:
  2. Netlify account. Make an account in Netlify:


Click New site from Git

Choose Github

NOTE: Your development files, not the built static files, should be in your master branch.

Your build deploy settings should be like this:

Run: npm install --save netlify-cms gatsby-plugin-netlify-cms

In your gatsby-config.js, add this:

module.exports = {

   plugins: [`gatsby-plugin-netlify-cms`],


Create this file: static/admin/config.yml

If you don't have a /static/admin folder yet, create it.

Add this:

  name: github
  repo: your-username/your-repo-name

  media_folder: static/assets
  public_folder: assets

   - name: blog
     label: Blog
     folder: blog
     create: true
      - { name: path, label: Path }
      - { name: date, label: Date, widget: date }
      - { name: title, label: Title }
      - { name: body, label: Body, widget: markdown }

You can checkout the admin control panel by running npm run develop then go to localhost:8000/admin/ The trailing slash is required and important.

Blog Folder Structure

Your blog should be in ${__dirname}/blog

Edit your gatsby-source-filesystem plugin in gatsby-config.js like this:

        resolve: `gatsby-source-filesystem`,
        options: {
            name: `src`,
            path: `${__dirname}/blog/`,


Push your commits to master. Go to Deploys tab in You will see your build status there.


Follow this to authenticate your github account in the CMS:

Once it is all set up, go to your site `` and blog away!