This article was originally published on www.aboutmonica.com.
I've published dozens of articles on my site, which was built using Gatsby. In the past year I decided to invest more time into maintaining my blog and want to share the top plugins I recommend to enhance your Gatsby blog. Gatsby has a vast library of plugins which are Node packages that are designed to work with Gatsby APIs to extend the functionality of Gatsby sites.
I was motivated to invest more in maintaining my site because as a creator on the web it's important to have a place that you have full control over that houses all of your content. More and more developers are migrating back to self-hosting their blogs and thus retaining greater autonomy and ownership over their content.
Hey developers—I know many of y'all use Medium as a blog platform. If I can offer a #proTip, migrate your blog posts to your own personal blog.
If you're writing content for free on Medium, and they put a wall preventing others to read it, it defeats the purpose of using it.20:29 PM - 19 Feb 2019
611
1398
I encourage all developers who choose to blog and have the time/resources to not only maintain their blog but to consider cross-posting to sites like dev.to. If you're just getting started with syndicating content check out this piece by Stephanie Morillo on How Blog Post Syndication Works.
Paul Graham@paulg
A lot of people think using Medium is a substitute for having your own blog. But there's a critical difference: no moderator can delete your posts from your own blog.15:46 PM - 18 Apr 2020
Recommended Gatsby Plugins
One of the features I appreciate from Medium is that they provide content authors with access to analytics for content that they post. This information can be helpful when tracking which content resonates more with your audience and get a better gauge on how people are finding your site. If you would like access to metrics like page views, average session duration, etc. then you need to pro-actively install analytics as data usually cannot be collected retroactively. If you are interested in using Google Analytics in particular then you should check out gatsby-plugin-google-analytics.
Alternative: Adding a hit counter to your site
Speaking of using gatsby-plugin-google-analytics or a hit counter to learn more about your site's traffic, an essential part of creating discoverable web content is optimizing for SEO. The gatsby-plugin-react-helmet is built on-top of react-helmet to support server-side rendered SEO. It allows you to configure a site title, description, and other metadata. Updating metadata is essential to providing visually striking previews of content when content is shared on Twitter, Facebook, Slack, text messages and more!
Also, if your experience is anything like mine then debugging metadata images is sometimes an adventure and you may need to use tools like the Twitter card validator and the Facebook sharing debugger to debug image previews.
One way to make your blog stand out more is to have custom images for each blog post vs. a generic-site wide image. Manually creating new images for each blog post can be time-consuming and depending on your strategy is not necessary. I ended up installing gatsby-plugin-my-social-cards to generate custom images for each blog post.
In my case I have a base image that looks like:
and then for each article that I post I use gatsby-plugin-my-social-cards to generate an image that combines my base image with the title of the article resulting in something that looks like:
If you want to embed relevant tweets like the ones that appear throughout this article into markdown content on your site then check out the gatsby-remark-twitter plugin.
If the audience for your blog is developers then there's a good chance that some of your articles will feature code snippets. If so, gatsby-remark-prismsjs as an extension of PrismJS allows you to set up and style language-specific code syntax highlighting.
Example snippet with PrismJS syntax highlighting:
export function formatReadingTime(minutes) {
let buckets = Math.round(minutes / 5)
return `${new Array(buckets || 1).fill("🍿").join("")} ${minutes} min read`
}
gatsby-remark-autolink-headers allows you to automatically add anchor tags to all article headers. This allows these headers to be linkable similar to how Markdown files render on Github.com by default. This autolink functionality is helpful for allowing people to share links to particular sections of your article and helps make the process of creating table of contents more efficient.
These are 6 of the Gatsby plugins I've found essential to enhancing my Gatsby blog and providing it with better SEO and a richer experience for my audience. The next time I set up a blog using Gatsby I'd consider installing all of these plugins depending on the particular needs of the site.
Top comments (0)