11 best GatsbyJS plugins for blog and website 2020

Growth Academy Sep 17, 2020

Gatsby has been growing over time, and its using by a huge number of sites like marketing sites, blogs, and generated static pages. Gatsby has grown in popularity, and for good reason. It’s fun and easy to work with and it makes the life of a React developer much easier, smoother, and productive.

What is GatsbyJS?

Gatsby is a React-based free and open-source framework or Static Site Generator that allows developers to build optimized web apps. It’s a static site generator like Hugo and Jekyll. However, Gatsby does better in many aspects than Hugo and Jekyll. You can checkout the detailed comparison from this here.

Gatsby has grown in popularity, and for good reason. It’s fun and easy to work with— it makes the life of a React developer much smoother and more productive.

What are Gatsby plugins?

In a nutshell, Gatsby plugins are reusable modules of code. From the Gatsby homepage

Gatsby plugins are Node.js packages that implement Gatsby APIs. For larger, more complex sites, plugins let you modularize your site customizations into site-specific plugins.

In this article, we will talk about 11 best GatsbyJS plugins that you should use in your next react application.

1- gatsby-source-filesystem

This plugin is for sourcing data into your Gatsby application from your local file system.

The plugin creates File nodes from files. The various “transformer” plugins can transform File nodes into other types of data. For example,gatsby-transformer-json transforms JSON files into JSON data nodes, and gatsby-transformer-remark transforms Markdown files into MarkdownRemark nodes from which you can query an HTML representation of the Markdown.

Installation:

npm install --save gatsby-source-filesystem

How to use it:

In your gatsby-config.js module.exports plugins, you can have multiple instances of this plugin to read source nodes from different locations on your file system. The following sets up the Jekyll pattern of having a pages directory for Markdown files and a data directory for .json, .yaml, and .csv.

 {     
 resolve: `gatsby-source-filesystem`,      
 options: {        
            name: `pages`,        
            path: `${__dirname}/src/pages/`,      
          },    
 },    
 {      
 resolve: `gatsby-source-filesystem`,      
 options: {       
            name: `data`,        
            path: `${__dirname}/src/data/`,        
            ignore: [`**/\.*`], // ignore files starting with a dot      
          },    
  },  
 ],
}

Read the full documentation here.

2- gatsby-plugin-manifest

The web-app manifest (part of the PWA specification) enabled by this plugin allows users to add your site to their home screen on most mobile browsers — see here. The manifest provides configuration and icons to the phone.

This plugin provides several features beyond manifest configuration to make your life easier:

Each of these features has extensive configuration available so you are always in control.

Installation:

$ npm install --save gatsby-plugin-manifest

Add plugin and manifest settings — this step is required:

// in gatsby-config.js
module.exports = {  
     plugins: [    
                {      
                resolve: `gatsby-plugin-manifest`,      
                options: {       
                        name: `GatsbyJS`,        
                        short_name: `GatsbyJS`,        
                        start_url: `/`,        
                        background_color: `#f7f0eb`,        
                        theme_color: `#a2466c`,        
                        display: `standalone`,      
                        },    
                 },  
             ],
           }

If you’re using this plugin together with gatsby-plugin-offline (recommended), this plugin should be listed before the offline plugin, so that it can cache the created manifest.webmanifest.

For more information on configuring your web app, see here. For more information on the plugin, read the full documentation here.

3- gatsby-plugin-sitemap

gatsby-plugin-sitemap lets you create a sitemap for your website. This is useful for search engine crawlers and search results optimization. However, this plugin only creates the sitemap when running in the production mode.

Installation:

npm install --save gatsby-plugin-sitemap

How to use it:

In your gatsby-config.js:

siteMetadata: {  
siteUrl: `https://www.example.com`,
},
plugins: [`gatsby-plugin-sitemap`]

This plugin provides many options. Let’s see the most commonly used option.

query — The query for the data you need to generate the sitemap.

output — file path to the generated sitemap

exclude — you can exclude certain paths from the sitemap

Above is the minimal configuration required for it to work. By default, the generated sitemap will include all of your site’s pages, except the ones you exclude.

Read the full documentation here.

4. gatsby-plugin-social9-comment

gatsby-plugin-social9-comment plugin lets you easily add comments. Comments help you to grow discussions on your website – if you have a blog, you can embed Social9 Comment if you want your readers to add comments.

It’s fast and free, has a modern interface, and is reasonably secure. Unlike most alternatives, Commento is lightweight, privacy-focused and never sell your data, show ads, embed third-party tracking scripts, or inject affiliate links.

Installation:

npm install --save gatsby-plugin-social9-comment

How to use it:

// In your gatsby-config.js
module.exports = {
	plugins: [{
		resolve:  `gatsby-plugin-social9-comment`,
	}],
}

Above is the minimal configuration required for it to work. For more information on the plugin, read the full documentation here

