Serving Niches

The Blog Is Live!

February 20, 2018

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.

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": "^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:

Useful Links

Cover Image Source

Image Source: Flickr