This document discusses optimizing Gatsby sites for production. It introduces Gatsby and its phases of development including development, staging, and production. It then discusses several plugins that can be used to optimize Gatsby sites including plugins for adding sitemaps to improve search engine indexing, embedding videos and images, supporting markdown pages, and generating RSS feeds to make site content easily subscribable. For each plugin, it provides the plugin name, how to install it, and what it is used for.

1. by Maedah Batool
OPTIMIZING YOUR GATSBY
SITE FOR PRODUCTION

2. I am a WordPress Core Contributor, Open-source Journalist, Developer
and a teacher. Maintainer of #GirlsWhoCode and #ReactJSLadies local
meetup chapters.
While working as a Content Strategist I’m a featured/published author
at Scotch.io, TorqueMag, Envato Tuts+, SitePoint, Creative Market, etc.
Also one of the Marketing Representatives at the official Make
#WordPressMarketingTeam.
I created a tech-training startup called FinkTanks through which I’ve
taught 5,500+ girls how to code with WordPress.
I collaborate with the Nodejs Foundation Community Committee on
the Outreach Initiative.
You can find me on Twitter sharing dev tips @MaedahBatool →
OPEN-SOURCE DEVELOPER ADVOCATE & COMMUNITY PROGRAM MANAGER
👋 HELLO
MAEDAH BATOOL

3. FOLLOW ME ON TWITTER
@MaedahBatool
" #GirlDevMinute Series
🧐 Development tips, tricks, etc.
👀 Find rants, jokes, and whatnotAnd on GitHub, MaedahBatool.com, LinkedIn …

4. 🤔
BASICS
• Development
• Staging
• Production
PHASES OF
WEBSITE DEVELOPMENT

5. React.js · Vue.js · Angular · Next.js · Gatsby.js
OPTIMIZING
GATSBY.JS SITES
FOR PRODUCTION

6. Gatsby is a free and open-source
React.js based framework that
helps developers build blazing
fast websites and apps.
THE
GATSBY.JS

7. 🤔
RECAP
• TALK: https://Maedah.dev/WordSeshMay2019
• TUTORIAL: https://Maedah.dev/wpgatsbyjs
INTEGRATING
GATSBY + WORDPRESS

8. You have to ensure that search engines like Google can
understand your site's architecture and index it intelligently.
That’s what sitemaps do.
SITEMAPS
Making your site content visually appealing is quite critical. Media
elements like images, GIFs and videos help you in this respect.
But rendering these is a difficult thing to do.
VIDEOS
Writing web pages in markdown is a super easy programming practice.
If your site supports and reads through folders which have .md files,
that’s awesome.
MARKDOWN
GATSBY.JS
OPTIMIZATION FOR SITE PRODUCTION

9. Final build for production and deploying on services
like Netlify.
Build & Deploy
Generates a .xml file making your site content available
In subscribable format.
RSS feed
GATSBY.JS
OPTIMIZATION FOR SITE PRODUCTION

10. PLUGIN:
SITEMAPS
GATSBY-PLUGIN-SITEMAP

11. Main Plugin:
Install:
DETAILS ABOUT SITEMAPS IN GATSBY.JS SITE
SITE INFORMATION
Maintains a list of all pages to tell search engines like Google
about the organization of your site content.
INDEXING
Sitemaps tell the search engines about an unindexed
page to get it appropriately indexed.
EQUALLY IMPORTANT
For new and old sites. But new website needs a sitemap
since it is difficult for search engines to find posts and pages
of a new site.
ADDING
CUSTOM SITEMAPS

12. MARKDOWN
PAGES
PLUGIN: GATSBY-SOURCE-FILESYSTEM

13. Main Plugin:
Install:
Pre-Req. Plugin:
Install:
DETAILS ABOUT MARKDOWN IN GATSBY.JS SITE
READ .md Files
Gatsby plugins can read folders/files with markdown
and create pages from them.
SUPPORT FOR MARKDOWN
Is important since writing in markdown is always
easy of eyes, user friendly with less errors.
PROCESS
Reads files from filesystem. Transforms markdown to html
and frontmatter to data. Create page components.
ADDING
MARKDOWN PAGES

14. EMBEDDING
VIDEOS
PLUGIN: GATSBY-REMARK-EMBED-VIDEO

15. Main Plugin:
Install:
Pre-Req. Plugins:
•
DETAILS ABOUT EMBEDDING VIDEOS IN GATSBY.JS SITE
MEDIA FILES
Different web applications render media files especially
videos and GIFs differently.
EMBED IN MARKDOWN
Plugins helps you source videos from a variety of video
hosts like YouTube, Vimeo, Dailymotion, etc.
IMPORTANT ALERT
If you’re using the gatsby-remark-responsive-iframe plugin,
you have to ensure that the gatsby-remark-embed-video
plugin is defined first.
EMBEDDING
VIDEOS

16. PLUGIN:
RSS Feed
GATSBY-PLUGIN-FEED

17. Main Plugin:
Install:
Pre-Req. Plugins:
DETAILS ABOUT RSS FEED IN GATSBY.JS SITE
SUBSCRIBABLE CONTENT
Makes your site content easy to subscribe
through feed reader apps.
IMPLEMENTATION
Runs only in production builds and generates
a rss.xml file in the public folder.
CUSTOMIZE & CONFIGURE
Easy to customise solution and options with
Markdown.
ADDING
RSS Feed

18. FOLLOW ME ON TWITTER
@MaedahBatool
/MaedahBatool/WordSesh-Sept-2019
https://Maedah.dev/WDSlidesSep19
And on GitHub, MaedahBatool.com, LinkedIn …
QUESTIONS
"