Gridsome - Multiple Instances of the Source Filesystem Plugin

In my last post, I mentioned the transition to Gridsome and it has been relatively pain free. I owe a lot of this to the existing community and the great list of starter resources. If a concept isn't explained or clear in the docs, chances are you can gain some insight from the various starters.

One particular concept I had a problem with right out of the gate was how to use markdown files from multiple directories. I started with the post type to handle /year/month/day/title routes but I wanted to move to an equivalent of the generic page type from Hexo. In doing research to the search terms I could've used months ago, I stumbled on multiple issues that point out how to do it.

In the file gridsome.config.js, I use the following snippet in the plugins section:

{
  use: '@gridsome/source-filesystem',
  options: {
    path: 'blog/articles/**/*.md',
    typeName: 'Article',
    refs: {
      authors: {
        typeName: 'Author',
        create: true
      },
    }
  }
},
{
  use: '@gridsome/source-filesystem',
  options: {
    path: 'blog/posts/**/*.md',
    typeName: 'Post',
    refs: {
      authors: {
        typeName: 'Author',
        create: true
      },
      categories: {
        typeName: 'Category',
        create: true
      },
      tags: {
        typeName: 'Tag',
        create: true
      },
    }
  }
},

Since Gridsome has a concept of pages already, I chose the word article to represent them instead. As an example, the portfolio page is an article type while this page represents a post type. While hindsight makes this seem intuitive now, I somehow had the impression that you were only allowed one plugin type for safety reasons.

To point out something else, the portfolio page highlights a technique I didn't think was possible at the time. The parent portfolio page is an article type but all the subsequent child pages are markdown files in a separate portfolio directory as a portfolio type. In the plugins section of gridsome.config.js:

{
  use: '@gridsome/source-filesystem',
  options: {
    path: 'blog/portfolio/**/*.md',
    typeName: 'Portfolio',
    refs: {
      authors: {
        typeName: 'Author',
        create: true
      },
    }
  }
},

Coming from Hexo, I opt for placing content in markdown files and having unique layouts defined in the various pages and templates files. As much as Gridsome is a generic website framework, I find that it can be extremely flexible to whatever workflow you wish to create. There are some parts of Hexo I miss like scaffolding new page types or steering me into blog concepts but the transition to Gridsome has been rather smooth. While Gridsome may not be for everyone, I can definitely see how JAMstack has gained traction recently. Barring very few gotchas, working on this site is fun again even in the I-can-see-every-blemish state it's currently in.