DEV Community: Joel Varty

Learning Next.js? Want to up your career with Headless CMS? Start here.

Joel Varty — Mon, 03 Feb 2025 21:50:58 +0000

If you're looking to learn Next.js and how to integrate with Headless CMS, check out my new video series. First video dropped today!

Future videos will tackle Component creation, preview mode, redirects, search, AI, and more!

Eleventy + Agility CMS Starter Blog

Joel Varty — Tue, 10 Nov 2020 19:38:47 +0000

I recently built a sample Eleventy starter site that uses Agility CMS and aims to be a foundation for building fully static sites using 11ty and Agility CMS.

Getting Started

Agility CMS Account

The first thing you need is a free Agility CMS account. You can get that here 👋.
Since this 11ty starter is so ✨new✨, we don't have an Official Starter package for it, so for now, we're linking to our NextJS starter, which happens to have the right demo content for this 🧐.

Clone the Repo

Now that you've got the content, you need the code!

Go ahead and clone the repo from github: 👇

https://github.com/agility/agilitycms-eleventy-starter-2020.git

Install Dependencies

npm install or yarn install

Normally, this will create 9,999,999,999 files in your node_modules folder. Luckily, we're only gonna create 9,999,999 for this small demo.

YAY! 👏👏👏

Environment Variables

You care about the environment don't you? 🌲🌳🌴🎋

Either way, you're gonna need to grab a few variables from your Agility CMS account. Head over to the API Keys page in Agility CMS (https://manager.agilitycms.com/settings/apikeys) and grab your GUID, and API Keys for Preview and Fetch.

🗄🗄🗄 Copy those into your .env file (rename it from .env.example)

Take Command of the `cmd` line

We've hooked up some neat commands to make your life easy.

🔥 Local 🔥 Development 🔥

If you want to run the project locally in preview mode, with a hot-reloading server, do this:

npm start or yarn start

Build It and They Will Browse

This is the entire reason for being for 11ty.

Preview Mode

npm run dev or yarn dev

Live or Production Mode

npm run build or yarn build

Wipe The Content 🧽

This example is using the Agility CMS Sync SDK. That content is cached in the node_modules folder. If you want to clear all that out, use this.

npm run cms-clear or yarn run cms-clear

The next time you run the project, the content will be pulled down again.

How this thing works 🤓

This projects uses nunjucks templates, and all the magic happens in the pages folder.
Open that thing up and take a peek.

Pages Pages Pages

Agility CMS has the concept of pages and a sitemap. Those obejects are made available in the _data/pages.js data array.

Each page is rendered via the index.njk file, which just splits each page object into its own, er... page :). It also sets the permalink property to the path of the page object. Voila! Our Agility CMS pages are magically routed and rendered.

Layout -> Template -> Modules

Now let's take a look at how the templating works.

Each page uses the layout.njk template for the main html output.

Then, based on the page.templateFileName property, we load a .njk template file dynamically. In this case we only have the main-template.njk file.

In that template, we set the zoneName parameter and render the modules in the MainContentZone zone.

Each module zone has one or more modules in there, which are in turn rendered by a .njk file. I've put them in the /modules folder, and we've only got a few that are configured in this Agility CMS instance.

Hopefully, you can use the examples in this project to create your own modules.

A well-thought-out project with useful modules can empower your content editors with a set of building blocks for creating and updates the pages of your website.

Collections

This project is a blog template, so we have set of pages that are rendered based on the Posts list. Most of that is configured as a Dynamic Page in Agility CMS, so you don't have to do much to implement it, but you'll notice on the modules/postdetails.njk file that we use a property called page.dynamicPageItem. That object represents the Blog Post that we are currently rendering.

CSS + JavaScript

Tailwind CSS

To keep things super simple, this project makes use of free and amazing TailwindUI components, and it's all used via a dead simple https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css file referenced in the header. No post-css or anything, at least not yet.

Alpine.js

We've pulled in a global reference to Alpine.js in the layout template, too.
It's being used in a couple places to hide/show the mobile menu and the preview bar.

Want to learn more?

Amazing that you've gotten this far! Keep learning with me (Joel Varty) or the rest of the Agility CMS team.

Join us on Slack to answer questions and provide feedback directly to the team.

Previewing Content in Agility CMS

