GatsbyJS: Fun With Collections

Monday, August 26th 2019, 7:00:00 pm

Things are starting to shape up around here. Had an interesting time with the first non-standard thing I wanted to try. I had already set up processing these blog posts similarly to how it is introduced in the Gatsby Tutorial. I then decided that I wanted to be able to do the following:

  • Manage static pages with Markdown files, similar to the blog but:

    • With a different template
    • On a separate, unique slug path (i.e. /pages/title)
  • I also decided that I wanted to go ahead and move my site content outside of the typical /src directory, with the thought that I might eventually move the content into some external place such as Apple Cloud or Dropbox, for editing on multiple devices.

So, I went searching for the proper solution,using the timeless methodology of trial and error. Moving the content into separate directories was easy enough by specifiying two separate gatsby-source-filesystem configurations - one at /content/blog and the other at /content/pages. But, I ran into difficulty in trying to modify the gatsby-node.js code in properly picking these up and handing them to the appropriate place. A couple of fairly involved attempts later, I then discovered gatsby-plugin-collections, which almost exactly met the requirements I had. I only had to perform a minor bit of code shuffling to make my templates follow the default path structure (it appeared possible to override these paths but it didn't appear to read the configuration and complained loudly). Now, with all of that code removed from gatsby-node.js, I have pretty much the exact functionality I was looking for!

Now onto the next fun challenge, actually writing content for those pages!

(Incidentally, I am composing this post in a slick little markdown editor called Typora as I evaluate markdown editors in search of the very best one. I'll let you know what I end up deciding!)