Some Notes on Building Blogs with Gridsome

I’m doing some research for an upcoming presentation on Gridsome (An Introduction to Gridsome on January 22) and ran into an issue understanding how one particular feature works that is of particular interest to folks building blogs with Gridsome.

tl;dr

The frontmatter of your Markdown files become part of your GraphQL schema. You must use date as a field if you want URLs (paths) based on a date property. You will get additional properties (like excerpt) automatically.

Gridsome supports a filesystem plugin that let you point at a folder of files and automatically import them for use within your site. This is first shown in the docs for Import with source plugins. The specific code example show is this:

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'docs/**/*.md',
        typeName: 'DocPage'
      }
    }
  ]
}

That’s fairly straight forward. Point to a path, give it a type name that will be used for the GraphQL server and you’re good to go. You need a bit more information though, and you can then checkout the docs for source-filesystem. This page brings up an important detail - that in order to use the filesystem a transformer must be used to parse your files. For Markdown, you are asked to install @gridsome/transformer-remark.

So far so good, but let’s look at the sample code used in the plugin doc:

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        typeName: 'BlogPost',
        path: './content/blog/**/*.md',
      }
    }
  ],
  templates: {
    BlogPost: '/blog/:year/:month/:day/:slug'
  }
}

One important detail different is that this example shows that you need a template to handle displaying the blog posts. Templates are how Gridsome transform collections of data into pages. Personally I don’t like the name as templates make me think of layouts, but that’s just me. ;)

Ok…. so here’s where I began to have issues. If you look at the template defintion above, you’ll see this value: /blog/:year/:month/:day/:slug. While I admit I didn’t read every single line of Gridsome documentation, I wasn’t sure where slug, year, month, and day came from.

To make matters worse, when I tested, I used one Markdown file that looked like this:

Hi I'm *markdown*!

That’s a valid example, but it was missing a crucial part, frontmatter.

So while it’s mostly obvious, I guess, that a blog using Markdown files will use frontmatter, it wasn’t necessarily called out how important this was.

Gridsome, the filesystem plugin, and the transformer plugin beneath that, will make use of your frontmatter in multiple ways.

First, all the unique values of your frontmatter will be made available in the GraphQL collection. What do I mean by that? Imagine your blog has two files:

```
title: Blog one
cat: I like cats
```

And…

```
title: Blog one
dog: I like cats too
```

The resultant GraphQL schema type will include: title, cat, and dog properties. But that’s not all - I’ll get back to the full schema later in the post.

Alright, so what about :slug? A slug generally refers to taking a string and making URL safe (and lower case), so something like “Ray’s Happy World” turns into “rays-happy-world”. When I used :slug in my testing, I got this error:

Ok… so… I guess if my frontmatter included slug then I’d be fine, but for now I simply switched to using :title and it used that value from my frontmatter.

Alright, so what about :year/:month/:day? In my testing this only worked if your frontmatter uses a value called date and it follows the UTC date format, then it will be picked up and parsed automatically. So like so:

---
title: Goo
date: 2020-01-05
---

This is goo

This will output a URL path like so, /2020/01/05. I didn’t find this till this morning, but it is documented on the templates page.

Unfortunately I can’t see anyway to change this behavior if you use another field for your date. To be clear, if you use another date field, like edited: 2020-01-10 then Gridsome (and the relevant plugins) will recognize it as a date and make it available as a date type in GraphQL, but I don’t believe you can use it in the template path. Wait, I lie. It absolutely can be if you write a custom path function. Here’s how the templates doc demonstrate that:

// gridsome.config.js
module.exports = {
  templates: {
    Post: [
      {
        path: (node) => {
          return `/product/${node.slug}/reviews`
        }
      }
    ]
  }
}

So in my case I could use values from node.edited.

Finally, if for some reason you don’t specify a date field in your frontmatter, the output will include “Invalid date” in the path: http://localhost:8080/blog/Invalid%20date/Invalid%20date/Invalid%20date/ray-rules/ So don’t do that. ;)

Ok… there’s more. When Gridsome (and the relevant plugins again) parse your frontmatter, you get a lot of fields in your collection. For a test, I used three Markdown files with frontmatter like this:

---
title: dude
date: 2020-01-05
cover_image: goo.jpg
tags: php, perl
---

This generated this GraphQL schema:

type BlogPost implements Node {
  id: ID!
  path(to: String = "default"): String
  fileInfo: BlogPost_FileInfo
  content: String
  excerpt: String
  title: String
  date(
    format: String
    locale: String
  ): Date
  cover_image: String
  tags: String
  headings(
    depth: RemarkHeadingLevels
    stripTags: Boolean = true
  ): [RemarkHeading]
  timeToRead(speed: Int = 230): Int
  belongsTo(
    sortBy: String = "date"
    order: SortOrder = DESC
    perPage: Int
    skip: Int = 0
    limit: Int
    page: Int
    sort: [SortArgument!]
    filter: BelongsToFilterInput
  ): NodeBelongsTo
}

There’s a lot there to note. For example, excerpt is useful for sure and timeToRead is nice. I’m guessing these come from the transformer, but I’m not sure where this is documented. excerpt is documented, I believe, way down in the gray-matter code which is a couple chains down from the top plugin, but I really wish this was closer to the “main” Gridsome docs if that makes sense. headings seems to come from the fact that the transformer plugin supports automatically creating anchors for your headings in Markdown. I mean I assume that’s why. I like the automatic anchors. Not sure when I’d use it in GraphQL query. (Oh, I know how - for maybe making a table of contents for a long documentation page.)

You’ll notice that my tags ended up as a string. The source-filesystem plugin supports a refs feature that lets you fix that:

module.exports = {
  plugins: [
    {
      use: '@gridsome/source-filesystem',
      options: {
        refs: {
          // Create a Tag content type and its nodes automatically.
          tags: {
            typeName: 'Tag',
            create: true
          }
        }
      }
    }
  ]
}

I ran into one more issue though. It treated my multitag value “php, perl” as a string. When I rewrote it like so, tags: ["php","perl"] it worked. I also saw this represented in the GraphQL schema:

tags(
    sortBy: String
    order: SortOrder = DESC
    skip: Int = 0
    sort: [SortArgument]
    limit: Int
  ): [Tag]

Finally, and I think I’m really done now, sometimes it took a server restart for Gridsome to notice and update the GraphQL schema. As a specific example, when I was testing getting tags to work as an array I had to restart with every change. I hope this helps!

Header photo by Patrick Hendry on Unsplash

Comments

[Drew Town]

The documentation for markdown is missing which could really clarify a lot of the issues you ran into with the Frontmatter.

I was wondering why I didn't run into these issues when I started my blog. I realized it was because I used NetlifyCMS right from the start which steered me in the right direction. Definitely some minefields to avoid as you discovered until the documentation gets fully fleshed out.

[Raymond Camden]

Thanks for the validation that I'm not crazy. Well, about this anyway. ;)