5 useful Gatsby plugins you might don't know

Gatsby is successful and a good part of it plays its ecosystem of plugins. In this article i wont mention the workhorses of plugins like:

• gatsby-plugin-react-helmet -> html head everywhere
• gatsby-transformer-sharp -> image handling wow
• gatsby-transformer-remark -> blogging awesomeness
• gatsby-source-filesystem -> give me all the data

Instead i will focus on the more unknown ones and i will tell you why these are really nice.

Enhance your markdown blog articles by custom block components

Plugin 1: gatsby-remark-custom-blocks is a plugin which will help you on this front. If you know typical block layouts for things like info alerts or warning alerts in articles, you know what this thing will do. Bootstrap has made it easy to use them with their Alerts CSS components. So let us start with installing it with:

npm install --save gatsby-remark-custom-blocks

Then let's add it to the gatsby config. Bear in mind that this is a sub-plugin, so it should be placed under the plugin gatsby-transformer-remark like this:

{
    resolve: "gatsby-remark-custom-blocks",
    options: {
        blocks: {
            danger: {
                classes: "alert alert-danger",
                title: "optional",
            },
            info: {
                classes: "alert alert-info",
                title: "optional",
            },
        },
    },
},

We created two boxes. One danger and one info box. We can then apply css styles to it. Since most of the time i am using Bootstrap as my CSS framework, i just added the default Bootstrap classes for their alerts. Furthermore i defined that both of the alerts can have titles. I added some extra CSS to make the title stand out visually a bit more.

.custom-block-heading {
    font-size: 1.25rem;
    line-height: 1.50;
    font-weight: 600;

    &::after {
        content: '';
        border-bottom: 1px solid #cfcfcf;
        display: block;
        margin-bottom: 6px;
    }
}

Then all left to do is adding this in our markdown content like this:

# awesome blog article in markdown

Now the custom block comes....
[[danger]]
| Attention: I am a danger block

[[info | I am an info title!]]
| Just want to inform you that this plugin is nice.

With this in place, your Blog content looks like this and i dont need a screenshot for this because this is the plugin right in action.

[[danger]] | Attention: I am a danger block

[[info | I am an info title!]] | Just want to inform you that this plugin is nice.

Use canonical link tags to make the google crawler happy and to boost organic search results

Plugin 2: If you dive into the SEO world, you notice so many things you should do to rank better, it's overwhelming. So be sure to grab some low hanging fruits first. Use gatsby-plugin-react-helmet-canonical-urls to have gatsby insert a canonical link on every page. We start with: (watch out, this time i used yarn for installation to make the yarn group happy)

yarn add gatsby-plugin-react-helmet gatsby-plugin-react-helmet-canonical-urls

I know these are two plugins right there, but you will need helmet to use that particular plugin. You want to use Helmet anyway because it's most likely one of the most used plugins in the gatsby world.

Now the config:

// In your gatsby-config.js
plugins: [
  `gatsby-plugin-react-helmet`,
  {
    resolve: `gatsby-plugin-react-helmet-canonical-urls`,
    options: {
      siteUrl: `https://www.example.com`,
    },
  },
]

With that Gatsby will insert the canonical link tag on every page. You can consult the plugin documentation because there are some more options availabe to control the behavior.

Generate perfect content images for your blog (and keep Google happy)

Plugin 3: This is another sub-plugin which goes under the gatsby-transformer-remark plugin. With Gatsby and Netlify CMS, it is quite easy to create well optimized title images because they are not part of the content and can be processed via GraphQL transformers. Inside the blog its different though. The gatsby-remark-images will solve this one. It scan through markdown inlined images and processes them and wrap them in a nice component so that html5 based picture tags will be rendered on the frontend.

As always, let's install it:

npm install --save gatsby-remark-images gatsby-plugin-sharp

As you noticed, we again installed two plugins. We need the sharp image transformation library because the plugin will use it. I strongly advice to use it anyway because this is easy the most valuable plugin together with the gatsby-image NPM package.

Now the gatsby configuration:

// In your gatsby-config.js
plugins: [
  `gatsby-plugin-sharp`,
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            // It's important to specify the maxWidth (in pixels) of
            // the content container as this plugin uses this as the
            // base for generating different widths of each image.
            maxWidth: 590,
          },
        },
      ],
    },
  },
]

