Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest...
Transcript of Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest...
![Page 1: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/1.jpg)
Lose Your Head Without Losing Your Sanity
Ronnie Duke
Headless & Decoupled Content Management with Mura & Gatsby.js
![Page 2: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/2.jpg)
Who Am I?• Marketing Operations Manager at DemandRamp• Developer-turned-marketer
![Page 3: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/3.jpg)
Topics for Today’s Webinar• Who are we developing for?• Why Static Site Generators?• Downsides of Static Sites• Headless vs. Decoupled CMS• Why Mura DXP• Demo: Using Mura DXP to add dynamic content to your Gatsby site
![Page 4: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/4.jpg)
Who is this for, anyway?
![Page 5: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/5.jpg)
Marketing Needs:• Update key elements of marketing website
• Content• Images• Meta tags (SEO)
• Create new landing pages• Content Promotion• Webinars• Event Registration
![Page 6: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/6.jpg)
Why static site generators?
![Page 7: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/7.jpg)
Gatsby.js• Static Site Generator using React• Uses latest web technologies –
React.js , Webpack , modern JavaScript and CSS and more
• JAMstack• Rich data plugin ecosystem: Pull data from
headless CMSs, SaaS services, APIs, databases, your file system, and more directly into your pages using GraphQL
![Page 8: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/8.jpg)
Static HTML
Pros:• Simple• Secure• Hosting
CMS Static Generators
Cons:• Not Dynamic• Not Scalable
Pros:• Scalable• Easily managed by
end users
Cons:• Complex development• Resource intensive• Varying programming
languages• Often need front and back
end dev
Pros:• Speed• Security• Common dev (JS)
Cons:• Scalability*• Dynamic Content
![Page 9: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/9.jpg)
Making Static Sites Dynamic
![Page 10: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/10.jpg)
Headless vs Decoupled
![Page 11: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/11.jpg)
Content Back-End UI Code + Plugins
Front-End Templates +
CSS
Web Server Database Website
“Traditional” CMS
![Page 12: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/12.jpg)
Content Back-End UI API
Code + Front-End Templates
Web Server
Headless CMS
![Page 13: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/13.jpg)
Content Back-End UI API
Decoupled CMS
Code + Front-End Templates
Front-End Admin UI
![Page 14: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/14.jpg)
Headless or CaaS
Pros:• Use any front-end framework• Publish to any device (now and
in the future!)• Many SaaS offerings
Decoupled
Cons:• Reinventing the wheel• Disconnected admin UI• Difficult to “preview” content
Pros:All Headless pros plus: • Library of pre-built modules &
templating tools• Additional utilities for querying
content and creating feeds
Cons:• Potentially more than you
need
![Page 15: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/15.jpg)
What to Look For in a Decoupled CMS
![Page 16: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/16.jpg)
CMS Requirements• Robust, structured API (for headless uses)• Extendable content architecture• Doesn’t rely on plugins• Comprehensive library of modules and
templating tools for:• Navigation• Pagination• Related Content• Etc
Bonus Points: • SaaS options• Open Source• Front End editing• Framework
![Page 17: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/17.jpg)
Beware of “legacy” CMS’s
![Page 18: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/18.jpg)
Issues with “legacy” CMS’s• Strict tie in with front-end and back end• Plugins• Not built using MVC methodologies
![Page 19: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/19.jpg)
Benefits of Mura DXP• Remote Front-End Editing• Robust library of content objects• Components• Content Collections• Content staging & versioning• Native extendable content models
• Tools for user management & authentication
• Content Personalization (upgrade)• Docker ready• SaaS (coming soon)
![Page 20: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/20.jpg)
Okay, but what’s in it for me?
![Page 21: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/21.jpg)
Developer Benefits:• Allows you to focus on more important things• Give users the freedom to create what they
need while also giving boundaries so they don’t go off brand.
![Page 22: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/22.jpg)
Demo: Using Mura DXP to add dynamic
content to your Gatsby site
![Page 23: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/23.jpg)
Questions?
![Page 24: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/24.jpg)
Resources:Download Mura CMS: https://www.getmura.com/downloads/
Mura Remote Theme: https://bit.ly/2SOnwRl
gatsby-source-mura: https://bit.ly/2zzHCpo
Gatsby Mura Example Site: https://bit.ly/2F4xQl7
Mura SaaS: https://bit.ly/2qwihIM
Creating a Gatsby Source Plugin: https://bit.ly/2JGs3kC
Using Gatsby for a web app with dynamic content — A case study: https://bit.ly/2QmKw8m
![Page 25: Lose Your Head Without Losing Your Sanity · • Static Site Generator using React • Uses latest web technologies – React.js , Webpack , modern JavaScript and CSS and more •](https://reader034.fdocuments.net/reader034/viewer/2022050521/5fa458a553c13b66f722edc8/html5/thumbnails/25.jpg)
Thank You!