Welcome to the Serving Niches Blog. After a few weeks of tinkering and working through bugs, this GatsbyJS powered blog is finally ready for prime time. All code for this site is open source and can be found here.
Fix: Go through the really good official documentation on porting from Gatsby V1 to V2 here. The Layout functionality had to be moved under the components and are treated just as another component instead a template that is applied to all pages. The layout functionality from Gatsby v1 can be recreated using the plugin "gatsby-plugin-layout".
// File: gatsby-config.js
{
resolve: `gatsby-plugin-layout`,
options: {
component: require.resolve(`${__dirname}/src/components/layouts/index.jsx`),
},
},
Fix: Images in the markdown (.md) files were not being rendered. The problem was twofold.
1. The cover images could not be found.
2. The images in the blog post returned a 404.
The fix involved adding two gatsby plugins
"gatsby-remark-copy-images": "^0.2.1",
"gatsby-remark-images": "^3.0.3",
// File: gatsby-config.js
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
'gatsby-remark-copy-images',
],
},
},
{
resolve: 'gatsby-remark-images',
},
GraphQL should return a publicURL field that will contain the url for the image you're trying to display in your component.
...
cover {
id,
publicURL,
name
},
...
export const query = graphql`
query {
allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
edges {
node {
id
fields {
slug
}
frontmatter {
title
subTitle
cover {
id
publicURL
name
}
categories
date
}
excerpt
headings {
value
depth
}
html
rawMarkdownBody
fileAbsolutePath
}
}
}
}
`;
Official GatsbyJS documentation on creating a blog
https://www.gatsbyjs.org/blog/2017-07-19-creating-a-blog-with-gatsby/
Egghead.io's FREE video series on building a blog with Gatsby
https://egghead.io/courses/build-a-blog-with-react-and-markdown-using-gatsby
Technically, this isn't a separate feature but since the original idea was to have individual posts styled differently, I'm going to leave this on here.
Programmatically create pages from data
https://www.gatsbyjs.org/tutorial/part-seven/
Image Source: Flickr