serving niches logo

serving niches logo

The Blog Is Live!


cover-image

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


  • 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