Create a blog with Netlify CMS and Gatsby

If you love the speed and developer experience of the Jamstack, this guide’s for you. We’ll combine the intuitive content editing of Netlify CMS with the React-powered framework, Gatsby, to build a blazing-fast blog. If you’re interested in learning more about Netlify’s CMS, click here for our deep dive.

Prerequisites

• Basic familiarity with JavaScript, React, and Git
• A Node.js installation (https://nodejs.org/)
• A GitHub account
• A Netlify account

Part 1: Project Setup

1. Install Gatsby CLI:
2. Bash
3. npm install -g gatsby-cli
4. Use code with caution.
5. content_copy
6. Create a Gatsby Project:
7. Bash
8. gatsby new my-awesome-blog
9. cd my-awesome-blog

1. Install Netlify CMS Dependencies:
2. Bash
3. npm install netlify-cms-app gatsby-plugin-netlify-cms

Part 2: Netlify CMS Configuration

1. Create a Configuration File (config.yml)
2. Create a file named static/admin/config.yml. Here’s a basic example:
3. YAML
4. backend:
5.   name: git-gateway
6.   branch: main 
7. media_folder: static/img
8. public_folder: /img
9. collections: 
10.   – name: “blog” 
11.     label: “Blog Posts” 
12.     folder: “src/posts” 
13.     create: true  
14.     slug: “{{year}}-{{month}}-{{day}}-{{slug}}” 
15.     fields: 
16.       – { label: “Title”, name: “title”, widget: “string” } 
17.       – { label: “Publish Date”, name: “date”, widget: “datetime” } 
18.       – { label: “Body”, name: “body”, widget: “markdown” } 

1. Important Notes:

• • Customize carefully: Adjust the media_folder, public_folder, collections, and fields to match your desired blog structure.
  • More field types: Netlify CMS supports images, lists, and more: (https://www.netlifycms.org/docs/widgets/)

1. Update gatsby-config.js:
2. JavaScript
3. module.exports = {
4.   // … existing config
5.   plugins: [
6.     // … other plugins,
7.     ‘gatsby-plugin-netlify-cms’
8.   ]
9. }

Part 3: Creating Blog Post Templates

1. Create a Template: Create a file like src/templates/blog-post.js:
2. JavaScript
3. import React from ‘react’
4. import { graphql } from ‘gatsby’
6. const BlogPost = ({ data }) => {
7.   const post = data.markdownRemark
9.   return (
10.     <div>
11.       <h1>{post.frontmatter.title}</h1>
12.       <div dangerouslySetInnerHTML={{ __html: post.html }} />
13.     </div>
14.   )
15. }
17. export const query = graphql`
18.   query($slug: String!) {
19.     markdownRemark(fields: { slug: { eq: $slug } }) {
20.       html
21.       frontmatter {
22.         title
23.         date
24.       }
25.     }
26.   }
27. `

Part 4: Git and Netlify Integration

1. Initialize Git and Push to GitHub:
2. Bash
3. git init
4. git add .
5. git commit -m “Initial commit”
6. # Follow instructions to create a new GitHub repo and push

1. Deploy to Netlify:

• • Connect your GitHub repo to Netlify.
  • Set the build command to gatsby build

Part 5: Accessing the CMS and Writing

1. Access the CMS: Your CMS will be at https://your-site-url.netlify.app/admin/
2. Authenticate: Log in with your GitHub credentials.
3. Start Blogging: Click “New Blog Posts” and get writing!