by Maedah Batool

OPTIMIZING YOUR GATSBY SITE FOR PRODUCTION

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

👋 HELLOMAEDAH BATOOL

FOLLOW ME ON TWITTER

@MaedahBatool" #GirlDevMinute Series

🧐 Development tips, tricks, etc.

👀 Find rants, jokes, and whatnotAnd on GitHub, MaedahBatool.com, LinkedIn …

🤔 BASICS

• Development

• Staging

• Production

PHASES OF WEBSITE DEVELOPMENT

React.js · Vue.js · Angular · Next.js · Gatsby.js

OPTIMIZING

GATSBY.JS SITES FOR PRODUCTION

Gatsby is a free and open-source

React.js based framework that

helps developers build blazing

fast websites and apps.

THE

GATSBY.JS

🤔 RECAP

• TALK: https://Maedah.dev/WordSeshMay2019

• TUTORIAL: https://Maedah.dev/wpgatsbyjs

INTEGRATINGGATSBY + WORDPRESS

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.

MARKDOWNGATSBY.JSOPTIMIZATION FOR SITE PRODUCTION

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.JSOPTIMIZATION FOR SITE PRODUCTION

PLUGIN:

SITEMAPS GATSBY-PLUGIN-SITEMAP

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.

ADDINGCUSTOM SITEMAPS

MARKDOWN PAGESPLUGIN: GATSBY-SOURCE-FILESYSTEM

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.

ADDINGMARKDOWN PAGES

EMBEDDING VIDEOSPLUGIN: GATSBY-REMARK-EMBED-VIDEO

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.

EMBEDDINGVIDEOS

PLUGIN:

RSS Feed GATSBY-PLUGIN-FEED

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.

ADDINGRSS Feed

FOLLOW ME ON TWITTER

@MaedahBatool/MaedahBatool/WordSesh-Sept-2019

https://Maedah.dev/WDSlidesSep19And on GitHub, MaedahBatool.com, LinkedIn …

QUESTIONS"