5. gatsby-plugin-google-analytics

gatsby-plugin-google-analytics plugin lets you easily add google analytics. this plugin is disabled in development mode in order to prevent your site from tracking during its development.

The plugin is enabled when you run gatsby serve command

Let’s see some of the options provided by this plugin.

trackingId — assign your Google Analytics tracking id

head — if you want to put your GA script in between <head> and </head> tags, assign true to this option.

anonymize — countries like German require you to the _anonymizeIP function for Google Analytics. assign true to anonymize in that case.

respectDNT — set this option to true, if you don’t want Google Analytics to track visitors who have enabled the Do Not Track option.

Installation:

npm install --save gatsby-plugin-google-analytics

How to use it:

In your gatsby-config.js module.exports plugins:

 {      
 resolve: `gatsby-plugin-google-analytics`,      
 options: {        
     trackingId: "YOUR_GOOGLE_ANALYTICS_TRACKING_ID",        
     // Defines where to place the tracking script - `true` in the head and `false` in the body       
     head: false,        
     // Setting this parameter is optional        
     anonymize: true,        
     // Setting this parameter is also optional        
     respectDNT: true,        
     // Avoids sending pageview hits from custom paths        
     exclude: ["/preview/**", "/do-not-track/me/too/"],        
     // Delays sending pageview hits on route update (in milliseconds) 
     pageTransitionDelay: 0,        
     // Enables Google Optimize using your container Id        
     optimizeId: "YOUR_GOOGLE_OPTIMIZE_TRACKING_ID",        
     // Enables Google Optimize Experiment ID        
     experimentId: "YOUR_GOOGLE_EXPERIMENT_ID",        
     // Set Variation ID. 0 for original 1,2,3....        
     variationId: "YOUR_GOOGLE_OPTIMIZE_VARIATION_ID",        
     // Any additional optional fields        
     sampleRate: 5,        
     siteSpeedSampleRate: 10,        
     cookieDomain: "example.com",      
     },    
    },  
   ],
  }

See here for the complete list of optional fields.

Note that this plugin is disabled while running gatsby develop. This way, actions are not tracked while you are still developing your project. Once you run gatsby build the plugin is enabled. Test it with gatsby serve.

Read the full documentation here.

6- gatsby-plugin-social9-socialshare

gatsby-plugin-social9-socialshare plugin lets you easily add social sharing buttons on your website or blog. Social9 social sharing plugin provides you beautiful buttons, sharing capabilities, and analytics. (20+ buttons- Whatsapp, Facebook, Twitter, LinkedIn, Reddit, and many more…)

Installation:

npm install --save gatsby-plugin-social9-socialshare

How to use it:

// In your gatsby-config.js

module.exports = {
	plugins: [{
		resolve: `gatsby-plugin-social9-socialshare`,
		options: {
			content:  `xxxxxxxxxx`,
		}
	}],
}

See below for the complete list of optional fields.

Optional Fields

content: string, //content key for identify social share account

async: boolean

defer: boolean

Above is the minimal configuration required for it to work. For more information on the plugin, read the full documentation here.

7- gatsby-plugin-typography

A Gatsby plugin for utilizing the Typography library with minimal configuration. See it in action in the Tutorial (source)

Installation:

npm install --save gatsby-plugin-typography react-typography typography

How to use it:

A typical typography.js file utilizing one of its themes might look like this:

import Typography from "typography"
import grandViewTheme from "typography-theme-grand-view"
const typography = new Typography(grandViewTheme)
// Export helper functions
export const { scale, rhythm, options } = typography
export default typography

You then have to take the exported stylesheets and inline them in your entry file. Since a theme comes with two fonts, you also have to make sure you have the fonts available somehow.

By using gatsby-plugin-typography and specify the path to your typography.js file via the pathToConfigModule option (see below), the inclusion of your typography styles and any relevant fonts is taken care of by a pair of helper methods under the hood, keeping your typography-related config in a single location and your entry file sparse.

// In your gatsby-config.js
module.exports = {  
            plugins: [    
                        {      
                    resolve: `gatsby-plugin-typography`,      
                            options: {        
                                 pathToConfigModule: `src/utils/typography`,      
                                      },    
                        },  
                      ],
                   }

Read the full documentation here.

8- gatsby-plugin-webpack-bundle-analyzer

A Gatsby plugin to help analyze your bundle content with the webpack-bundle-analyzer.

Installation with Yarn:

yarn add gatsby-plugin-webpack-bundle-analyzer

Or with npm:

npm install --save gatsby-plugin-webpack-bundle-analyzer

How to use it:

// In your gatsby-config.js
plugins: [  
'gatsby-plugin-webpack-bundle-analyzer',
]

