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 …
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
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
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
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
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
"
