So you’ve decided that a headless CMS is the way to go- you know this is the tool that you’re going to invest in that will propel your content team forward and offer more flexibility to your development team.

But what happens when the website becomes an afterthought, and you’re caught between a rock and a hard place. You don’t want to keep the old CMS just for the website (that was the whole point of finding a headless CMS), but you’re not sure how to build and maintain a website with your new headless CMS.

Every system is different, but in this article we’ll walk you through the average headless CMS tutorial for building a website. Then, at the end, we’ll show you how to build a website using Zesty.io’s out of the box Web Engine.

Building a Website with a Headless CMS

Get Your Head on Straight

Before embarking on this project, you’ve got to figure out what your head will be! Will it be a generated by a static website generator, pulling in the data from your Headless CMS? Is it an entire application that will be using the headless CMS to manage marketing content? We need to find out where this “head” will live and how it will fetch its data from the CMS.

For example: For a common Ruby-on-Rails site, you could use a number of different libraries for fetching CMS data into your application. If your pages are generated by the Rails infrastructure itself via template interpolation, then you could use a Ruby Gem or HTTP library to make fetch calls to your headless endpoint. You’ll need an easy way to organize your content so that the web application knows how each piece of content should be referenced in the CMS. Whether it’s “homepage-tout” or a “FAQs” collection, you’ll need to be precise in specifying the proper identifier.

Using a Static Site Generator

If you decide to use one of the many static site generators (Hugo, Gatsby, Metalsmith, Middleman… we could go on and on), you’ll have to find open-source libraries to aid in the fetching of your data during the build process for your site.

Configuring Your CDN

You’ll also need to figure out how to set up a CDN to cache that content across that web and what the procedure should be for invalidating that cached content when there are updates. There are many services that will serve your content up to a certain number of requests for free, but if you are expecting decent traffic, you’ll have anticipate the costs of overages with these services. If you are hosting your static site yourself, this will mean keeping a couple of load-balanced servers always up and ready to serve content directly or via your CDN integration.

Maintaining the Website with a Headless CMS + Head

Once you have this handshake working between your “head” and your “headless CMS” you’ll need a well-defined process to add new content as needs arise. As a marketer, if you need a new landing page to support a new marketing campaign, there will be a design process, a static build into HTML/CSS/JS, and then the setup of new content identifiers on the front end AND within your headless CMS. For all the agility that headless is supposed to enable, the creation of the HEAD component will still require coordination with the “front-end” team and the appropriate introduction of these new pages into the source-code and continuous integration processes for the website.

These “headaches” are real and cost time and money, so in the next section, we’ll show you how easy it is to let Zesty.io handle the front end and the back end for you! Marketer-friendly tools stay outside of these continuous integration pipelines and let you stay productive without interventions from IT.

Building a Website with Zesty.io’s Headless CMS and WebEngine

Step 1: Configure Your Content Schema

The first step to building out your instance in Zesty.io, whether you’re configuring JSON feeds or building a website, is to configure content fields. In Zesty.io, content is pulled in and dynamically updated with each publish, so we have to first tell the system what content we need to input. There are three options for content configurations:

Single Page with View

Pages are exactly what they sound like - a page, but these can be cloned and re-used for multiple purposes. The Page Schema represents a set of single pages of content. These pages can live in multiple places on a website, and can have different page parents. This is perfect for the one-off landing page or main pages that require specific design and content structure, such as a homepage, landing page, or any other page with unique design.

Page Group with View

Page groups are pages that will automatically generate new pages following the same template for each content entry that’s created. All content in here routes to a single page parent (such as articles to a category page, or team members to a team page). A single template is shared between all of the pages created in this group.

Headless Data Schema

Headless data schemas can still be used on websites through Zesty.io’s Web Engine and are arguably the most powerful content structure. Data Entries typically represent free form data that can render on any route. Relational or miscellaneous content is a good use here, which is what makes Headless Data Schema so powerful. These can also be accessed with JSON or as relational fields in other content sets. Headless data schemas are an easy way to create and manage one-to-one or one-to-many relationships between content within Zesty.io. Data sets are collections of content abstracted from a page. Data sets can be tags, product items, taxonomies, table data, social links, and more.

It’s important to remember that any content can be called anywhere on the site, and configurations can be fluid, too, so this may be an ongoing process as you build out the site.

Step 2: Build Your Views

Once Step 1 is mostly completed, Steps 2 and 3 can actually be completed in tandem to save resources. Developers can build their views in our in-browser IDE using our templating language Parsley to call in different content fields dynamically. Developers also have the option of using Zesty.io's plugin for the popular Atom Editor to develop views.

Step 3: Populate Content

Once content fields are configured, content managers can populate them as they wish. This can be done manually or with a CSV import for large amounts of content, such as articles or team members. As soon as content is loaded and views are built, you’re ready to start previewing how the website looks in a stage environment!

Step 3.5: Review SEO

With Zesty.io, much of the SEO functionality is automated. Unlike configuring SEO with a purely headless CMS, Zesty.io’s web engine automatically generates meta titles and descriptions, URL slugs, and more. These are pre-populated so you’re never without content in these fields, but they can be previewed and changed as needed.

Step 4: Preview in a Staging Environment

In Zesty.io, each instance comes with a stage environment for developers and content teams to preview the website’s look and functionality. As with any build process, it’s crucial to preview the functionality of a site thoroughly prior to launch.

Step 5: Launch!

It’s time to launch your site! First, read this quick documentation on how to launch a Zesty.io instance to a domain. Then, configure your domain, ensure HTTPS is enabled, press that launch button, and check out your shiny new live site!

Need help deciding if Zesty.io is right for your organization? We can help. Let’s discuss your project at your earliest convenience.