Joel Varty — Tue, 27 Oct 2020 14:28:34 +0000

If there’s a universal truth about building websites, it’s that you can’t trust things will look right at the first try. Even the most meticulous developer can make a mistake. Now imagine what could happen if you enter non-technical content editors into the equation. The chances of something breaking can suddenly increase.

That’s where content preview comes to the rescue, giving editors an instance where they can preview their work before it’s live. It’s the editors’ safety net; it provides them with the visibility they need to fix issues before visitors spot them.

Keep reading!

How Agility CMS Modules Work

Joel Varty — Tue, 27 Oct 2020 14:26:59 +0000

‘Module’ is one of those words that can have different meanings in the software world. In the content management system space, a module is a collection of code files that enables developers to add features to your website.

Modules allow developers to install extra capabilities to the digital experiences you create, augmenting the functionality of your installation. They also allow you to customize your deployment and give your website or app.

Modules are a fundamental part of creating a digital experience in Agility CMS. In this series of Agility Sneak Peeks, we will show some of our features and explain how you can use them.

Let’s take a closer look at how modules work and learn how developers and marketers can leverage their functionality to create memorable digital experiences.

Keep reading!

Which is Better: a Hybrid, Traditional, or Headless CMS

Joel Varty — Fri, 09 Oct 2020 13:27:23 +0000

Which type of CMS is best for your company?

It’s no secret that choosing the right CMS is critical to maximizing your bottom line and staying current. Still, according to W3 Techs, 40% of the websites out there aren’t leveraging the power of a top-of-the-line CMS, and while not every business needs a CMS, most companies looking to scale will need one eventually.

When it comes to choosing a content management system, it’s a true balancing act between solving your biggest business challenges and catering to the multiple stakeholders who create your content. The decision-making process can feel confusing and overwhelming, especially since a silver bullet solution doesn’t actually exist.

Each CMS has its own benefits and disadvantages, and what might work for one company might not work for yours, which poses the question “what is the right CMS for my business?”.

Keep reading over at the Agility CMS blog

Launching a JAMstack Website With NEXT.JS + Vercel

Joel Varty — Tue, 15 Sep 2020 20:37:49 +0000

Vercel, one of our partners, makes it easy for JAMstack developers to build static websites in Agility CMS. In this article, we’ll recap one of our latest webinars and explain how Vercel and Next.js give extra agility to Agility CMS.

What's really amazing is that you can do this and launch your site for free with Agility CMS and Vercel!

Keep reading over at the Agility CMS blog

JAMstack-Ready CMS: The Roadblocks

Joel Varty — Mon, 31 Aug 2020 14:28:49 +0000

In my experience, developers find JAMstack development easy to understand and implement. JAMstack sites are faster than most traditional server-rendered sites because they’re static and delivered from a CDN. They’re also more secure because there’s nothing to compromise and development can be optimized.

The JAMstack also enables developers to stay nimble. In the JAMstack ecosystem, each tool, framework, and API works in sync with the other, which means that you don’t have to focus on juggling multiple technologies when building a site. Also, JAMstack bridges the gap between static and dynamic websites while keeping the advantages of static websites.

However, it seems that despite the advantages JAMstack brings, some CMS platforms, whether they be traditional, hybrid, or headless, still aren’t ready to adopt the JAMstack way.

Let’s see the roadblocks CMS platforms face when it comes to implementing JAMstack.

Keep reading over at the Agility CMS blog: https://agilitycms.com/resources/posts/jamstack-ready-cms

The Meteoric Rise of Jamstack

Joel Varty — Thu, 13 Aug 2020 13:03:44 +0000

Stacking technologies isn’t new. Still, in the world of software development, stacking has become a necessity to shorten times and standardize development because when you mix the right set of technologies, you get the best outcome possible. For web developers, that usually means faster websites with better user experiences.

Here’s where the Jamstack approach can help developers. Jamstack represents a new way of developing software based on build-time and client-side rendering, that doesn’t depend on web servers for outputting websites and apps.

Interested? Keep reading over at the Agility CMS blog

The Genius of NextJS and Gatsby as Static Site Generators

Joel Varty — Thu, 30 Jul 2020 19:32:20 +0000

