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.

npm install -g gatsby-cli

gatsby new site-name

cd site-name

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

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

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

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.

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

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.

🔘 SLIDES: https://Maedah.dev/WDSlidesSep19

👋 Follow @MaedahBatool on Twitter →