Lose Your Head Without Losing Your Sanity
Ronnie Duke
Headless & Decoupled Content Management with Mura & Gatsby.js
Who Am I?• Marketing Operations Manager at DemandRamp• Developer-turned-marketer
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
Who is this for, anyway?
Marketing Needs:• Update key elements of marketing website
• Content• Images• Meta tags (SEO)
• Create new landing pages• Content Promotion• Webinars• Event Registration
Why static site generators?
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
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
Making Static Sites Dynamic
Headless vs Decoupled
Content Back-End UI Code + Plugins
Front-End Templates +
CSS
Web Server Database Website
“Traditional” CMS
Content Back-End UI API
Code + Front-End Templates
Web Server
Headless CMS
Content Back-End UI API
Decoupled CMS
Code + Front-End Templates
Front-End Admin UI
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
What to Look For in a Decoupled CMS
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
Beware of “legacy” CMS’s
Issues with “legacy” CMS’s• Strict tie in with front-end and back end• Plugins• Not built using MVC methodologies
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)
Okay, but what’s in it for me?
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.
Demo: Using Mura DXP to add dynamic
content to your Gatsby site
Questions?
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
Thank You!