Top 5 Gatsby Plugins you should use in your next project
Top 5 Gatsby Plugins you should use in your next project

Before jumping into plugins let's talk about GatsbyJS for some time.

GatsbyJS -

Gatsby is a React-based free and open-source framework that allows developers to build optimized web apps following the latest web standards. It’s a static site generator like Hugo and Jekyll. However, Gatsby does better in many aspects than Hugo and Jekyll as you can see from this comparison.

You can find all of the plugins provided by gatsby here.

But I will be listing down my top 5 plugins which I have used while working with gatsbyJS extensively.

1. gatsby-image

Gatsby-image is the image optimization plugin that works very well with the gatsby way of doing things.

it is a react component that works seamlessly with GraphQL queries. It combines the native image processing techniques of Gatsby with advanced image processing techniques to load images with optimizations.

These are things which are offered by gatsby-image: -

  • This plugin holds the image position while it’s loading to avoid jumping around.
  • Loading of the image is done using lazy load considering the bandwidth and speeds.
  • Optimizes the image size based on the size and resolution of each device.

To start with Gatsby-images, install

npm i --save gatsby-image

Then go to your gatsby-config.js

and add these to the plugins array

plugins: [

'gatsby-plugin-sharp',

'gatsby-transformer-sharp',

{

resolve: `gatsby-source-filesystem`,

options: {

path: `${__dirname}/src/images`,

name: `images`,

},

},

],

Let's see how to use that gatsby-image plugin

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/example.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

}

}

}

}

2. gatsby-plugin-google-analytics

gatsby-plugin-google-analytics lets us easily connect our website to google analytics which makes it very easy to track metrics of our website. As you are already aware of how important metrics are to constantly improve the website or your business.

Installing -

npm i --save gatsby-plugin-google-analytics

Now let's add it to the gatsby-config.js

// 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",

// 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",

// Defers execution of google analytics script after page load

defer: false,

// Any additional optional fields

sampleRate: 5,

siteSpeedSampleRate: 10,

cookieDomain: "example.com",

},

},

],

}

3.gatsby-plugin-manifest

this is also an amazing plugin that helps in adding a web app manifest to our web app.

what this plugin will do is gives our web app an ability so that our users can add our website to their home screen on most mobile browsers similar to a native app.

Instaling -

npm i gatsby-plugin-manifest

now after installing let's configure our web app

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

},

},

],

}

4.gatsby-source-graphql

Another awesome plugin we have is gatsby-source-graphql.

It gives our web app superpowers, gatsby uses graphql at the back to serve the data and this plugin gives us the ability to connect our own graphql endpoint to our gatsby web app and make anything out of it.

by connecting our own graphql backend we have the possibility to create anything we like this kind of stack is also known as JamStack.

Installing -

npm i gatsby-source-graphql

now let's add our endpoints to the plugin array in gatsby-config.js

// In your gatsby-config.js

module.exports = {

plugins: [

// Simple config, passing URL

{

resolve: "gatsby-source-graphql",

options: {

// Arbitrary name for the remote schema Query type

typeName: "SWAPI",

// Field under which the remote schema will be accessible. You'll use this in your Gatsby query

fieldName: "swapi",

// Url to query from

url: "https://swapi-graphql.netlify.app/.netlify/functions/index",

},

},

5.gatsby-plugin-sitemap

Last but not the least we have another awesome plugin which gives us the ability to add sitemap to our website which will improve our SEO score and googe will love us for doing that.

so let's install this plugin -

npm i gatsby-plugin-sitemap

at last let's add it to the plugins array in gatsby-config.js

// In your gatsby-config.js

siteMetadata: {

siteUrl: `https://www.example.com`,

},

plugins: [

{

resolve: `gatsby-plugin-sitemap`,

options: {

output: `/some-other-sitemap.xml`,

// Exclude specific pages or groups of pages using glob parameters

// See: https://github.com/isaacs/minimatch

// The example below will exclude the single `path/to/page` and all routes beginning with `category`

exclude: [`/category/*`, `/path/to/page`],

query: `

{

wp {

generalSettings {

siteUrl

}

}

allSitePage {

nodes {

path

}

}

}`,

resolveSiteUrl: ({site, allSitePage}) => {

//Alternatively, you may also pass in an environment variable (or any location) at the beginning of your `gatsby-config.js`.

return site.wp.generalSettings.siteUrl

},

serialize: ({ site, allSitePage }) =>

allSitePage.nodes.map(node => {

return {

url: `${site.wp.generalSettings.siteUrl}${node.path}`,

changefreq: `daily`,

priority: 0.7,

}

})

}

}

]

So that was it these are my personal favorite there are many awesome plugins out there that can fulfill all your needs while working on a gatsby website.

Thanks for taking out some time for reading. ✌️

Socials -

GITHUB | INSTAGRAM | LINKEDIN | DRIBBBLE | BEHANCE | EMAIL