lose your head without losing your sanity · • static site generator using react • uses latest...

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!