Skip to content
Optimizing Your Gatsby.js Website for Production
JavaScript CSS
Branch: master
Clone or download
MaedahBatool 👌 IMPROVE: Readme layout and syntax (#1)
👌 IMPROVE: Readme layout and syntax
Latest commit 01e0f4f Oct 1, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src 📦 NEW: Sep 23, 2019
.gitignore Initial commit from gatsby: (… Sep 9, 2019
.prettierignore Initial commit from gatsby: (… Sep 9, 2019
.prettierrc Initial commit from gatsby: (… Sep 9, 2019
LICENSE Initial commit from gatsby: (… Sep 9, 2019 👌 IMPROVE: Readme layout and syntax Oct 1, 2019
gatsby-browser.js Initial commit from gatsby: (… Sep 9, 2019
gatsby-config.js 📦 NEW: Add readme file Sep 22, 2019
gatsby-node.js 📦 NEW: Sep 23, 2019
gatsby-ssr.js Initial commit from gatsby: (… Sep 9, 2019
package-lock.json 📦 NEW: first commit Sep 22, 2019


Optimizing Your Gatsby.js Website for Production

Building static sites with React.js using Gatsby provides an easy to deploy setup, blazing fast speed, and smooth developer experience. We are all aware of the three fundamentals of website development i.e.,

  • Development
  • Staging
  • Production

JAMstack (JavaScript APIs Markup) is awesome and being the recent trend I am going to explain some of the best ways through which you can optimize your Gatsby.js website before production.

Before we start make sure you have configured a basic Gatsby project setup.

Optimizing Gatsby.js Site

Step #0: Don't have a Gatsby site setup? Read this. (CLICK TO EXPAND!)

In case you are an absolute beginner and this is your first time with Gatsby.js, all you need to do is follow these steps mentioned below. These will help you set up a basic Gatsby project.

  • Install the Gatsby CLI by typing the following command in your terminal
npm install -g gatsby-cli
  • Next, create a new Gatsby.js site through the following.
gatsby new site-name
  • To access your site folder contents type the following.
cd site-name
  • Finally, start the development server to begin building your Gatsby.js site.
gatsby develop

To optimize a Gatsby site make sure you have the following functionalities set up and running:

  • Sitemaps
  • Markdown Pages
  • Embed Videos
  • RSS Feed

🔘Adding Custom Sitemaps

Sitemaps maintains a list of all pages to tell search engines like Google about the organization of your site content. These prompts information about an unindexed page to get it appropriately indexed. They are equally important for new and old sites. But a new website needs sitemap since it is difficult for search engines to find posts and pages of a new site.

You can add custom sitemaps in Gatsby through the [gatsby-plugin-sitemap] plugin.

Inside your terminal type the following to install this plugin.

npm install -- save gatsby-plugin-sitemap

🔘 Adding Markdown Pages

Gatsby plugins can read folders/files with markdown and create pages from them. Is important since writing in markdown is always easy of eyes, user friendly with less errors. So, the process of adding and rendering markdown in Gatsby is that the plugins read files from filesystem. Then it transforms markdown to html and frontmatter to data. Finally, using the create page API you build page components.

All this is done via using the gatsby-source-filesystem plugin.

Inside your terminal type the following to install this plugin.

npm install -- save gatsby-file-sourcesystem

But to make this plugin work you need a pre-requisite plugin i.e., gatsby-transformer-remark which is installed via the following:

npm install -- save gatsby-transformer-remark

🔘 Embedding Videos in Gatsby.js

Different web applications render media files especially videos and GIFs differently. With Gatsby, plugins helps you source videos from a variety of video hosts like YouTube, Vimeo, Dailymotion, etc.

The gatsby-remark-embed-video plugin is a great piece of software for this purpose.

In your terminal type the following for plugin installation:

npm i gatsby-remark-embed-video

Also, this plugin require some other plugins to be installed first. These are:

  • gatsby-remark-responsive-iframe
  • gatsby-transformer-remark
  • gatsby-remark-images

Note that if you’re using the gatsby-remark-responsive-iframe plugin, you have to ensure that the gatsby-remark-embed-video plugin is defined first.

🔘 Adding RSS Feed

When developing a Gatsby.js, website it is important to optimize for RSS Feed since it makes your site content easy to subscribe through feed reader apps.

The gatsby-plugin-feed serves the purpose really well.

Install it via the following command:

npm install -- save gatsby-plugin-feed

It needs the following two plugins as a pre-reqs:

  • gatsby-transformer-remark
  • gatsby-source-filesystem

🔘 Final Build & Deploy

After you have optimized your Gatsby website for the aforementioned functionalities you can run the final build command and then deploy it to some live environment. I am a huge fan of Netlify and host all my JAMstack sites through it.

That's about it! I hope you find this learning material helpful. You can share your feedback by 🌟this repo. For any queries and suggestions PRs are welcomed.


👋 Follow @MaedahBatool on Twitter

You can’t perform that action at this time.