OPTIMIZING YOUR GATSBY SITE FOR PRODUCTION...I am a WordPress Core Contributor, Open-source...
Transcript of OPTIMIZING YOUR GATSBY SITE FOR PRODUCTION...I am a WordPress Core Contributor, Open-source...
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 …
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"