At Agility CMS we've chosen to create starter sites for both NextJS and Gatsby. Both are static site generators built on top of React, but they take a very different approach to how they actually generate the static html/js/css for a website.
Or do they?

agility / agilitycms-nextjs-starter-2020

A starter NextJS website using Agility CMS, Tailwinds CSS, and several pre-built components.

agility / agility-gatsby-starter

A sample GatsbyJS website using the Agility CMS Gatsby source plugin

They both actually do one thing in a very similar way, and I think it's just genius: they give you a "hook" to specify the JSON data that will be used to generate the output for the site. This ends up being the "props" variable that gets passed to your React components. This data is used both during the build process on the server and also ON THE CLIENT SIDE.

That's right - your React code is executed during BUILD time and also in the BROWSER, so the execution of your code can happen in 2 different contexts. That's a little weird, at first, but if you're smart about it, you can make this work for you.

First of all, having that JSON data available is what makes NextJS and Gatsby pretty magical. It means that, as a framework on top of React, they can route pages after the first page-load without doing a full page reload - all that's needed is that extra JSON and whatever extra dependencies are on the new page.

You can see this on pretty much any Gatsby or NextJS site - if the developers have used the <Link> component correctly.

One area where I saw a huge performance improvement was on a listing page. Check out the blog listing page here: https://agilitycms.com/resources/posts

Originally, this page was rendered on the front-end using this module: which had to do calls back to the server every time more posts needed to be loaded.

loadMore(skip, take) {

        var url = `/Listing/Posts?skip=${skip}&take=${take}`

        fetch(url)
            .then(response => response.json())
            .then(data => {

                let noMore = false;
                if (!data.posts || !data.posts.length || data.posts.length == 0) {
                    noMore = true;
                }

                this.setState(prevState => ({
                    posts: prevState.posts.concat(data.posts),
                    loadingMore: false,
                    skip: data.skip,
                    take: data.take,
                    noMoreData: noMore
                }));


            }).catch(err => {
                console.warn("An error occurred while loading more data...", err);
                this.setState(prevState => ({
                    loadingMore: false,
                    noMoreData: true
                }));
            });

        return false;
    }

Gatsby

With Gatsby, we were able to get all the data we needed for loading posts at BUILD time with a <StaticQuery> and then use an <InfiniteScroll> component to render that on the client-side.

The big win here? No calls back to the server!

Here's the main component that loads the list of posts: https://github.com/agility/agility-website-gatsby/blob/master/src/modules/PostListing.js

export default props => (
    <StaticQuery
        query={graphql`
        query PostListingQuery {
            allAgilityBlogPost(filter: {properties: {referenceName: {eq: "blogposts"}}}, sort: {fields: customFields___date, order: DESC}) {
              nodes {
                contentID
                customFields {
                  date(formatString: "MMMM D, YYYY")
                  excerpt
                  title
                  uRL
                  postImage {
                    url
                    label
                  }
                }

              }
            }
          }
        `}
        render={queryData => {

            let posts = queryData.allAgilityBlogPost.nodes;

            const viewModel = {
                item: props.item,
                posts: posts
            }
            return (
                <ReusablePostListing {...viewModel} />
            );
        }}
    />
)

Here's the reusable component that actually renders out the posts with the InfiniteScroll component: https://github.com/agility/agility-website-gatsby/blob/master/src/components/reusable-post-listing.jsx

loadMorePosts(skip, take) {

        let noMore = false;

        let thesePosts = [];
        if (skip >= this.allPosts.length) {
            noMore = true;
        } else {
            thesePosts = this.allPosts.slice(skip, skip + take)
        }

        this.setState(prevState => ({
            posts: prevState.posts.concat(thesePosts),
            loadingMore: false,
            skip: skip,
            noMoreData: noMore
        }));        
    }

NextJS

The same logic holds for NextJS websites built with Agility CMS.

Check out this Post Listing example from the starter site. https://github.com/agility/agilitycms-nextjs-starter-2020/blob/master/components/agility-modules/PostsListing.js

While Gatsby has a component that renders data from GraphQL, the Agility CMS NextJS project uses a "getCustomInitialProps" method that allows you to do any data fetches at BUILD time, and then NextJS provides that JSON data to the component at render time and on the client for use.

