How To Generate A Slug In Gatsby.JS

Akiko Green
Apr 19 · 4 min read
image of a slug — Bay Nature

You read the title right! In this article, we will be talking about slugs and how to generate a slug for a post in a blog component using Gatsby.js.

What Is A Slug?

By programming definition, a Slug is a unique identifier of a web address, usually seen at the end of a URL. It may also be the final component when a new document is created under a parent document; for example, this page’s slug is MDN(https://developer.mozilla.org/en-US/docs/Glossary/Slug).

Why Use A Slug?

Good question! You would want to use a slug when you want to optimize your search engine URL. The Search Engine Optimization, also known as SEO, benefits to using a slug is that you can change to highly ranked words that you want users to see.

A slug URL can also be user-friendly. As a user, when you are searching for specific information, you are more than likely to click on a URL link that has “google.com/friendly-slug”. However, if you saw URL’s with “google.com/P=832748”, you would not be inclined to clicking that link because it may not be the specific information you are looking for.

slug gif

How To Generate A Slug For A Post

To get started, you’ll first want to create a file in your root directory called gatsby-node.js. This is where you will create your slug.

screenshot of file / folder directories

Now, head over to the Gatsby.js website. The section we are looking for is onCreateNode, we will be using this to create a node. For plugins that want to extend or transform nodes created by other plugins should implement this API. So what we are allowed to do with this plugin is, whenever a new markdown node is created, all we will do is attach the slug field onto it.

screenshot of code

In the console.log(), I want to show you multiple objects that will print in the terminal. The objects we will focus on is the data with a key of “internalComponentName”, and its data inside that contains “internal”, which is also an object containing our valuable piece of information where the node we want to target have a type of MarkDownRemark

screenshot of a terminal with gatsby node object containing data

With this piece of information, what we want to do is, take the nodes with a MarkDownRemark type, reduce it into a slug, and add the new field to the node so that it is easily accessible. Once we have targetted these specific nodes, we then want to grab the fileAbsolutePath, remove the path, except for the file, remove the “.md” extension leaving us with just the slug.

screenshot of code

Inside the if statement, I am taking the node module path, using its method basename(), we have the ability to manipulate our absolute path where we only return that last portion of a path

Example

Lastly, we will call createNodeField(), with 3 properties: the node, the name for our new field, and the value for our slug.

screenshot of code
picture of URL with specific slug

There you have it! W have created our first slug! If you want to test out this code to see the slug data, graphQL has a playground we can check out our node data.

screenshot of graphQL node data

References

A huge help in writing this blog goes to the Youtube channel “Gatsby JS — The Great Gatsby Bootcamp [Full Tutorial]”, I am currently learning how to create a blog/profile page in gatsby using this resource. Andrew’s explanations on how to create a slug are clear and concise.

How to install the graphQL playground in gatsby:

Not sure what a node is referring to? Check out this site to learn more about what a node is →

Documentation on how to generate a slug in gatsby.js, if you’d like to read more about it →

More information on slugs →

Nerd For Tech

From Confusion to Clarification

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Akiko Green

Written by

Software Engineer

Nerd For Tech

NFT is an Educational Media House. Our mission is to bring the invaluable knowledge and experiences of experts from all over the world to the novice. To stay up to date on other topics, follow us on LinkedIn. https://www.linkedin.com/company/nerdfortech

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store