Best Gatsby Plugins[2020]: For Blogging, SEO, etc
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 Docs10.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 CSS-in-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
