When you’re building a website backed by a headless CMS, a key part of your website’s success is the day-to-day experience of content editors.
One thing content editors working in headless CMSs often request is a “preview content” workflow that works as well as WordPress – where you can just click a button and see whether your content, on the page, looks like you’d expect.
- Register Today! Join us for GatsbyConf on March 2nd and 3rd, 2022
We built CMS Preview into Gatsby Cloud to recreate the WordPress preview workflow. We believe it’s a far better experience than you’ll find in other Jamstack build & hosting platforms.
How does it work? Think about Gatsby Cloud’s CMS Preview as an automatic staging environment for draft content. When content editors can easily review changes, they are more productive.
Testing changes: Preview or Publish?
The first thing we should ask is: do you need a content staging environment at all? Staging environments are one way to test changes. But there are others. For example: simply publish draft changes, wait for your site to re-build, and if they don’t look right, quickly adjust them.
In fact, this is a good option for many content changes!
Content editors often make small, easily-reversible changes, like fixing typos, on little-visited sections of the website. For these changes, it may be easier to simply make the change, wait for it to publish so you can verify it worked as anticipated, and move on to your next task.
How important is CMS Preview for your team?
Most teams with a Gatsby website pulling from a headless CMS find CMS Preview to be an important feature. For some teams, it’s absolutely essential.
Here are three categories of examples we’ve seen where CMS Preview can be essential.
First, websites with a number of less-experienced CMS users. One common example of this is university websites, which are generally designed to allow department or program administrators to own their section of the web site. The primary challenge in keeping content high-quality, accurate, and up-to-date is helping these administrators – whose primary job is in higher education, rather than content per se – feel comfortable with the system. Tools like Content Preview that increase CMS ease-of-use are critical.
Second, websites producing large volumes of content. Consider an e-commerce company where one of marketing’s key initiatives is to run an SEO campaign. Tools like Preview that improve content velocity have a direct impact on how well marketing is able to achieve their goals.
Third, websites with frequent edits on high-traffic pages. News websites often have the bulk of their traffic on stories published in the last day or week. These stories can be frequently updated with new developments, while receiving high amounts of traffic. Tools like Preview that allow editors to quickly review and publish changes enable news sites to keep their communities up-to-date.
Why Gatsby Cloud Preview?
As Jamstack build and hosting platforms have emerged over the last few years, most have added some level of preview capability. However, many platforms are designed primarily to preview code changes, rather than content changes.
We launched content preview three years ago specifically because we wanted to optimize the Gatsby content experience. Here are some of the features we built into Gatsby Cloud Preview.
Quick Connect. Quick Connect streamlines the process of connecting your CMS to Gatsby Cloud; auto-entering your space ID, API key, and correctly configuring webhooks.
In-CMS Preview Widgets. In addition, for CMSs like Contentful and Dato that support custom widgets within their UI, Quick Connect will auto-install and configure a Gatsby Cloud widget letting users easily access their preview environment from within the CMS.
Automatically provisioned staging environment. The way content preview works is through having a staging version of your website; while your production website consumes published content from your CMS’s API, the staging environment consumes draft content from your CMSs API.
Staging environments are valuable, but often complex to maintain and to keep in sync with production. So whereas other build & deploy platforms require you to manually create and maintain a staging environment for each site you want, in Gatsby Cloud we auto-provision a staging environment for each of your sites.
Better feedback loops while editing content. Gatsby Cloud preview environments have two unique features helping create better feedback loops for content editors: Content Sync and Preview Status Indicator.
Content Sync launched in November as a feature on in-CMS widgets in Contentful, WordPress, Dato, Sanity, and Drupal. When your content editor presses the Open Preview button in the widget, it takes them directly to the page their content is on. For other platforms with manually configured staging environment, content editors have to start at the homepage and navigate to the correct page, which interrupts the content editing workflow).
Once editors are on the right page, they sometimes wonder whether their updates have gone live yet (and didn’t work as expected) or whether the update is still processing. Resolving this confusion is why we built the Preview Status Indicator, which is a small overlay showing content editors the status of their update.
Faster preview speed. We’ve optimized Gatsby Cloud for build speed, and perhaps nowhere is this more obvious than in preview build speed. We’ve worked with customers whose content preview took minutes to update on other build & deploy platforms – but seconds on Gatsby Cloud.
A platform optimized for the content web. About 40% of all active Gatsby sites, and over 80% of Gatsby Cloud customers, have a CMS. As a company and an open-source technology, we’re very focused on improving the experience of building with a headless CMS. Gatsby is the fastest frontend for the headless web – and Gatsby Cloud is the best way to preview, deploy and host your Gatsby sites.
Last month, around 4,000 content editors used Gatsby Cloud to preview changes on their Gatsby website. And we’re working on making the experience even better – making previews even faster, and adding support for “massively multiplayer” preview environments that need to support 100+ editors.
Conclusion
If you’re using Gatsby with a headless CMS, and you’re not already using it, test out our CMS Preview functionality. Gatsby Cloud’s CMS Preview auto-configures your in-CMS widget, eliminates the need to set up a staging site, and has 5X or 10X faster previews than other platforms – empowering content editors to be more productive.
For more information, browse the Gatsby Cloud documentation for CMS Preview. Or sign up for Gatsby Cloud to try out CMS Preview.