Quick Introduction

Gatsby is an amazing static site generator that uses React and GraphQL to create static sites that are blazing fast and highly secure. If you know react.js and don’t know about gatsby you are missing a lot of things.

It is just an amazing tool and even I am planning it to learn it because gatsby sites are super awesome and damn fast. At the end of 2020, I will be shifting my blog to Gatsby. So I would recommend trying gatsby for once, I bet you will fell in love with Gatsby.

It uses different plugins for adding extra features that you want on your site just like- WordPress. So here’s the list of best Gatsby plugins for Blogs, Static Sites, etc.

List Of Best Gatsby Plugins:

1.Gatsby-plugin-sharp

ABOUT

This plugin is used for image processing. It compresses images on your site according to your configuration. It aims to provide excellent out-of-the-box settings for processing common web image formats. It is one of the best gatsby plugins.

Installation

npm install --save gatsby-plugin-sharp

How To Use

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-sharp`,
    options: {
      useMozJpeg: false,
      stripMetadata: true,
      defaultQuality: 75,
    },
  },
]

2.Gatsby-transformer-sharp

ABOUT

It is used with the transformer-sharp plugin which helps in a variety of ways including resizing, cropping, and creating responsive images.

Installation

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

How To Use

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

3.Gatsby-plugin-offline

ABOUT

This plugin is one of the best gatsby plugins which help you make your site work offline and in the poor network connection. It creates a service worker for the site and loads the service worker into the client and creates a progressive app version of your site.

Installation

npm install --save gatsby-plugin-offline

How To Use

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

4.Gatsby-plugin-react-helmet

ABOUT

React Helmet is a component that lets you control your document head using their React component. This is one of the most used gatsby plugins. It helps in your site SEO as it holds titles, meta-data of your site which is used by Google for determining placement in search results.

Installation

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

How To Use

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

5.Gatsby-plugin-page-creator

ABOUT

Gatsby plugin that automatically creates pages from React components in specified directories.

Installation

npm install --save gatsby-plugin-page-creator

How To Use

// gatsby-config.js

module.exports = {
  plugins: [
    // You can have multiple instances of this plugin
    // to create pages from React components in different directories.
    //
    // The following sets up the pattern of having multiple
    // "pages" directories in your project
    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: `${__dirname}/src/account/pages`,
      },
    },
    {
      resolve: `gatsby-plugin-page-creator`,
      options: {
        path: `${__dirname}/src/settings/pages`,
      },
    },
  ],
}

6.Gatsby-plugin-sitemap

ABOUT

Sitemap is very crucial for your site as it helps in SEO. It is must-have thing for your site so this plugin helps you generate sitemap for your site which you can submit in your google console.

Installation

npm install --save gatsby-plugin-sitemap

How To Use

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

7.Gatsby-source-filesystem

ABOUT

A Gatsby source plugin for sourcing data into your Gatsby application from your local filesystem.

Installation

npm install --save gatsby-source-filesystem

How To Use

// 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
    // filesystem.
    //
    // The following sets up the Jekyll pattern of having a
    // "pages" directory for Markdown files and a "data" directory
    // for `.json`, `.yaml`, `.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
      },
    },
  ],
}

8.Gatsby-image

ABOUT

Gatsby-image is similar to the gatsby-transformer-sharp plugin as they both are used for image processing. It is a react component which works seamlessly with GraphQL queries.

Installation

npm install --save gatsby-image

