I’m trying to create a blog following the book “Gatsby and Netlify CMS” by Joe Attardi. I ran into an issue where the images are not rendering in the post itself.
Here is an example:
Link to page:
https://mathiascs-gatsby-netlifycms.netlify.app/2021-01-20-second-blog-post/
This is my BlogTemplate file:
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/Layout"
import styles from "./blog.module.css"
export default function BlogTemplate({ data }) {
return (
<Layout>
<div className={styles.blog}>
<h1>{data.markdownRemark.frontmatter.title}</h1>
<div dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }} />
</div>
</Layout>
)
}
export const query = graphql`
query($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
html
frontmatter {
title
}
}
}
`
This is my confic.yml file:
backend:
name: git-gateway
branch: master
media_folder: static/img
public_folder: /img”
collections:
- name: "blog"
label: "Blog"
folder: "src/blog"
create: true
slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
fields:
- label: "Title"
name: "title"
widget: "string"
- label: "Publish Date"
name: "date"
widget: "datetime"
- label: "Body"
name: "body"
widget: "markdown"
Here is my gatsby-config.js file:
module.exports = {
siteMetadata: {
title: "The Coffee Blog",
},
plugins: [
"gatsby-plugin-netlify-cms",
"gatsby-plugin-sharp",
{
resolve: "gatsby-source-filesystem",
options: {
name: "blog",
path: "src/blog",
},
},
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
{
resolve: `gatsby-remark-images`,
options: {
maxWidth: 590,
},
},
],
},
},
],
}
Here is my gatsby-node.js file:
const path = require("path")
const { createFilePath } = require("gatsby-source-filesystem")
exports.onCreateNode = function({ node, getNode, actions }) {
const { createNodeField } = actions
if (node.internal.type === "MarkdownRemark") {
const slug = createFilePath({ node, getNode })
createNodeField({
node,
name: "slug",
value: slug,
})
}
}
exports.createPages = async function({ graphql, actions }) {
const { createPage } = actions
const result = await graphql(`
query {
allMarkdownRemark {
edges {
node {
fields {
slug
}
}
}
}
}
`)
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
createPage({
path: node.fields.slug,
component: path.resolve("./src/templates/blog.js"),
context: {
slug: node.fields.slug,
},
})
})
}
Can you help me figure out what I do wrong?