Preparing your Gatsby site for production

Gatsby is a wonderful framework for quickly building static sites using React and GraphQL. Here are some things to look out for when you’re ready to put your Gatsby site live.

Metadata fun

It’s not the most fun part of building a website, but good metadata will help your site be found in search engines and will encourage people to share it on social media. It will also help things like Google Assistant and Siri to gather knowledge from your website.

A good way to check what state your basic meta tags are in is by using a tool like metatags.io.

Within Gatsby, you’ll want to use react-helmet to set meta tags.

Specific things to look out for:

• Make sure each page has distinct titles and descriptions
• Add a social media image (og:image and twitter:image properties)
• Set canonical URLs for any pages that can be accessed via multiple URLs, to tell search engines which URL is the main access point for a specific bit of content

Console log no more

A good clean up exercise is to check if there are any console.log() statements left in your code. These might introduce bugs, and could slow down render performance if you’re logging large amounts of data.

Four-oh-four

Check the behaviour for going to a non-existing path.

Gatsby allows you to specify a pages/404.js page that will be rendered for any path that doesn’t exist. To try it out locally, go to http://localhost:8000/404.

In production, make sure that wherever you’re hosting the site, any non-existing path loads 404.html, a static file that Gatsby will generate in the build process.

Check your deps

It might be smart to update your package.json dependencies, so that you have the latest Gatsby features, which recently have included caching for improved build performance, incremental builds, and support for React 17.

You can go through your dependencies list one by one, or run
yarn upgrade --latest to update all of them to the latest version. That might require some tweaking afterwards to ensure the versions of different dependencies work well together.

Another helpful thing to check for is any unused dependencies. The tool depcheck (invoke via npx depcheck) is a quick way to see if you can strip out any unneeded dependencies.

Set up CI/CD

Set up a process to automatically deploy changes to your site whenever you push a commit to the main/master branch.

The most straightforward way to do this might be using Gatsby Cloud, which is a full solution for building and hosting your Gatsby site, and includes preview builds that integrate with your CMS. It’s free to get started.