Recommended
Recommended
More Related Content
Similar to Optimizing Gatsby.js Sites For Production
Similar to Optimizing Gatsby.js Sites For Production (20)
Recently uploaded
Recently uploaded (20)
Optimizing Gatsby.js Sites For Production
- 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
- 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 "