PostsListing.getCustomInitialProps = async function ({agility, channelName, languageCode}) {
    const api = agility;

    //get our posts
    let rawPosts = await api.getContentList({ referenceName: 'posts', languageCode });

    return {
        posts
    }
}

Note the use of the component in both examples.

This is all made possible by 2 amazing static site generation frameworks that are making it easier to make a faster web.

Get Started Now

Get started on a free Agility CMS account today to test out Gatsby or NextJS with starter solutions pre-configured and ready to go. Sign up here.

It's time to give some love to your ex

Joel Varty — Mon, 13 Jul 2020 18:11:52 +0000

I'm talking EXPERIENCE, btw, for both developers and editors. What did you think we were talking about? ;)

Join our very own James Vidler + Josh Comeau from Gatsby in this live webinar!

WHAT WILL YOU LEARN?

Why the Editor Experience is important
What Editors don't like
How to address Editor issues

WHO SHOULD ATTEND:

You are into JAMstack, but wary of how this changes the Editor Experience
You are using Gatsby and you want to learn about Gatsby Cloud/Preview
You want to learn about the power of Agility CMS Page Management

Host: James Vidler, VP of Product Agility CMS. VR game enthusiast. Dog person.

Guest: Josh Comeau. Staff software engineer at Gatsby Inc. Instructor at Concordia Bootcamps. Beat Saberer. Cat person. :)

Check out Josh's blog here!

What is a Headless CMS

Joel Varty — Thu, 09 Jul 2020 16:57:56 +0000

Every forward-thinking brand, both large and small, is seeking out a headless CMS. Or a decoupled CMS. Or a hybrid CMS. Or, simply a CMS with APIs. But they’re all the same, right?

Wrong.

As we venture into the 2020s, brands need to ensure that their next CMS choice is the right one. Consumers are bouncing from device to device, channel to channel, brand to brand. 92% of marketers report that their company views content as a business asset – and let’s face it, when you’ve got good content that drives traffic, it is definitely something your business cannot afford to lose.

By the time you’re finished reading this guide, you will be able to understand what a headless CMS is, its benefits, the different types of architectures, and plenty more.

Headless CMS Explained in 1 Minute

With a plethora of definitions out there, let’s first start by defining the term headless CMS.

Contrary to a traditional CMS, a headless CMS is entirely decoupled from the presentation layer or frontend, which referred to as the “head”, while the backend is your content repository and content management system, known as the “body”.

When you separate your content repository “body” from its presentation layer “head,” it becomes a headless CMS. What truly makes a headless CMS better than a traditional CMS is its content-first approach with full APIs to access and display content in any way desired. With this approach, a headless CMS enables you to author your content through the RESTful API and deliver that content wherever you need it — not just to a templated website or application.

Going Deeper (And Going Decoupled)

In its simplest form, a headless CMS is a content repository which can deliver content to any front-end or device via APIs. If you want to display your content on a web page, a native mobile app or in some other digital format a headless CMS doesn’t restrict you the way that a traditional CMS might. Thus in a broader sense, a headless CMS facilitates an omnichannel experience.

An omnichannel experience provides customers with an integrated and aligned approach to marketing, customer service and sales. When a customer interacts with a brand through one digital medium such as via a mobile device, they want that same experience in another digital medium such as via a desktop, tablet or another smart device. Headless CMSs provide the backend necessary for omnichannel content management. It provides the admin user interface where content is created, edited and published and a RESTFUL API so that the content can be delivered where necessary, something that is crucial for the multi-touchpoint customer journeys of today.

A headless CMS also removes other restrictions such as the technology stack that developers must learn. Rather than needing to familiarize themselves with the stack for a new CMS, developers can focus on the existing frontend. Headless CMSes can integrate with current technology stacks, making them easier to incorporate when compared to other types of CMSes. Content is treated as data in a headless CMS, so it reduces the need for page rendering. For brands dealing with multiple channels, this is especially useful as it means that content only needs to be added once and can be sent to required channels through the CMS.

Non-developers especially find headless CMS platforms to be useful. Rather than requiring a developer to make sure that content is displayed appropriately across channels, marketers, editors and less technical personnel can create and manage content independently.

Traditional CMS vs Pure Headless CMS vs Decoupled CMS (A.K.A., Hybrid CMS)

