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.