Keep calm and code your own Gatsby Plugins
summary
Shows how to build three concrete Gatsby plugins: a client-side snow/confetti effect using canvas-confetti hooked to onInitialClientRender, a build-time favicon generator that injects an emoji via Gatsby SSR, and a source plugin that scrapes Crowdcast with ScrapingBee, creates Gatsby nodes, downloads covers via gatsby-plugin-remote-images, and exposes image data for gatsby-image. Includes plugin option validation with Joi, local-plugin workflow then publishing to npm, and a live demo that finally renders dozens of scraped webinars and optimized images after fixing a few build hiccups.
AI-written summary · about
chapters (10)
- 0:00Introduction to Gatsby plugins
- 3:40Why create custom plugins
- 10:42Client-side plugin hooks
- 17:23Build-time plugin hooks
- 25:29Data sourcing plugins
- 36:09Live coding demo
- 40:29Plugin organization benefits
- 41:12Performance impact of plugins
- 44:41Valhalla data layer overview
- 47:50Q&A session
related talks
30mFireside Chat
24mGatsby Launches: A Refresher and Forward Pointer
06mWelcome to GatsbyCamp! Kick-off
29mBuilding custom Figma plugins to unlock new capabilities
34mNavigating the Hype-Driven Frontend Development World Without Going Insane
50mAn Introduction to Gulp
23mFour Real World Solutions Using Gatsby Functions
12mGatsby for Agency Web Teams