The traditional CMS allows users to create, edit and publish content. It provides both the backend for managing and storing data and content as well as the front-end, usually with a WYSIWYG format for displaying the content. Traditional CMS platforms had the goal of posting content on one platform, such as a web page.

A traditional CMS tightly couples your frontend with your backend (and all your content and assets). Content is created, managed, and stored—along with all of your digital assets—on the site’s back end. The back end is also where website design and customization applications are stored. The content management back end and database are bound within the same system that delivers and presents content to devices and end-users (front end). Basically, your editors are writing and publishing on the back end of the same system your website visitors are viewing.

However, with the omnichannel experiences that consumers now crave, these CMSes can seem outdated for both developers and marketers.

A pure headless CMS doesn’t generate any front-end code, which is why a headless CMS is sometimes referred to as “Content-as-a-Service” (CaaS). This process results in the best available digital experience for the end-users of a particular device. Front-end developers can continue developing new functionality for any channel, independent of the core/backend CMS.

Decoupled or hybrid CMSes, provide the capabilities of a headless CMS configuration (i.e., a separate backend with APIs enabling any channel to pull content from it as well as front-end capabilities (e.g., coding and templates for presentation) where content can be pushed into a channel with limited presentation intelligence.

A decoupled CMS offers the front-end delivery that a headless CMS lacks with preloaded templates and other front-end options typically available. However, where a pure headless CMS currently wins out is that it provides more control over how content is displayed. Headless CMS platforms are mostly future proof as since they connect to APIs; they can adapt to both current and future technologies. For teams intent on offering the best digital experiences for their customers, this is a bonus that cannot be overlooked as technology continues to advance.

The 5 Benefits of a Headless CMS Architecture

There are several benefits to using a headless CMS architecture. If you’re looking for a solution that caters specifically to the needs and wants of your developers, provides you with maximum control and flexibility, enhances your platform security, and ultimately future-proofs your CMS, then a headless CMS architecture should be on your radar. Below, I highlight and explain the top four benefits.

1. Faster Development, Faster Time-to-Market

A headless CMS is a dream come true for developers. Developers can continue to build websites or mobile applications using any programming language with their favourite tools, frameworks, and own development processes while still allowing full control over the application lifecycle without having to interfere with any CMS code. They can use JAMstacks tools and deliver better performance, higher security, lower cost of scaling, and a better developer experience.

Not just that, but developers and editors can also work better together. Editors no longer have to rely heavily on developers to build pages with a custom layout. This promotes an agile way of working which for projects can mean being finished a lot faster! The result is that not only will the time-to-market be diminished but also a single content item can be reused and combined with a number of different presentations. Developers and editors will be able to work much better together as well rather than in a silo.

2. Easy Integration

A headless CMS allows easy and secure integrations with any of your existing systems. A developer can code in any preferred language while allowing to use the programming language of the other platform that is being integrated into the CMS. Not having a fixed structure to develop or code in allows your developers to build any code for any type of integration. Allowing this type of flexibility makes it easier not just from a resourcing side but to integrate with systems that are more complex to integrate with. Webhooks is another common way to have action triggered events. A webhook is user-defined by an HTTP callback (or small code snippets linked to a web application) which are triggered by specific events. For example, Stripe has a webhook that will automatically send an email to a customer whenever a subscription payment fails to go through.

3. Better Content Architecture & Ease of Use

The ability to architect and manage your content without worrying about its delivery is a huge bonus with a headless CMS. Its ease of use allows developers to build out your content and interface for your front-end users without the complexities that come with it. Content editors can relate their content types in different ways, but the interface usability also allows them to manage their content however they’d like.

Also, because most headless systems are multi-tenant (which I’ll explain in more detail below), it’s always kept up to date with the most current trends, allowing organizations to be up to speed on the latest and greatest front-end experiences. With a headless API, you can specify content types and fragments that you want to push to the device or touchpoint of your choice allowing omnichannel readiness through any digital touchpoint and at any given time. This means a headless CMS can provide content for display and use on any number and type of channels.

4. Greater Scalability

Architecting a content-first approach makes your system cleaner, more scalable and provides you with full control with how and where your content appears. You can host content anywhere, and this includes the use of static site generators (like using Gatsby JS for example) and other multi-server environments. Future-proofing is another significant benefit because you can easily integrate with new technology and innovations, especially when the industry is changing as often as it is.

Since the back-end and front-end are separated, if the back-end CMS platform has any performance issues or, simply, needs maintenance, it won’t create any downtime to your website. In addition to this, cloud scalability, higher security, performance, and low operating costs is another big advantage.

5. Headless CMS costs less

With little technical involvement required in a headless CMS, it’s a lot quicker for your business teams to create new functionality. For example, if a marketing department wishes to create a new series of product mini-sites, they can go straight into the CMS and start creating immediately without having to wait for developers to build CMS-based templates. Your up-front cost is diminished as well because you can start with smaller solutions and then build your way up versus starting with one BIG install. It’s best to start small and then scale up as you need to.

Why a Multi-Tenant Architecture is Perfect for a Decoupled CMS

There are three types of headless CMS architectures. Below I outline the advantages of these types of architectures and why cloud multi-tenant is the best choice when choosing a headless CMS.

Install Based: An install-based architecture is exactly how it sounds; you install the platform locally and host it on your own environment. This means you need to manage everything end to end and often still pay for a maintenance package to your provider to cover the platform updates.

Cloud Install: A cloud install architecture is very similar to install based except your provider installs the platform in their cloud. You normally pay your provider for hosting, management, and upgrades which can be extra or included, depending on your provider’s terms and conditions. Bear in mind that this can get extremely complicated because there can be different versions of your platform out there especially if you are constantly making updates and fixes. With this approach, you can quickly get behind in platform versioning if you are updating multiple sites.

Cloud Multi-Tenant: This means your CMS itself is fully managed and upgraded automatically for you. I highly recommend this architecture because of its easy upgrades and security benefits. Here are some other top reasons why I recommend a true headless multi-tenant system:

The “head” can be built anywhere, and you have unlimited options.
You don’t have to deploy the CMS or manage it at all!
Better support: A vendor only has to support one version and therefore you can concentrate all your efforts, documentation and time to just one solution.
Often times bugs are fixed even before you get the chance to report it because the entire user base is reporting on the SAME version.
SaaS-based so the cost is always spread out.
You don’t need to manage ANY hardware or software, you just deploy your OWN code to your environment, this means more control without the hosting "black box" software method.

The Headless CMS Industry Shift

First off, let’s dive into the effects of digital transformation. A survey found that 70% of companies either have a digital transformation strategy in place or are working on one. This means that adopting technology and therefore using technology to interact with one’s customer is critical. Technology is moving faster than ever and in order to keep up with our customers and partners through all the digital channels available, a headless CMS can offset this for you.

To keep up with the digital transformation, you need to move fast, fail fast, and get up and try again. Organizations need to develop faster, get to market faster and then tweak and change as they move along. They need to integrate with all the systems that each business now needs. I get it, as you get busy and go through digital transformation, you add additional technology to your stack and therefore need a system that can easily integrate and work with all your systems. A headless CMS promises all of these touchpoints to you!

Second, it should come as no surprise that consumers today shop across multiple devices and channels. With new channels cropping up all the time, enterprises must look beyond a handful of digital touchpoints. An omnichannel approach offers the ability to create, orchestrate, and deliver delightful, fresh and iconic personalized customer experiences at a global scale across all touchpoints and all stages of the customer journey. This approach enables companies to stay in front of the rapidly changing digital landscape.

On average, brands that employ a strong omnichannel strategy retain 89% of their customers compared to 33% of those with weak omnichannel engagement. You need to be able to scale your platform to support all these channels, but you also need a team that can handle all this work. Having an easier to use interface that is content first, allows you to focus on your content, publish and push your content to all your digital channels. This is why a headless CMS is so critical. It can provide content for display and even better, distribute that content to any type of channel. This saves resources, reduces the amount of duplicate content and also helps when you need to change things fast and deploy even faster.

This omnichannel approach offers the means to engage prospects, customers, and partners wherever they stand. By empowering businesses to seamlessly create, manage and share content cross-channel, this approach can better support today’s complex customer journeys.

Headless CMS Use Cases

Okay, so a headless or decoupled CMS can store content and delivery anywhere via APIs, unlike a traditional CMS, which was built to send content to one or two specific types of front end. But what does that actually look like in practice?

Visit Orlando

Visit Orlando, the official tourism association for Orlando, Florida - home to Disney World and one of the most visited tourist destinations in the US - wanted to increase their engagement, conversion rate metrics and ticket sales. To achieve this goal they wanted to manage their content across various channels and personalize marketing campaigns for a targeted audience.

Visit Orlando was severely hampered by an inefficient ticket management system and process and needed to revamp their entire digital strategy and bring everything under one umbrella. Through Agility’s Headless CMS they now have a multi-site, multi-channel content management system and a new ticket sales and POS solution. Their team is now able to focus on adding new properties onto the platform, both as new website instances or as digital channels.

Learn more:
Visit Orlando Case Study

Cineplex

Cineplex, a leading name in the Film Entertainment and Content, Amusement and Leisure, and Media sectors, accommodates over 70 million guests per year on its digital platforms. The initial challenges Cineplex faced was a system that didn’t allow freedom of design and was extremely limiting in terms of performance, scalability, usability and multilingual capabilities. They needed to improve the overall customer experience across various channels and improve conversation rates.

Agility’s CMS has allowed Cineplex to increase the scalability of the site and to optimize their hosting resources. The latest iteration utilizes a new hosting environment across load-balanced servers for optimal site speed and performance. The site is now handling more traffic with less CPU load than in previous years.

Learn more:
Cineplex Case Study

Headless CMS: Go Content-first to Future-proof your Brand

Consumers are making use of more devices and channels than ever before, and brands have to meet them there to provide quality omnichannel experiences. Going headless, whether that’s through a pure headless CMS or a decoupled CMS, is the simplest way to achieve that.

By adopting a content-first approach, which seeks to make your content the focal point of your digital presence, while your many front-ends and their frameworks can be evolved and expanded, is the most logical way to ensure that your brand and its content can meet consumers wherever they end up going. Whether that’s smart speakers, digital signage, VR headsets, or something else exciting

With features such as page management, user-generated content and more, find out why Pepsico, Visit Orlando, and Pret a Manger chose Agility CMS as their headless CMS of choice.

Keep Reading

If you want to learn more about Headless CMS, make sure you read these articles:

Content Architecture: The Key to Organizing and Managing Your Content and Team

Joel Varty — Mon, 29 Jun 2020 13:50:20 +0000

38% of content marketers rate their content marketing strategy as average, and just 9% believe their strategy is excellent.

Strategizing and structuring your content is one of the most important steps of building a digital presence and integrating and transferring your content to multiple systems, and yet it is often overlooked. The final product of successful content strategy is a solid future proof content architecture. Your content architecture refers to the way all your content is organized, structured laid out, labelled and inter-connected.

A well-designed content architecture is key for two things: your visitors’ web experience and your content editors’ content management experience. Your content editors will be able to build, edit and manage content more intuitively and, as a result, your visitors will have a better user experience too! This is the secret sauce of Content Before Design approach, or Content First.

The benefits of a well-planned content architecture

Back end experience is equally as important as end-user experience, if not more. And yet the majority of companies are primarily concerned with end-user experience. However, how your back-end is organized can have a huge impact on your front-end experience. Ideally both experiences should be optimized and in a way mirror each other.

This is where content architecture comes in. Content architecture is all about backend; how you manage content, interact with it and distribute it between all your systems. A well set-up content architecture will lead to more efficient and seamless connections between content across systems, allowing your content team to work more efficiently and according to their own workflows.

Learn More:

Why is a Headless CMS Architecture so Popular?

Overall, a good content architecture will improve frontend by:

Increasing agility of your content team
Providing them with a clean backend, which will ripple through to the frontend
Enabling your team to more easily grow the frontend of your website over time and remain more flexible
Empowering your content team to rely less on developers
Increasing your CMS flexibility, enabling the easy expansion of your website and of new system integrations
Perfectly positioning your platform for the benefits of new personalization initiatives, which are sweeping the Marketing world.

So how exactly does content architecture impact frontend and, as a consequence, end user experience? There are many ways. To start off, the easier it is for things to be optimized and managed in the frontend, the more efficient your internal workflows will be, and the more time your content editors will have to create better experiences for your customers.

Having a smooth and intuitive content architecture will also make it easier for your editors to build new pages, edit content and avoid content bugs. And it will enable editors to be more reactive to issues with customer journeys and to build better ones.

A well-planned content architecture avoids putting editors in situations where they might have to hard-code content because the backend is too complex, and allows them to rely less on developers when a change is needed, leading to faster and more efficient updates.

Good content architecture is also tremendously beneficial when it comes to expanding a website. By thinking ahead of what integrations you may need in the mid- to long-term you can ensure that these will be easier to implement and that the integration process will run more smoothly. No more complete restructurings of your website every time you need a new integration!

Finally, with personalization becoming a key player in the future of content management, a well-planned content architecture will best position you to assign personalization tags and categories across all your content.

Ultimately, optimized internal workflows will give you great benefits in the long run:

Provide a better user experience and flow for your customers and content editors alike
Increase the efficiency of your content management and editing process
Ensure that information and products are delivered as quickly as possible
Cut down unexpected costs and development time
Ensure future expandability and flexibility as future requirements come along, from design and content changes to enhanced features
Deliver better personalized content to your users, increasing conversions and sales
Ensure any website reskinning process runs efficiently and smoothly

Learn More:

How Content Architecture Helps Your Bottom Line

So what are the steps you can take to ensure your content architecture is effective

1. Set your goals and objectives

Thinking about your goals and objectives as you begin to structure your content architecture will have a huge impact on how intuitive and effective your internal workflows will be. Think of your key goals and ensure that your next step always keeps them in mind and supports them.

2. Map out your internal workflows

The next step will be looking at every relevant aspect of your content, from workflows that take place daily and areas that require a lot of updates and optimizations, to integrations that you might require in the future security requirements. Literally anything that could have an impact on your content management.

3. Configure your CMS

Finally, implement all these requirements during the CMS configuration process, so that it always supports your internal workflows. This is an important but complex process that will require a CMS that is highly configurable, so that it can adjust to your exact needs.

Learn More:

DEV Community: Joel Varty

Learning Next.js? Want to up your career with Headless CMS? Start here.

Eleventy + Agility CMS Starter Blog

Getting Started

Agility CMS Account

Clone the Repo

Install Dependencies

Environment Variables

Take Command of the cmd line

🔥 Local 🔥 Development 🔥

Build It and They Will Browse

Preview Mode

Live or Production Mode

Wipe The Content 🧽

How this thing works 🤓

Pages Pages Pages

Layout -> Template -> Modules

Collections

CSS + JavaScript

Tailwind CSS

Alpine.js

Want to learn more?

Previewing Content in Agility CMS

How Agility CMS Modules Work

Which is Better: a Hybrid, Traditional, or Headless CMS

Which type of CMS is best for your company?

Launching a JAMstack Website With NEXT.JS + Vercel

JAMstack-Ready CMS: The Roadblocks

The Meteoric Rise of Jamstack

The Genius of NextJS and Gatsby as Static Site Generators

agility / agilitycms-nextjs-starter-2020

A starter NextJS website using Agility CMS, Tailwinds CSS, and several pre-built components.

agility / agility-gatsby-starter

A sample GatsbyJS website using the Agility CMS Gatsby source plugin

Gatsby

NextJS

Get Started Now

It's time to give some love to your ex

WHAT WILL YOU LEARN?

WHO SHOULD ATTEND:

What is a Headless CMS

Headless CMS Explained in 1 Minute

Going Deeper (And Going Decoupled)

Traditional CMS vs Pure Headless CMS vs Decoupled CMS (A.K.A., Hybrid CMS)

The 5 Benefits of a Headless CMS Architecture

1. Faster Development, Faster Time-to-Market

2. Easy Integration

3. Better Content Architecture & Ease of Use

4. Greater Scalability

5. Headless CMS costs less

Why a Multi-Tenant Architecture is Perfect for a Decoupled CMS

The Headless CMS Industry Shift

Headless CMS Use Cases

Visit Orlando

Cineplex

Headless CMS: Go Content-first to Future-proof your Brand

Keep Reading

Content Architecture: The Key to Organizing and Managing Your Content and Team

The benefits of a well-planned content architecture

Overall, a good content architecture will improve frontend by:

So what are the steps you can take to ensure your content architecture is effective

1. Set your goals and objectives

2. Map out your internal workflows

3. Configure your CMS

Take Command of the `cmd` line