This was originally published on Medium on September 16, 2018.

Now that I've had some additional time to experiment with v2 of the GatsbyJS starter blog, I realized that there was one aspect that I absolutely had to change. You probably asking yourself, what pray tell was that burning update that he had to make? In the end I think that it's a surprisingly simple change that will have big returns for me. It's... the blog post folder naming structure.

Now before you head off into the sunset to find another post or article that you find more interesting, give me a chance to explain why first. The base starter blog allows you to create posts that will have URLs matching the names of your folders. This is a great feature and extremely useful to get you up, running, and blogging quickly. However, as you become a more prolific author, you're going to have a src/pages folder filled with folders that are named after blog post titles.

At this point you're probably saying "I still don't see what the issue is here..." Don't worry I'm practically at the end of the explanation. As a savvy person you know that the smart thing to do is to add some sort of date or timestamp to your folder names. That's brilliant! Now we get to the issue that I found, which is what happens if you don't want the date you've added in your URL?

This is where I found myself after I changed the folder naming structure to MMDDYY--put-your-title-here and I didn't want my url to look like /091218--change-blog-post-folder-name-structure-in-gatsbyjs-starter-blog. Instead I just wanted to remove the date and the two trailing dashes that act as an easy to find divider for the date and title.

After a bit of reading, some experimentation, and a few false starts, I finally came up with a simple solution!

// In your gatsby-node.js
exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    // This removes the MMDDYY-- from the front of each directory, that
    // way a post name is just the remainder of the directory name,
    // which in my case happens to be the blog post title
    const value = createFilePath({ node, getNode }).replace(/\d{6}--/, '')
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

Now whenever a node is created and it has a type of MarkdownRemark, we will add a new field on the node with a name of 'slug'. The value for this will be the file path of the markdown file, but instead of keeping the entire path that's returned, e.g. /091218--change-blog-post-folder-name-structure-in-gatsbyjs-starter-blog, instead we'll use this simple regex, .replace(/\d{6}--/, ''), to remove the MMDDYY-- from the file path. Now instead of the URL that was returned by createFilePath now it's /change-blog-post-folder-name-structure-in-gatsbyjs-starter-blog!

You can find the code for this change in this GitHub repository.

Thanks for sticking around until the end! While this isn't the most earth shattering problem to solve, it enables both you and I to more easily customize the GatsbyJS starter blog to behave as we want :)

If you found this useful follow me on Medium or leave some applause there. I'll be continuing to explore various front-end, such as GatsbyJS and React, as well as software engineering related topics there. Thanks for reading!