What is Gatsby?

Gatsby is a React-based, GraphQL powered, static site generator. It uses powerful preconfiguration to build a website that uses only static files for incredibly fast page loads, service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching

Why Netlify CMS?

Netlify CMS it’s an open source content management for your Git workflow. It is built as a single-page React app and it has custom-styled previews, you can add different UI widgets, and editor plugins.

It’s basically a visual platform to edit your content that is generated at build time so it’s is just an extra dependency that lives together with your site (no external hosting).

Pricing

This CMS will be generated when you run your code so everything is free.

Previews

One of my favourite features of this CMS are the the instant previews. You can see a preview of your website as you type the blog post.

https://www.loom.com/share/54cb7109a5e148b5b6d1f71b4a36ed48

Multiple field types

There are multiple easy to configure page types and fields: “boolean, code, date, image file, markdown, select, string” and many more, you can even do relations and there are custom fields that you can install.

How to use it

In this tutorial we’re gonna use gatsby-starter-netlify-cms. This will setup everything we need in order to work with netlify-cms.

Step 1

Open your Terminal and run the following command from the Gatsby CLI to create a new Gatsby site using gatsby-starter-netlify-cms.

gatsby new [your-project-name] https://github.com/netlify-templates/gatsby-starter-netlify-cms

Step 2

Deploy to Netlify

Open github (or any other hosting platform for version control) and push your new Gatsby site’s code.

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/[your-username]/[your-repo-name].git
git push -u origin master

After that open app.netlify.com and choose “New site from Git” and then select your newly created repo.
This video explains it exactly how to do it

Step 3

Once the Gatsby site is finished installing all the packages and dependencies and you deployed the website, you can now go into the directory and run the site locally by using yarn start

Now you can go to http://localhost:8000 to see your new website, Netlify CMS is already installed and you can access it at http://localhost:8000/admin

You’ll probably see this modal, so go ahead and copy the link of the website from Netlify and paste it there.

development setting

Now if this error appears

Git gateway

You need to go on Project Settings > Identity and enable it and then go to Git Gateway and enable that too.

And finally after you do that and refresh the localhost page, this should appear.

form

Go ahead and create an account and then login. After that you should be able to see the dashboard.

Dashboard



Congrats! You just created a blog with Gatsby and Netlify CMS.

Now let’s talk code.

First of all on gatsby-config.js, you can find gatsby-plugin-netlify-cms plugin and it’s using cms.js file to setup Netlify CMS. Here the previews are created and you can also register some other cms options like setting up uploadcare and cloudinary for images.

import CMS from 'netlify-cms-app'
import uploadcare from 'netlify-cms-media-library-uploadcare'
import cloudinary from 'netlify-cms-media-library-cloudinary'

import AboutPagePreview from './preview-templates/AboutPagePreview'
import BlogPostPreview from './preview-templates/BlogPostPreview'
import ProductPagePreview from './preview-templates/ProductPagePreview'
import IndexPagePreview from './preview-templates/IndexPagePreview'

CMS.registerMediaLibrary(uploadcare)
CMS.registerMediaLibrary(cloudinary)

CMS.registerPreviewTemplate('index', IndexPagePreview)
CMS.registerPreviewTemplate('about', AboutPagePreview)
CMS.registerPreviewTemplate('products', ProductPagePreview)
CMS.registerPreviewTemplate('blog', BlogPostPreview)


On the pages folder you’re gonna notice that there are markdown files. When you create or edit something on the dashboard and press Publish a commit will be made and these markdown files will be edited (or created when you add a new blog post).

This GraphQL query will return the selected data from every markdown file.

query

And then it will use the templateKey to create a page with the template and the path from the markdown file.

// about>index.md
---
templateKey: 'about-page'
path: /about
title: About our values
---
### Shade-grown coffee
Coffee is a small tree or shrub that grows in the forest understory in its wild form, and traditionally was grown commercially under other trees that provided shade. The forest-like structure of shade coffee farms provides habitat for a great number of migratory and resident species.

So If this markdown file has ”about-page” as the templateKey it will use about-page.js as the template file

files

And on gatsby-node.js you can find the code for creating pages from the markdown files.

posts.forEach((edge) => {
  const id = edge.node.id;
  createPage({
    path: edge.node.fields.slug,
    tags: edge.node.frontmatter.tags,
    component: path.resolve(
      `src/templates/${String(edge.node.frontmatter.templateKey)}.js`
    ),
    // additional data can be passed via context
    context: {
      id,
    },
  });
});

Now the file where the magic happens… config.yml. Here you can setup the fields that appears on the cms.

For example these are the fields from the Blog collection:

collections:
  - name: "blog"
    label: "Blog"
    folder: "src/pages/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Template Key", name: "templateKey", widget: "hidden", default: "blog-post"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Description", name: "description", widget: "text"}
      - {label: "Featured Post", name: "featuredpost", widget: "boolean"}
      - {label: "Featured Image", name: "featuredimage", widget: image}
      - {label: "Body", name: "body", widget: "markdown"}

And it will generate this:

Blog Post

Now if you want to for example an Subtitle field you can just add:

  - { label: "subTitle", name: "Sub Title", widget: "string" }

And after a refresh the Subtitle field will appear.

subtitle

Conclusion

I hope you enjoyed this tutorial. If you need help with something don’t hesitate to contact me.