Additional options can be found here, including:

  • production: Run the analyzer on a production build. Defaults to false.
  • disable: Set to true to toggle off the analyzer. Defaults to false.plugins: [{  resolve: 'gatsby-plugin-webpack-bundle-analyzer',  options: {    analyzerPort: 3000,    production: true, }}]

Read the full documentation here.

9- gatsby-plugin-react-helmet

Provides drop-in support for server rendering data added with React Helmet.

React Helmet is a component which lets you control your document head using their React component.

With this plugin, attributes you add in their component, e.g. title, meta attributes, etc. will get added to the static HTML pages Gatsby builds.

This is important not just for site viewers, but also for SEO — title and description metadata stored in the document head is a key component used by Google in determining placement in search results.

Installation:

npm install --save gatsby-plugin-react-helmet react-helmet

How to use it:

Just add the plugin to the plugins array in your gatsby-config.js

plugins: [`gatsby-plugin-react-helmet`]


If you’re using gatsby-plugin-offline, you might notice that when opening a link in the background, the title doesn’t appear in the tab bar until you switch to that tab. This is an upstream issue with React Helmet; however, it can be worked around by passing the defer={false} prop into your Helmet component. For example:

<Helmet title="foo bar" defer={false} />

Read the full documentation here.

10- gatsby-plugin-offline

gatsby-plugin-offline give drop-in support for making a Gatsby site work offline, enabling it to be more resistant to bad network connections. It creates a service worker for the site and loads the service worker into the client.

If you’re using this plugin with gatsby-plugin-manifest (recommended) this plugin should be listed after, so the manifest file can be included in the service worker.

Installation:

npm install --save gatsby-plugin-offline

How to use it:

// In your gatsby-config.js
plugins: [
`gatsby-plugin-offline`
]

Read the full documentation here.

11. gatsby-image

gatsby-image is a React component specially designed to work seamlessly with Gatsby’s GraphQL queries. It combines Gatsby’s native image processing capabilities with advanced image loading techniques to easily and completely optimize image loading for your sites. gatsby-image uses gatsby-plugin-sharp to power its image transformations.

Note: gatsby-image is not a drop-in replacement for <img />. It’s optimized for fixed width/height images and images that stretch the full-width of a container. Some ways you can use <img /> won’t work with gatsby-image.

Solution

With Gatsby, we can make images way way better.

gatsby-image is designed to work seamlessly with Gatsby’s native image processing capabilities powered by GraphQL and Sharp. To produce perfect images, you need only:

  1. Import gatsby-image and use it in place of the built-in img.
  2. Write a GraphQL query using one of the included GraphQL “fragments” which specify the fields needed by gatsby-image.

The GraphQL query creates multiple thumbnails with optimized JPEG and PNG compression. The gatsby-image component automatically sets up the “blur-up” effect as well as lazy loading of images further down the screen.

Installation:

npm install --save gatsby-image

Depending on the gatsby starter you used, you may need to include gatsby-transformer-sharp and gatsby-plugin-sharp as well, and make sure they are installed and included in your gatsby-config.

npm install --save gatsby-transformer-sharp gatsby-plugin-sharp

Then in your gatsby-config.js:

plugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`]

Also, make sure you have set up a source plugin, so your images are available in graphql queries. For example, if your images live in a project folder on the local filesystem, you would set up gatsby-source-filesystem in gatsby-config.js like so:

const path = require(`path`)

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src`, `images`),
      },
    },
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`,
  ],
}

How to use it:

This is what a component using gatsby-image looks like:

import React from "react"
import { graphql } from "gatsby"
import Img from "gatsby-image"

export default ({ data }) => (
  <div>
    <h1>Hello gatsby-image</h1>
    <Img fixed={data.file.childImageSharp.fixed} />
  </div>
)

export const query = graphql`
  query {
    file(relativePath: { eq: "blog/avatars/kyle-mathews.jpeg" }) {
      childImageSharp {
        # Specify the image processing specifications right in the query.
        # Makes it trivial to update as your page's design changes.
        fixed(width: 125, height: 125) {
          ...GatsbyImageSharpFixed
        }
      }
    }
  }
`

For other explanations of how to get started with gatsby-image, see this blog post by community member Kyle Gill Image Optimization Made Easy with Gatsby.js, this post by Hunter Chang (which also includes some details about changes to gatsby-image for Gatsby v2): An Intro To Gatsby Image V2, or this free playlist on egghead.io with examples for using gatsby-image.

See an example here:


We hope you have found at least one useful plugin for your existing or new Gatsby project. In case we missed your favorite plugin, post it below in the responses.

What is Social9?

Welcome! 👋 is a one-stop-shop platform to drive more traffic and increase audience engagement by leveraging the power of social media.

It offers seamless website integrations with the latest technologies, out of the box analytics and many other "FREE" features for you to get started!

Lets get started! - https://social9.com/


Kartik Jhakal

Product Manager, Social9.com

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.