Using GatsbyJS to build a decoupled (Drupal) website (Live demo)
summary
Live demo builds a decoupled site with GatsbyJS plus a Drupal backend, showing actual code, workflows and failures — six Git branches for staged demos, hot reload via gatsby develop, production gatsby build/serve and deploy targets like Netlify or GitHub Pages. Highlights: Gatsby Link prefetching and component-level routing, 4.3 MB → 134 KB image optimization using Gatsby Image, and GraphiQL queries against Drupal JSON:API to generate listing and template pages. Some branches break during the demo but the final static build works.
AI-written summary · about
chapters (17)
- 0:00Start
- 0:10Mark Conroy
- 1:11What a Static Site Generator Is
- 5:07Getting Dynamic Data
- 8:39Link Component
- 10:16Image Component
- 10:58Image Component and Images
- 11:19Images
- 14:30Layout Component
- 15:34Seo Component
- 16:39Creating New Pages
- 19:05Menu Component
- 23:36Styled Component
- 26:04Scale Ratio
- 30:22React Component
- 38:40Graph Ql Query
- 40:33Site Metadata
related talks
38mLIVE DEMO: Using GatsbyJS to build a decoupled (Drupal) website
40mLive preview with Gatsby and decoupled Drupal
56mHow to keep Drupal relevant in the Git-based and API-driven CMS era
55mNo more conflicts: Jamstack that works for developers & business users with Gatsby.js
43mHow We Implemented Decoupled Drupal as Static for a Bank
27mBeyond Static: Dynamic Web Applications with Gatsby
34mWhat is new with Gatsby.js
29mProduction Ready React with GatsbyJS