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
Glossary/Slug. — 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.
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.
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.
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
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.
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
// Returns: 'quux.html'
// Returns: 'quux'
Lastly, we will call createNodeField(), with 3 properties: the node, the name for our new field, and the value for our 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.
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:
Using the GraphQL Playground
This page will introduce you to an alternative to the current IDE for your GraphQL queries: GraphQL Playground. GraphQL…
Not sure what a node is referring to? Check out this site to learn more about what a node is →
Any system or device connected to a network is also called a node. For example, if a network connects a file server…
Documentation on how to generate a slug in gatsby.js, if you’d like to read more about it →
Programmatically Creating Pages
Sometimes you want to be able to programmatically access data from files in src/pages/ or create pages using MDX…
More information on slugs →