Creating theme plugins
As we have discovered, theme plugins are all about adding visual elements to our Gatsby site. Theme plugins are unique in that they have to contain a gatsby-config.js file. To better understand theme plugins, let's look at the most minimal of examples. Let's use a plugin to add a simple sample page to our site:
- Create a new folder called
gatsby-theme-sample-pagein yourpluginsfolder. - Open a terminal in the
gatsby-theme-sample-pagefolder and run the following command:npm init -y
- Create an
srcfolder in/gatsby-theme-sample-page. - Create a
pagesfolder in yoursrcfolder. - Create a
sample.jsfile inside your newpagesfolder and add the following code:import React from "react"; const Sample = () => { return ( <div> <h1>Sample page</h1> </div> ); }; export default Sample;This page is very basic and just renders a heading on the page.
- Navigate to your
gatsby-config.jsfile...