Contact

Building a headless website in AEM in 3 simple steps

Is your company interested in creating a headless website?

As more companies move towards a headless CMS, Adobe Experience Manager (AEM) has emerged as a powerful tool that combines headless capabilities on top of its already extensive content management features.

Want to know more about AEM itself before you read about using AEM for headless content management? We wrote a detailed article on what AEM is and why it's the best CMS for enterprise-level organisations here.

We know how powerful headless can be. By leveraging the headless capabilities of AEM, you can create websites that are optimised for speed and scalability. However, many companies struggle to adopt a headless approach and take advantage of the many benefits it offers due to a lack of knowledge and confidence in the matter.

To test AEM's headless capabilities, we are in the process of remaking our own website using only the headless content management options in AEM. This allows us to build a static website, which is good for up-time, rendering and caching. We are also using AEM content fragments as headless content pieces so they can potentially be shared via other channels.

In this article, we will walk you through the three essential steps when building a website using only the headless capabilities of AEM. From creating an ERD to developing a component library, we will provide you with practical tips that you can use to take advantage of this technology and create a website that is both engaging and effective.

Step 1: Creating the content model

First, we start with creating an Entity Relationship Diagram (ERD). This diagram is a graphical representation of the content model. Building an ERD is a valuable and necessary first step in the process of (re)building your website. It helps you organise your content, facilitates content modelling and saves time and effort in the long run.

Below, you can find a screenshot of the content and page content fragments in the ERD.

 

Screenshot of the Entity Relationship Diagram (ERD) of the iDA website showing the content fragments and how they relate to each other

Step 2: Creating different content fragments in AEM & developing a component library

Once we have a clear overview of the content model and which content fragments we need to build, we can start creating everything in AEM. Content fragment models are templates that define the structure and layout of content fragments, where content fragments themselves are the actual content items. A content fragment can then be shared across pages within AEM and also accessed via API to reuse their content on different channels. If you are familiar with headless content management systems, you can compare content fragment models to content types.   

Content fragments don’t need to be used within AEM Sites though. They can be managed completely separate and used as headless content only. For our site, we have decided to go completely headless for now so our content fragments are entirely separate from AEM Sites.

 

Screenshot of content fragment models in AEM

Simultaneously, we started to develop a component library. We used TailwindCSS and React to set up our front-end components that we can then map to the data we can expect to receive from our content fragments models.

 

Screenshot of the component library

Step 3: Populating our website with engaging content

Once the components are mapped to the data from the content fragment models, we are ready to start populating our new site with content.

Since we are going full-on headless, we don't have any visual indication of what we are creating. While headless is meant to relieve some of the pressure that content managers face to make sure that every little detail looks exactly right on a page, this can be quite challenging for content editors who have never worked in a headless structure before. Separating content from the context it's used in can be very confusing for content managers. That's why we don't believe headless is the magical solution for all organisations, as we have explained in much more detail in this opinion piece.

Even for our team, we know that it's a mindset shift so we have created a preview environment where our content managers can see the changes they are making before bringing our content live.

One big advantage of headless content management is that we can already start adding the content while we are still working on the final front-end components. We won't be able to preview them yet, but once the front-end component is delivered, we can preview it with the content we've already added to the system and bring everything live.

 

Ready to try out headless in AEM and need some help?

Schedule a call with one of our AEM experts to discuss your project.

Michaël Engelen (BE)
+32 498 53 68 27
Samir Kabbouti (NL)
+31 6 83 78 01 72