Must have Gatsby plugins for a great blog

If you're planning to start a new blog or thinking of migrating your blog to another platform then you should definitely give Gatsby a shot. Gatsby is a Static site generator that can generate high-performance web pages from your data source like API, Markdown Files, JSON, etc. The web pages generated by Gatsby automatically optimized for high performance and most web standards. To make things even better Gatsby has a plugin system, which lets you add more features and functionality to it.

Here I have made a list of some of the best Gatsby plugins which can help you build and deploy a great blog and if you're not planning to build a blog you'll still find these gatsby plugins still useful.

Building your blog

Some gatsby plugins that can help you build your blogs easily.

• gatsby-plugin-sass(requires node-sass) Check out

  A must have plugin for using scss/sass in you Gatsby blog. This plugin works with and requires node-sass.

npm i gatsby-plugin-sass node-sass

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

• gatsby-plugin-mdx Check out

  This plugin add support for mdx files for your app. MDX is an markup format that lets you write JSX with markdown. With the help of this you can import and use React components in your markdown files.

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

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

• gatsby-remark-prismjs Check out

  This plugin is useful if you're building a programming blog. It let's you integrate prism.js

npm i gatsby-remark-prismjs

// gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-sass`,
    options: {},
  },
]

• gatsby-plugin-nprogress Check out

  This plugin adds a cool top loader for page transitions.

npm i gatsby-plugin-nprogress

// gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-nprogress`,
    options: {
      color: `teal`,
      showSpinner: false,
    },
  },
]

Performance Tuning

• gatsby-plugin-purgecss Check out

  This plugin removes any unused css from your pages during build time. It supports *.css files. If you add plugins for your respective css pre-processor(scss, less, stylus) then it can support those as well.

npm i gatsby-plugin-purgecss

// gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-purgecss`,
    options: {
      color: `teal`,
      showSpinner: false,
    },
  },
]

SEO Plugins

Some Gatsby plugins that can help you increase the SEO of your blog

• gatsby-plugin-sitemap Check out

  This gatsby plugin automatically generates sitemap.xml for you website.

npm i gatsby-plugin-sitemap

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

• gatsby-plugin-robots-txt Check out

npm i gatsby-plugin-robots-txt

// gatsby-config.js
siteMetadata: {
  siteUrl: `https://www.myblog.com`,
},
plugins: [`gatsby-plugin-robots-txt`]

Monitoring and Analytics

Some gatsby plugins that can help you monitor traffic and bugs.

• gatsby-plugin-sentry Check out

This plugin helps you integrate Sentry to monitor your site and track production bugs.

npm i gatsby-plugin-sentry

// gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-sentry`,
    options: {
      dsn: "YOUR_SENTRY_DSN_URL",
      environment: process.env.NODE_ENV,
    },
  },
]

• gatsby-plugin-google-analytics Check out

This plugin helps you integrate Google Analytics with you Gatsby Site. All you need is a Google Analytics tracking ID and it will integrate your gatsby site with Google Analytics Dashboard. Where you can check how your site is performing.

npm i gatsby-plugin-google-analytics

// gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-google-analytics`,
    options: {
      trackingId: "YOUR_GOOGLE_ANALYTICS_TRACKING_ID",
      head: false,
    },
  },
]

Hope you found something that which can help you build great blog powered by gatsby and stay tuned if you'd like to learn how to build a gatsby plugin

Thank you for reading

Build something awesome today! 🙌

Gatsby : Official Site

Gatsby Plugins : List of Gatsby Plugins

Documentation: Gatsby Documentation

- Jitendra Nirnejak