How to build a Gatsby blog site with Netlify CMS

Prerequisites: Before we start you should have a github account and a basic understanding of react.

Lets start step-by-step:

Install Node.js and npm

Check the node version using the command, node --version and npm --version in your terminal.

If it’s not installed, see the Node.jshttps://nodejs.org/en/ docs.

Install Gatsby CLI

The Gatsby CLI tool is a published npm package that helps with creating new Gatsby-powered sites and running commands that are used for developing Gatsby sites.

The Gatsby CLI is available via npm and should be installed globally by running npm install -g gatsby-cli.

Create Gatsby site

Open your Terminal and run the following command in the Gatsby CLI to create a new Gatsby site using any one of the gatsby starter libraries. I personally used both Gatsby starter bloghttps://github.com/gatsbyjs/gatsby-starter-blog and thomas’s Gatsby personal starter blog for blog in/blog page.

So, the code is: gatsby new [your-project-name] [github link of starter blog]

For example:

gatsby new myblog https://github.com/gatsbyjs/gatsby-starter-blog

Once the Gatsby site installs all the packages and dependencies, go into the directory and run the site locally.

cd myblog/
gatsby develop

If you get an error in the first code or in gatsby develop, I explain how to debug at end of this blog.

You can now go to localhost:8000 to see your new site, where Netlify CMS is pre-installed, or you can access it at localhost:8000/admin if you have used gatsby-personal-starter-blog.

A CMS, or content management system, is useful because you can add content (like blog posts) with a dashboard on your site instead of with markdown. In order to access the CMS from a deployed website, you’ll need to deploy Netlify through GitHub, set up continuous deployment, and do a few configurations.

Open the project in your code editor and open static/admin/config.yml. Replace your-username/your-repo-name with your GitHub username and project name.

Open the project in your code editor(preferably VScode) and open static/admin/config.yml. Replace your-username/your-repo-name with your GitHub username and project name. This step comes handy when using Netlify CMS.

backend:

-name:test-repo

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

Customize your code according to your needs. You can add your info in bio.js, open github.com, create a new repository (with the same name as your project), and push to github repo.

Netlify

Open app.netlify.comhttps://app.netlify.com and add a New site from Git. Choose your newly created repo and click on Deploy site with the default deployment settings.

To make sure that Netlify CMS has access to your GitHub repo, you need to set up an OAuth application on GitHub. The instructions are available. Now, you can stop saving client id and secret, the rest is already done.

Congrats! Now that Netlify CMS is successfully configured to your project, every time you add a new post, the content will be stored in your repository and versioned on GitHub (because Netlify CMS is Git-based). Also, thanks to Netlify’s Continuous Deploymenthttps://docs.netlify.com/configure-builds/get-started/, a new version will be deployed every time you add or edit a post.

Congrats!! You’re done.

Common problems

1. There may be a problem with libvips so there is a chance you may get error(I got this one in fedora).

For this, delete /Users/[your-username]/.npm/_libvips/[some .tar.gz]file. After deleting that .tar.gz file, run npm install, now it should work.