9 Excellent GatsbyJS Plugins I Use For My Niche Sites

I've already written at length why GatsbyJS is better than Wordpress.

Whether you're a developer, a blogger or a nichist (niche site creator), you can't get away from the fact that GatsbyJS offers stunning speed and simplicity, impenetrability (hack-proof) and better SEO out of the box.

However, Gatsby will never have the plugin ecosystem that Wordpress does (55,375 at the time of this writing).

There's a multitude of plugins out there for Wordpress.

But although GatsbyJS has far fewer, it has "just the right amount" of plugins in my opinion.

Here are the main ones I love and use.

1. gatsby-plugin-mdx

I wrote a whole blog post on MDX and why it's absolutely amazing.

If you're building a Gatsby site from markdown, there's no logical reason why you wouldn't use this plugin in my opinion. It should be part of Gatsby core.

Basically it allows you to add React components right in your blog posts - anywhere you want.

This is helpful from a design point of view if you're using a CSS framework like Boostrap (reactstrap). You can include reactstrap in your blog post, then add things like Bootstrap tables, buttons, etc.

Super helpful.

2. gatsby-plugin-advanced-sitemap

There's a simpler plugin that most people use called gatsby-plugin-sitemap.

It works fine but it produces an ugly XML blob that isn't very configurable.

I recommend gatsby-plugin-advanced-sitemap instead (by Ghost) as it allows you configure in detail how your XML sitemaps appear, plus it's just cleaner to look at.

Probably doesn't make a difference for SEO though but who knows.

3. gatsby-remark-reading-time

This is a brilliant little plugin that will allow you to add a "time to read" text above each article on your site.

Just like Medium.

I don't have any data on how well these work but my hunch is that showing new readers a reading time may be appreciated by impatient users.

May also increase bounce rate though.

4. gatsby-plugin-nprogress

This one may seem like a pointless feature but with GatsbyJS sites, it's important.

Sometimes on a slow connection, a GatsbyJS SPA may appear to be doing nothing when an internal link is clicked.

The gatsby-plugin-nprogress places a small loader at the top of the page with a spinner (optional).

Plus it just looks cool.

5. gatsby-plugin-styled-components

Can't live without styled components anymore. 🙂

Seriously - once you get used to using styled components to design websites, it's really hard to go back to old-school CSS.

I still use a combination on most sites (some SASS but mostly styled components).

There's also emotion which some people prefer but I see no real difference myself.

6. gatsby-transformer-json

I use this plugin to source data from JSON - primarily for comments.

Netlify handles my comment forms, notifies me via Slack that I have a new comment (Lambda function), then I pull that new comment to a JSON file via Netlify's API.

Next time I run a rebuild, GatsbyJS sources the comments from the JSON file and adds them to the corresponding post.

Try it.

Comment on this article and see what happens. 🙂

7. gatsby-remark-embed-video

Pretty self-explanatory.

This one enables me to embed YouTube and Vimeo videos in posts.

It's really nifty - all you need is the ID of the video. It's a lot cleaner than copying iframe embed codes.

8. gatsby-remark-responsive-iframe

Speaking of iframe.

This one is vital if you use the gatsby-remark-embed-video plugin.

It simply makes all your embedded videos responsive on mobile.

9. gatsby-plugin-prefetch-google-fonts

A simple and more performant way to prefetch Google webfonts.

I don't have any data to back up whether or not it's faster doing this but at the very least, it makes adding Google fonts easier than including in your CSS or adding to your header.

10. gatsby-plugin-netlify-cache

If you're using Netlify, absolutely don't forget this one.

It will speed up your rebuilds and ultimately save you time and money.

What are your favorite GatsbyJS plugins?

Are there plugins you love and can't live without?

Let us know in the comment section below.


Keep reading:

Leave a comment:

House Rules: Comments and feedback are great but I have my limits. Feel free to disagree but do so respectfully. Or you can email me. All comments are moderated.
  • Amazing article, thank you for share your experience!

    You can also add gatsby-image plugin: https://www.gatsbyjs.org/packages/gatsby-image/. It's the main plugin for optimize images on Gatsby websites :)

    Nagel, tell me, please. How you insert Google Analytics code to your Gatsby sites? You use any plugin for it, or just create React component?

    I found your blog 2 months ago. And all 2 months I intensive learn React.js + Gatsby. And it's really amazing!)

  • @Zhandos,

    Thanks a lot!

    I actually add Analytics code using Netlify post-processing (you can add JS snippets from GA, Drip, Adsense, etc.).

Want the content that I don't share publicly?
SIGN UP:

Author: Donovan Nagel
Put not your trust in princes, in mortal man, who cannot save.
- Psalm 146:3
Sign up and stay connected.