theRDnotes

2020 February 12th

Part4: Site configuration

Gatsby site can be configured with the file gatsby-config.js

Create the file in the project's root folder.

touch gatsby-config.js

Options

Gatsby provides various options to configure the site, but for this post, we'll use the following options.

  • Plugins
  • siteMetadata

Plugins

Plugins are Node.js packages that implement Gatsby APIs.

The config file gatsby-config.js accepts an array of plugins. Some plugins may need only to be listed by name, while others may take options (see the docs for individual plugins).

We'll use the following plugins:

Install them using below commands:

npm install gatsby-source-filesystem gatsby-transformer-remark

siteMetadata

Data that you want to share across the site(e.g.: site title) can be stored in siteMetadata.

Example:

siteMetadata: {
    title: 'theRDnotes',
    siteUrl: 'https://www.theRDnotes.com',
    description: 'my personal tech notebook... wip...'
  }

Configuration

Keeping the above-written notes in mind.
Let's configure our site.

And the file gatsby-config.js should have the following content

const siteMetadata = {
    title: `theRDnotes`,
    description: `my personal tech notebook... wip...`,
};

module.exports = {
    siteMetadata: siteMetadata,
    plugins: [
        `gatsby-transformer-remark`,
        {
            resolve: `gatsby-source-filesystem`,
            options: {
                path: `${__dirname}/notes`,
                name: `notes`,
            },
        }
    ],
};

Slug

theory

A Slug is a part of the URL that uniquely identifies a page on your website.

Example:
In www.example.com/hello-world URL, hello-world is the slug

Tip: Slugs should be easy to read for humans and search engines.

In our blog, pages are in the form of markdown files. So we need a logic to create slugs dynamically from markdown files.

Action items:

  • Create slugs from markdown files
  • Store them somewhere to be read later.

Thankfully gatsby-source-filesystem plugin has a function to do the same, using which we'll create slugs and store them under MarkdownRemark node. Then using GraphQL, we'll read them back.

practical

First, we need to create gatsby-node.js file project's root.

touch gatsby-node.js

Add the following to gatsby-node.js file.

const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `notes` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

onCreateNode is a Gatsby Node API. Called when a node is created. Developers can implement this to extend transform the node.

createFilePath is a helper function to create a URL from a file’s path on the file system.

createNodeField is a function to extend a node. The new node field is placed under the fields key on the extended node object.

Config'd

In the next part, we'll test our configuration using a tool called GraphiQL.

Also, we'll write GraphQL queries required for our blog.