How To Use

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`,
  ],
}

9.Gatsby-source-WordPress

ABOUT

When using Gatsby you need some kind of data source for your blog. So this plugin helps you pull data from WordPress and use it as headless CMS.

Installation

npm install --save gatsby-source-wordpress

How To Use

// In your gatsby-config.js
module.exports = {
  plugins: [
    /*
     * Gatsby's data processing layer begins with “source”
     * plugins. Here the site sources its data from WordPress.
     */
    {
      resolve: "gatsby-source-wordpress",
      options: {
        baseUrl: "live-gatbsyjswp.pantheonsite.io",
        protocol: "https",
        restApiRoutePrefix: "wp-json",
        hostingWPCOM: false
    }
//More settings in Gatsby Docs

10.Gatsby-plugin-typescript

ABOUT

Most of us use typescript for our work so this plugin helps you add typescript support in Gatsby. This plugin is automatically included in Gatsby. The only reason you would need to explicitly use this plugin is if you need to configure its options.

Installation

npm install --save-dev @types/react @types/react-dom @types/node

How To Use

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typescript`,
      options: {
        isTSX: true, // defaults to false
        jsxPragma: `jsx`, // defaults to "React"
        allExtensions: true, // defaults to false
      },
    },
  ],
}

11.Gatsby-plugin-Mdx

ABOUT

Want to enhance the power of Markdown? This plugin helps you use JSX inside markdown file which makes things very simpler and organized. This plugin is one of the best gatsby plugins.

Installation

npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react

How To Use

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
    `gatsby-plugin-mdx`,
  ],
}

12.Gatsby-plugin-manifest

ABOUT

This plugin help in creating a progressive app version of your gatsby site. It allows users to add your site to their home screen on most mobile browsers and set your own icon for your progressive app.

Installation

npm install --save gatsby-plugin-manifest

How To Use

// 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`,
      },
    },
  ],
}

13.Gatsby-plugin-sass

ABOUT

Want SASS/SCSS support in your Gatsby project? No worries this plugin does the exact same thing for you. It helps you add SASS/SCSS support in your very next Gatsby project.

Installation

npm install --save node-sass gatsby-plugin-sass

How To Use

1.Include the plugin in your gatsby-config.js file.

gatsby-config.js
plugins: [`gatsby-plugin-sass`]

2.Write your stylesheets in Sass/SCSS and require or import them as normal.

src/index.scss
html {
  background-color: rebeccapurple;
  p {
    color: white;
  }
}
gatsby-browser.js
import "./src/index.scss"

14.Gatsby-plugin-google-analytics

ABOUT

Gatsby is widely used for creating blazing fast blogs so this plugin is very necessary for you if you are a blogger because it helps you add google analytics support.

Installation

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

How To Use

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        // The property ID; the tracking code won't be generated without it
        trackingId: "YOUR_GOOGLE_ANALYTICS_TRACKING_ID",
        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,
      },
    },
  ],
}

15.Gatsby-plugin-netlify

ABOUT

Many people use Netlify to host their gatsby static sites so this plugin automatically generates a _headers file and a _redirects file at the root of the public folder to configure HTTP headers and redirects them on Netlify.

Installation

npm install --save gatsby-plugin-netlify

How To Use

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

16.Gatsby-plugin-web-font-loader

ABOUT

We all love fonts and it is one the most important part of a website so this plugin helps you add different font support from Google Fonts, FontDeck, Fronts.com, etc.

Installation

npm install --save gatsby-plugin-web-font-loader

How To Use

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-web-font-loader',
      options: {
        google: {
          families: ['Droid Sans', 'Droid Serif']
        }
      }
    }
  ]
}

17.Gatsby-plugin-emotion

ABOUT

Provide support for using the CSSin-js library Emotion including server-side rendering.

Installation

npm install --save gatsby-plugin-emotion @emotion/core @emotion/styled

How To Use

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-emotion`,
      options: {
        // Accepts all options defined by `babel-plugin-emotion` plugin.
      },
    },
  ],
}

Thanks for reading my article on Best Gatsby Plugins. If you find this article helpful do share with others and also check out other articles on- Best Chrome Extensions For Security and Privacy or Best Resources To Learn Svelte[2020] or Learn to create Custom Cursor with CSS

Default image
JatinRaj
Hello, My name is Jatin Raj and I am a web developer from India. I love to code every single day and share my thoughts with you people. Hobbies include reading books, football, and sketching/Painting.