11 best GatsbyJS plugins for blog and website 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.
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:
Add plugin and manifest settings — this step is required:
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:
How to use it:
In your gatsby-config.js:
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:
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 and tags, assign true to this option.
anonymize— countries like German require you to the _anonymizeIP function for Google Analytics. assign true to anonymizein 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:
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:
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:
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.
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:
Or with npm:
How to use it:
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
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:
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:
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 . It’s optimized for fixed width/height images and images that stretch the full-width of a container. Some ways you can use
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-in img.
- 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.
Then in your gatsby-config.js:
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:
How to use it:
This is what a component using gatsby-image looks like:
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.