Gatsby Blog + Netlify CMS Tutorial — Part 1

Gatslify!

Tutorial Preparation

Let's Get Started!

The lovely default Gatsby Application — What is that image o.O

Creating A New Page

Note: This is just a temporary file we will delete in later

import React from "react";
import Layout from "../components/layout";
import SEO from "../components/seo";
const BlogView = () => {
return (
<Layout>
<SEO title="sample" />
This is a new page!
</Layout>
)
}
export default BlogView;
Our first page! Are you not proud ^_^

We must keep this folder clean with just page components, if we want to split our pages into smaller components, we must put them in a folder elsewhere!

Let's Get Rid Of Those Nasty Import Paths

const path = require("path");exports.onCreateWebpackConfig = ({ actions }) => {
actions.setWebpackConfig({
resolve: {
modules: [path.resolve(__dirname, "src"), "node_modules"]
}
})
}
import Layout from "../components/layout";
import SEO from "../components/seo";
import Layout from "components/layout";
import SEO from "components/seo";

Dive into Gatsby GQL

Oh…But we do!

Read more about it HERE

query MyQuery {
allFile {
edges {
node {
name
sourceInstanceName
}
}
}
}
{
"data": {
"allFile": {
"edges": [
{
"node": {
"name": "gatsby-icon",
"sourceInstanceName": "images"
}
},
{
"node": {
"name": "gatsby-astronaut",
"sourceInstanceName": "images"
}
}
]
}
}
}

Fetching Data From Filesystem Sources

{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/images`,
},
},
{
"data": {
"allFile": {
"edges": []
}
}
}
{
resolve: `gatsby-source-filesystem`,
options: {
name: `blogs`,
path: `${__dirname}/content/blog-posts`,
},
},

Creating Our Blog Markdown Files

---
title: Pikachu
description: Pikachu is an Electric-type Pokémon introduced in Generation I.
type: Electric
---
---
title: Bulbasaur
description: Bulbasaur is a dual-type Grass/Poison Pokémon introduced in Generation I.
type: Grass / Poison
---
---
title: Squirtle
description: Squirtle is a Water-type Pokémon introduced in Generation I.
type: Water
---

Using GQL Queries To Fetch Markdown Data

{
"data": {
"allFile": {
"edges": [
{
"node": {
"name": "example-blog-1",
"sourceInstanceName": "blogs"
}
},
{
"node": {
"name": "example-blog-2",
"sourceInstanceName": "blogs"
}
},
{
"node": {
"name": "example-blog-3",
"sourceInstanceName": "blogs"
}
},
{
"node": {
"name": "gatsby-icon",
"sourceInstanceName": "images"
}
},
{
"node": {
"name": "gatsby-astronaut",
"sourceInstanceName": "images"
}
}
]
}
}
}

Accessing Data Within Markdown Files

---
title: Squirtle
description: Squirtle is a Water-type Pokémon introduced in Generation I.
type: Water
---
query MyQuery {
allMarkdownRemark {
edges {
node {
frontmatter {
description
title
type
}
}
}
}
}
{
"data": {
"allMarkdownRemark": {
"edges": [
{
"node": {
"frontmatter": {
"description": "Squirtle is a Water-type Pokémon introduced in Generation I.",
"title": "Squirtle",
"type": "Water"
}
}
},
{
"node": {
"frontmatter": {
"description": "Bulbasaur is a dual-type Grass/Poison Pokémon introduced in Generation I.",
"title": "Bulbasaur",
"type": "Grass / Poison"
}
}
},
{
"node": {
"frontmatter": {
"description": "Pikachu is an Electric-type Pokémon introduced in Generation I.",
"title": "Pikachu",
"type": "Electric"
}
}
}
]
}
}
}

Filtering Markdown Files With GQL Queries

query MyQuery {
markdownRemark(fileAbsolutePath: {regex: "/example-blog-1/"}) {
frontmatter {
description
title
type
}
}
}
{
"data": {
"markdownRemark": {
"frontmatter": {
"description": "Pikachu is an Electric-type Pokémon introduced in Generation I.",
"title": "Pikachu",
"type": "Electric"
}
}
}
}
query MyQuery {
markdownRemark(frontmatter: {title: {eq: "Pikachu"}}) {
frontmatter {
description
title
type
}
}
}
const { createFilePath } = require("gatsby-source-filesystem");exports.onCreateNode = ({ node, getNode, actions }) => {
let parentNode = getNode(node.parent)
if (node.internal.type === "MarkdownRemark") {
if (parentNode.sourceInstanceName === "blogs") {
let slug = createFilePath({ node, getNode })
slug = slug.replace(/\//g, '');
actions.createNodeField({ node, name: "slug", value: slug })
}
}
}

Note: Remember to refresh the GraphiQL page to see changes

query MyQuery {
markdownRemark(fields: {slug: {eq: "example-blog-1"}}) {
frontmatter {
description
title
type
}
}
}

The End

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store