Create a blog with Netlify CMS and Gatsby | Code Boost
Description: 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, G...

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!