Lucas Yamamoto

Gatsby Plugins: The 8 Essentials for a Perfect Blog

What is already good can be even more impressive with the use of the following plugins to further extend the power of this tool.

Gatsby is a powerful tool. Combining the capacity of React with static website generation not only makes an incredibly satisfying technology to develop with but also helps you build a stupidly fast website.

1. gatsby-plugin-netlify-cms

This is a must-need plugin if you like to write from any place in your blog. Netlify CMS allows you to implement an excellent, functional, and practical interface CMS for your blog without almost any effort. All you need is to define the schema that Netlify will use to render the panel (if you want to create categories and posts and what fields they will have) and the folder that Netlify will use to store the markdown files generated by it.

Alternatively, you can have a more robust tool as Contentful, but honestly, the Netlify CMS is already enough.

2. gatsby-redirect-from

After I migrated my blog from Jekyll to Gatsby, one thing that bothered me was the difference between the URL structure and the older links to the new ones. Instead of redirecting the visitors to the “404” page, I wanted them to be redirected to the new link of the article. This plugin allowed me to do that.

All I needed to do was add the attribute redirect_from in the front_matter and place in there all the previous links that my post had, and that was it! During the build of the Gatsby website, all the necessary pages were generated accordingly to what I defined.

Implementing page transitions was never more straightforward than it is with this plugin. This plugin allows you to make simple but beautiful transition effects on your pages without implementing too much code. It just works :)

4. gatsby-plugin-sitemap

A fast website is as crucial to SEO as adequately generating the sitemap. This plugin allows you to create the sitemap of your website in the build stage, and there are many options for you to customize it without having to build anything from scratch. And after that, you can place your sitemap in the Google Search Console, and everything will be indexed appropriately.

Algolia is a fantastic search engine that you can use with a generous free plan. It allows you to track and index any content you want with easy implementation and zero infrastructure costs. You don’t need to build a search engine from scratch.

6. gatsby-plugin-google-tagmanager

Implement Google Tag Manager quickly and manage all the tags you already have in your account with your GTM ID.

7. gatsby-plugin-social9-socialshare

Implement the social buttons of Social9 quickly with this plugin.

8. gatsby-theme-i18n

Internationalization is pretty straightforward with this plugin. It provides the React context and all the processors and URL builders you want without having to build a complex i18n implementation. You can create a locale switcher, have the same post in different languages on the same website, and even have different date formats for other regions.

Those are tips that I had for this post. Maybe in a near future, I’ll do another one. Let me know in the comments what plugins you like the best!