How to customize the `Bio` component in Gatsby

Gatsby is a React-based open-source framework for creating websites and apps – it is a #key# static site generator: Gatsby will produce static HTML files that can be loaded onto a server.#key#. Gatsby themes are plugins that include a gatsby-config.js file and add pre-configured functionality, data sourcing, and/or UI code to Gatsby sites.

Customizing the Bio component

Imagine a user has installed gatsby-theme-blog and wishes to customize the bio component to add the link to any blog or a website. This process would be done through component shadowing.

Component Shadowing allows users to make quick, one time changes that may not be supported by the theme itself. It also allows the user to replace the theme’s original file in the directory gatsby-theme-blog/src/components/bio.js with a user-defined file. This makes it easier to make quick, one time changes to the bio.js file.

How it’s done

Users are required to create a file named bio.js in the directory user-site/src/gatsby-theme-blog/components/ to customize the bio component. Component shadowing uses a specific naming convention to identify the file that needs to be rendered.

Any file that is a part of the src/gatsby-theme-blog directory is said to be “the new file” as it will be used instead of the file, with the same name, in the src directory of the gatsby-theme-blog/src theme.

This means that user-site/src/gatsby-theme-blog/components/bio.js will be rendered in place of gatsby-theme-blog/src/components/bio.js:

// apply this code in bio.js file.
import React from "react"
export default function Bio() {
  return <h1>My new bio component!</h1>
}

A a successful shadow of the bio component, it will result in the following directory tree:

user-site
└── src
    └── gatsby-theme-blog
        └── components
            └── bio.js