Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordSesh EMEA 2019

92 views

Published on

My WordSesh talk about "Optimizing Your Gatsby.js Site for Production".

Published in: Technology
  • Be the first to comment

WordSesh EMEA 2019

  1. 1. by Maedah Batool OPTIMIZING YOUR GATSBY SITE FOR PRODUCTION
  2. 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. 3. FOLLOW ME ON TWITTER @MaedahBatool " #GirlDevMinute Series 🧐 Development tips, tricks, etc. 👀 Find rants, jokes, and whatnotAnd on GitHub, MaedahBatool.com, LinkedIn …
  4. 4. 🤔 
 BASICS • Development • Staging • Production PHASES OF
 WEBSITE DEVELOPMENT
  5. 5. React.js · Vue.js · Angular · Next.js · Gatsby.js OPTIMIZING GATSBY.JS SITES FOR PRODUCTION
  6. 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. 7. 🤔 
 RECAP • TALK: https://Maedah.dev/WordSeshMay2019 • TUTORIAL: https://Maedah.dev/wpgatsbyjs INTEGRATING
 GATSBY + WORDPRESS
  8. 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. 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. 10. PLUGIN: SITEMAPS GATSBY-PLUGIN-SITEMAP
  11. 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. 12. MARKDOWN PAGES PLUGIN: GATSBY-SOURCE-FILESYSTEM
  13. 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. 14. EMBEDDING VIDEOS PLUGIN: GATSBY-REMARK-EMBED-VIDEO
  15. 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. 16. PLUGIN: RSS Feed GATSBY-PLUGIN-FEED
  17. 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. 18. FOLLOW ME ON TWITTER @MaedahBatool /MaedahBatool/WordSesh-Sept-2019 https://Maedah.dev/WDSlidesSep19 And on GitHub, MaedahBatool.com, LinkedIn … QUESTIONS "

×