GastbyJS is a Static Site Generator that you can use to build super-fast websites.
Getting started with GatsbyJS is so easy and a great tip to help you get a bit further ahead is to download one of their starter templates so you can get your site up and running in literally minutes, just push your code to Github and deploy to anywhere such as AWS.
Being built on React means that every React plugin that you love will work on GatsbyJS but in today’s post, I’m going to cover 12 plugins particularly for GatsbyJS.
One thing to love about GatsbyJS is the ecosystem of and there are hundreds of plugins you can add to extend its functionalities which can save a lot of time during development.
1. Gatsby Plugin: Google Analytics
Use this Gatsby plugin to add Google Analytics to your website. This helps you get useful information about your visitors like demographics, device information, pages etc. Know which pages been visited the most, or which country your visitors have come from, or what devices your visitors had to visit your site and so on, and it helps you to make better content targeted at your particular choice of audience.
2. Gatsby Plugin: Manifest
This plugin helps you easily set up a manifest for your website, so that users can add it to their home screen. You can edit the colour and the background of the splash page and this plugin helps you auto-generate icons as well.
3. Gatsby Plugin: Offline
All apps need reliable network coverage, but it’s not always assured. So it’s important to maintain the steady running of an app in any condition to prevent users from being frustrated. The offline gatsby plugin can be used to create Service Workers that allow a Gatsby site to work offline. The Offline plugin uses WorkBox Build to create Service workers who then will be loaded into the client.
If you like the above plugin (Manifest plugin) and use it, make sure that you’ve listed the gatsby offline plugin after manifest gatsby plugin so that the manifest file can be included in the service worker.
4. Gatsby Plugin: Disqus
Having your Disqus account attached to your blog will enable you to activate comments and reactions to your posts, Thus allowing you to interact between you and your audience. From here you will get the feedback and see whats your audience thinks and feel about your words.
5. Gatsby Plugin: nprogress
Sometimes and for some reasons you find yourself waiting for a few seconds for a page to load and there isn’t an indicator that let the user know that the page is actually loading which they might perceive it as an error. This is where this plugin, nprogress comes in and automatically shows the nprogress indicator when a page been delayed in loading
6. Gatsby Plugin: TypeScript
By default, gatsby-plugin-typescript comes with Gatsby and it target scripts used by front-end frameworks. It builds typescripts files with ‘.tx’ or ‘.tsx’ extensions. While this is the normal behaviour of this plugin, the only reason you would need to explicitly use this plugin is if you need to configure its options.
7. Gatsby Plugin: PrismJS
If you are building a programming blog, there’s a chance that you are going to need some syntax highlight for your code blocks. This plugin adds syntax highlighting to those code blocks in your markdown files using PrismJS. Thus makes all of your code snippets, samples, and blocks aesthetically delightful.
8. Gatsby Plugin: MailChimp
So you got that programming blog or a different kind of blog and you’ve got zero subscribers. With this plugin, it makes it so insanely easy to link up a Mailchimp account with your Gatsby blog to enable you to subscribe emails to you Mailchimp list.
9. Gatsby Plugin: Robots.txt
Having a robots.txt file is great for SEO as it tells the search engine instructions on how to crawl your site. With this gatsby plugin it automatically creates robots.txt for your site to tell those search engines what to index and not
10. Gatsby Plugin: Remark Reading Time
Be just like Medium, with this plugin that allows you to add a “time to read” text above each article on your site. This plugin supports both MD and MDX formats and has four available fields within readingTime function.
11. Gatsby Plugin: Image
This plugin gatsby-image is a React component specially designed to work seamlessly with Gatsby’s GraphQL queries. Combining Gatsby’s native image processing abilities with advanced image loading techniques that easily optimise image loading for your sites. This plugin also uses gatsby-plugin-sharp to power its image transformations.
12. Gatsby Plugin: Social Cards
The last plugin for Gatsby in this list, use it automatically parses your posts and generates social cards for Twitter, Slack, Facebook and other sites.