The Blog Is Live!
TLDR: This post is a repost of my blog post from my site Serving Niches. If you’ve run into similar problems when tinkering with Gatsby, you can see how I chose to solve them.
https://servingniches.org/posts/2018-02-20___the_blog_is_live/
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.
Issues encountered:
- Issue 1: The forked repo, that this site used as a starting point, needed to be ported to Gatsby V2.
- 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 of 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`),
},
},Issue 2: Images in markdown not being rendered
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 and gatsby-remark-images.
"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
}
}
}
}
`;
Features added:
- Feature 1: A blog section has been added. With the exception of styling, everything else closely follows the information found at the below links.
- 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 - Feature 2: Individual blog posts are generated from markdown.
- 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/
Useful Links
Cover Image Source
Image Source: Flickr