I also added the needed dependency right in there. The basic config is just defining the maxWidth for the resulting images. Remember this plugin creates several images under the hood based on the device setting. Hello SEO friends. Google crawlers will love you. More crawling budget for your site means more sites scanned, means more visitors... i could go on and on.

There are some options i normally use on my sites like:

options: {
  maxWidth: 590,
  withWebp: true,
  linkImagesToOriginal: false, // if you dont like links on images
},

So with this, the next time your article is delivered to readers, it does not only select the right sized image but also check if the user's browser also can handle a format like webp, reducing the image size even more. Like i said, google will love you for this. And you are a good internet citizen too by saving bandwidth for all the Netflix streamers.

Control serer side http headers when using Netlify

Plugin 4: gatsby-plugin-netlify does exactly that. And all the SEO oriented reader know how important controlling headers are because websites are under constant change and you dont want to lose a ranked page in google only because it got a new URL. So you need 301 redirects for sure. Furthermore you might want to send a basic-auth header or a header giving iframe inclusion access for one tooling site which checks your website text or whatever.

As always:

npm install --save  gatsby-plugin-netlify

Configuration in gatsby can be as easy this if you only care about 301s at this time.

// in gatsby-config.js
plugins: [
  `gatsby-plugin-netlify`
]

Then code your redirects in gatsby-node.js. This is very self-explaining.

// in gatsby-node.js
exports.createPages = ({graphql, actions}) => {
    createRedirects(actions);
}

const createRedirects = ({createRedirect}) => {
  createRedirect({fromPath: '/my-old-url/', toPath: '/my-new-url', isPermanent: true})
  // ... a lot more to come here.
}

If you want to do more fancy stuff, then we need to supply a few more plugin options. See how this works:

plugins: [
{
    resolve: `gatsby-plugin-netlify`,
    options: {
        //headers: {}, // option to add more headers. `Link` headers are transformed by the below criteria
        allPageHeaders: ["Content-Security-Policy: frame-ancestors 'self' https://www.siteliner.com"], // option to add headers for all pages. `Link` headers are transformed by the below criteria
        //mergeSecurityHeaders: true, // boolean to turn off the default security headers
        //mergeLinkHeaders: true, // boolean to turn off the default gatsby js headers
        //mergeCachingHeaders: true, // boolean to turn off the default caching headers
        //transformHeaders: (headers, path) => headers, // optional transform for manipulating headers under each path (e.g.sorting), etc.
        //generateMatchPathRewrites: true, // boolean to turn off automatic creation of redirect rules for client only paths
    },
}
]

I exposed all possible options while just using one of them. Here i allow https://www.siteliner.com to include my page in an iframe of theirs. They do text analysis of your page and show your page right into theirs. For that i need to allow them that.

I used the allPageHeaders option. If you just want to expose headers for certain pages, you can use the headers: option, which will give you a selector as first argument. See the docs for more on that.

Easily embed SVG images on your page (and having a way to control fills via CSS)

Plugin 5: SVGs can be embedded in various ways into your side. The most easy one is importing the SVG in your code via, you guessed it, javascript import statement and then use that imported component as SRC target of a normal tag in JSX. But then you can't change the details of the SVG like fills. For this just use gatsby-plugin-react-svg.

npm install --save gatsby-plugin-react-svg

Config is straightforward to:

plugins: [
  {
    resolve: "gatsby-plugin-react-svg",
    options: {
        rule: {
            include: /assets\/images\/svg/
        }
    }
  }
]

We just pass it a simple regex to define what SVGs to process. Later in the gatsby page, just use it as follow:

import Logo from "../../assets/images/svg/logo.svg"

const Footer = () => {
  return (
    <>
      <Helmet>
          <style type="text/css">
              {`
                  #color_logo_transparent2 {
                     fill: #eee
                  }
              `}
          </style>
      </Helmet>
      <Container>
         <Logo/>
      </Container>
   </>
  )
}

Focus on three areas here. First we have the import of the SVG. Then we define an inline CSS via Helmet. Of course you could do it in an external CSS file too but then i had to do another code block and this is more compact. The inline CSS works on a tag via its ID inside the SVG and changes the fill color.

Using this thing is the most easy thing in the world. Just use the imported component. It will render a <SVG> tag in the frontend.

Summary: The gatsby plugin ecosystem is great

Picking only five of the lesser known plugins was really not an easy task because there are definitely more plugins that a lot people don't know. Check out gatsby's plugin web repository apart from its awful pagination which resets by every click on a plugin, it's pretty solid :-)