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:
- Auto icon generation: generates multiple icon sizes from a single source
- Favicon support
- Legacy icon support (iOS)
- Cache busting
- Localization: Provides unique manifests for path-based localization (Gatsby Example)
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](https://www.gatsbyjs.org/packages/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
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 tofalse
.disable
: Set totrue
to toggle off the analyzer. Defaults tofalse
.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:
- Import
gatsby-image
and use it in place of the built-inimg
. - 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