When we began our full redesign and redevelopment our Gatsby JS website in May of 2021, we wanted to ensure it was clean, fast and fluid. This mantra extended to wanting to limit the amount of dependancies our site relied on. As such, we thought we would share with our readers about what we found were some of the most helpful plugins during development.
styled-components - Styled Components, for React and React Native, is a CSS in JS styling framework that allows you to write actual CSS within React components. The styling is scoped to a single component, meaning you do not need to worry about class name clashes, through the site or even on a single page. It allows for a consistent codebase that supports SASS out of the box, and is easy to pickup for anyone who is familiar with React.
Search Engine Optimisation
gatsby-plugin-advanced-sitemap - Gatsby Plugin Advanced Sitemap is as the name suggests, a more advanced sitemap plugin than the traditional gatsby-plugin-sitemap plugin. Offering more power and configuration over the standard sitemap, delivering a sitemap more akin to the style of Yoast - compared to a bare XML file like the standard Gatsby Sitemap Plugin. The advanced sitemap plugin also worked in situations where the standard sitemap plugin would not work at all, saving our team a few headaches in the long run.
gatsby-plugin-robots-txt - Gatsby Plugin Robots Txt serves as a tool to ensure your site has a robots.txt, meaning search engines can access your content. It can easily be dropped into gatsby-config.js with minimal configuration, and should you require a more robust robots.txt, it offers a robust level of options that can customise your robots.txt to your exact specifications.
gatsby-seo - Gatsby SEO Competent referenced in the linked SEO doc of Gatsby JS, is essential to ensuring your pages carry the correct meta and open graph tags needed by search engines to properly index and crawl your content. Our SEO Component's code is based off the last iteration of the code in the tutorial, and covers social sharing images, meta tags and open graph markups.
Content Management System
gatsby-source-prismic - At Ten Squared, all our React Builds are backed by a Prismic CMS, and as such we heavily relied on the use of the Gatsby Source Prismic plugin to ensure all our content is passed through to our site. Our team strongly believes that Prismic is one of the most versatile, efficient and cost effective content management systems around.
prismic-reactjs - Prismic ReactJS is the plugin we used to make sure this very blog was formatted correctly. This plugin allows the content created in Prismic's WYSIWYG editor is perfectly formatted on the client site. We also make use of a custom htmlSerializer to ensure our content is formatted exactly to our standards!
Site Speed Optimisation
gatsby-plugin-purgecss - Gatsby Plugin PurgeCSS sticks to initial mantra we discussed when it came to ensuring the site was clean, fast and fluid. While it's not exactly a plugin you can "set and forget" about, with careful configuration and testing it can remove unused css from css/sass/less/stylus files from your production builds.
gatsby-transformer-sharp - To top of it off, Gatsby Plugin Sharp also heavily supports our initial mantra, allowing GraphQL nodes to be created from image types that are supported by the Sharp image processing library. This means we can easily query this data from GraphQL and pass it to the Gatsby Image component.
So that's it! We have covered some of the plugins we found the most useful when creating our brand new Gatsby JS website. If you or your team is looking to build a new website in the near future, feel free to reach out to our team to see how we can help here.