My Top Plugins for a GatsbyJS Powered Blog

For some time, I did not quite get the idea of static page generators, especially Gatsby JS. It was until I decided to give it a try and I discovered how amazing technology it is! Gatsby JS, amongst all other super things, is used to create a stunning and blazingly fast blog, which can use varying data sources like Contentful CMS, WordPress or plain old Markdown. For the latter, it’s simply easy to set up and use.

This awesome blog was built with Gatsby and Markdown.

Now, while this won’t be a tutorial to set up Gatsby with Markdown, I’ll be showing you some awesome plugins I have come across so far, and I use in my Gatsby blog site. Some of these plugins help in UI, UX, others help in integration with useful but services, which otherwise would have been pretty difficult (or maybe not) to set up.

Some of these plugins were designed to work with Markdown. But most of them work with Gatsby sites with data sources from anywhere.

In no particular order, let’s get started:

gatsby-plugin-mailchimp

What is a blog without subscribers, right? This plugin makes it ridiculously easy to link up your Mailchimp account with your Gatsby blog to enable you to subscribe emails to your Mailchimp list.

To set it up is as easy as running yarn add gatsby-plugin-mailchimp to install the package and adding to below snippet to your gatsby-config.js file:

{
  resolve: "gatsby-plugin-mailchimp",
  options: {
    endpoint: // add your MC list endpoint here; see instructions below
  },
},

For more information, visit the page here.

gatsby-plugin-nprogress

Gatsby JS sites are blazing fast, that is the idea of static site generators. They load pages on click in less than a second. But if you have built, or visited a site built with Gatsby, you will agree with me this is not always the case.

Sometimes, and for some reasons, they delay a bit in loading pages. Most times there is no indicator to show the user that the page is loading, which they might perceive as an error and might end up continuously clicking on links, or might just leave entirely. This is where gatsby-plugin-nprogress comes in.

According to the gatsby plugin library, it “automatically shows the nprogress indicator when a page is delayed in loading (which Gatsby considers as one second after clicking on a link).”

To set up, yarn add gatsby-plugin-nprogress and add the line below to gatsby-config.js file:

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-nprogress`,
    options: {
      // Setting a color is optional.
      color: `tomato`,
      // Disable the loading spinner.
      showSpinner: false,
    },
  },
]

gatsby-remark-prismjs

This plugin adds syntax highlighting to code blocks in your markdown files using PrismJS. This makes your code snippets, samples, and blocks aesthetically pleasing.

To use, yarn add gatsby-transformer-remark gatsby-remark-prismjs prismjs. This installs all the required modules, including the official PrismJS library. For customization options and how to use, visit their page.

gatsby-plugin-disqus

This helps you link your Disqus account to your blog. It enables you to activate comments and reactions to your blog pages. Thus, it allows interaction between you and your audience. From here, you can get feedback and see what your readers think and feel about your works and writing.

For usage and instructions, visit here.

gatsby-plugin-robots-txt

This is a gatsby plugin that automatically creates robots.txt for your site. According to Neil Patel, "The robots.txt file, also known as the robots exclusion protocol or standard, is a text file that tells web robots (most often search engines) which pages on your site to crawl." Having a robots.txt file is good for SEO as it tells the search engine (e.g Google bots) instructions on how to crawl your site. To add this to your site, run yarn add gatsby-plugin-robots-txt and for the simplest implementation, add the code below to your project's gatsby-config.js:

plugins: ['gatsby-plugin-robots-txt']

For additional configurations, visit the plugin page

gatsby-plugin-manifest

Gatsby plugin which adds a manifest.webmanifest to make sites progressive web apps. This plugin comes with features that turn your app to a progressive web app - automatic icon generation, favicon support and caching, all taken care of. It is recommended to use this plugin together with gatsby-plugin-offline for best results. To use, run yarn add gatsby-plugin-offline gatsby-plugin-manifest.
Open your config file and paste below:

plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `GatsbyJS`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#f7f0eb`,
        theme_color: `#a2466c`,
        display: `standalone`,
      },
    },
    'gatsby-plugin-offline'
  ],

Make sure to replace necessary lines with your own details.

gatsby-plugin-google-analytics

This is used to add google analytics to your blog. This helps you get useful information about your visitors like demographics, device information, pages and stuff like that. It helps in knowing which pages are most visited, which country represents most of your visitors, which devices s are most used by your visitors and so, helps you to make better content targeted at your particular choice of audience. To use, run yarn add gatsby-plugin-google-analytics and then add the code below to your plugins:

{
  resolve: `gatsby-plugin-google-analytics`,
    options: {
       trackingId: `YOUR-TRACKING-ID`,
},

For more options and configurations, visit the plugin page

gatsby-plugin-sitemap

This plugin generates a sitemap for your site. Sitemaps are highly recommended for SEO purposes. And it will do you a lot of good to add a plugin for it. To get started, install the plugin by running yarn add gatsby-plugin-sitemap and then add the following line of code to your Gatsby config:

plugins: [`gatsby-plugin-sitemap`]

The line above is the minimum configuration needed and the generates sitemap will include all of your site's pages by default. If for some reason, you don't want this behaviour and need to exclude some pages, visit this page for additional configurations.

NOTE: This plugin only generates output when running in production mode! To test your sitemap, run: gatsby build && gatsby serve

The plugins above are just a very itsy-bitsy of the over 1000 supported plugins in the Gatsby library, but they're just the few I have worked with and loved. Some of these plugins come bundled in some starters and you may not need to install them yourselves.

I'll be very glad to get feedback on some of these plugins and to know which extra plugins you love. Please tell us in the comment section.

Comments

[Eugene Karataev]

I can add these two plugins that make my life easier:
gatsby-plugin-google-fonts to add google fonts and gatsby-plugin-styled-components which generates styled-components classes at the build time, avoiding flashing of content for the end user.