Article

Create a blog with Netlify CMS and Gatsby

By Matt · Mar 25, 2024

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!