Power Up Your JAMstack
#Love2yourEX
Give ♥ to your EX
EX =
Editor Experience
About Me
Our Vision
A world where you NEVER have to rebuild your website from scratch!
We Believe
EX
DX
UX
- User Experience
- Editor Experience
- Developer Experience
Success Depends on:
Website, No CMS
| EX | UX | DX |
|---|---|---|
| 🤬 | 😎 | 😃 |
=😫
Website, Traditional CMS
Wordpress
Drupal
Sitecore
| EX | UX | DX |
|---|---|---|
| 🙂 | 😐 | 😒 |
=🤔
PHP
ASP.NET
Website, Headless CMS + JAMstack
| EX | UX | DX |
|---|---|---|
| 😕 | 🤩 | 😁 |
=😔
Contentful
Gatsby
Next.js
Prismic
What's Wrong with the EX in JAMstack?
Top 5 Editor Complaints
- 👁🗨 Can't preview content updates in real-time
- 🚫 Limited control over creating, deleting and redirecting pages
- 📄 Limited control over what content is on each page
- 😖 Inconsistent and in-efficient content workflows
- Publishing content takes too long, don't understand concepts of builds
🤼 They feel powerless...
We can do Better!
Here's How...
- 👀 Give them a Preview environment
- 🎁 Give the gift of Page Management
- 🚀Publish content Faster
Preview with:
Next.js + Agility CMS + Vercel +
NAVstack? 🦸♀️
What is Next.js?
What is Vercel?
What is Agility CMS?
Preview?? - Wait isn't this a static site?
NAVstack Preview
- 👥 Editor clicks Preview from within the CMS
- 🍪 A preview cookie is set, instructing Vercel to run each page route at runtime/real-time (node js)
- 😎 Editor can see content they are working on prior to publishing
/some-page-request
Is Preview?
Yes, run route as serverless function (runtime)
No, return cached/generated HTML
How it Works
Preview Setup
-
👩💻 Signup for Agility CMS + Get the starter site code
- Deploy to Vercel
-
👀 Set the Preview domain in Agility CMS
- ✅ Done!
Preview Demo
What is Page Management?
What Isn't Page Management...
When devs dictate pages:
What Isn't Page Management...
When devs dictate what is on a page:
💬 You can only build certain types of pages, with pre-defined layouts
Why?
Editors feel constrained...
Put yourself in their shoes 👞...
💡 Same reason WHY devs don't like Traditional CMS 🤮
Still not Convinced?
This will be you...
Responding to Change Requests
🛑 Stop Building Websites.
Build Tools.
+
👨🏿👱🏻♀️
Editors
=
Components
Page
How Page Management Works with Content Modelling
Demo
NAVstack 🚀Publishing
- 👥 Editor clicks Publish from within the CMS
- 👤User navigates to the page they just published in their browser
- 🔁 Vercel will re-generate that page HTML in the background
- ✅ The next user to hit that same page will get the updated content
Look Ma! No builds 👋
Publishing Demo
Agility CMS Next.js Starter
- Connected to a sample Agility CMS instance to get content and pages
- Uses the getStaticProps function from Next.js to allow for full static site generation
- Supports full page management
- Supports preview mode
- Uses revalidate tag with Vercel to enable incremental static builds
Build Modules, not Websites.👍
Learn More 🎓
- Sign up for a free account
- Join the Agility CMS Slack Channel
- Follow @AgilityCMS
- Follow @jameskvidler