Getting Started with AEM Sites - Quick Site Creation

Let’s take a look at some of the Quick Site Creation features in Adobe Experience Manager sites. We will also look at how designers and front end developers can work together to update the look and feel of a newly created site.

In the AEM Sites console, We can generate a site from a predefined site template. We can choose to import a new site template, or use an existing one. I’ll go ahead and import a basic site template provided by Adobe.

This template creates a sample Wireframe site.

We can enter the title for our site, and we can give it a name, and in just a few clicks. We now have a fully featured site that is immediately functional.

A basic site structure is available, complete with multi-lingual support. Users can immediately begin authoring. let’s go ahead and open up one of the pages. The site template provides some starter content, built with AEM core components. Core components are out of the box components, provided by Adobe, and these components allow users to edit page content in AEM in a what you see is what you get type environment.

For example, I can modify this hero teaser on the homepage.

I’ll use the components dialogue to update the title text of the hero teaser.

We can use features of the AEM style system to change the layout of our component, or at a style variation to make the background dark.

Each page in AEM is backed by page template. Page templates allow brands to create reusable layouts, to promote content consistency. Page templates also allows to set granular policies to govern the behavior of components across the site. Just like pages, page templates are configured with in-context preview. So the AEM authoring environment allows a user to edit content and make modifications to the layout. Next, let’s look at how we can update the look and feel of our site. Now a major part of any new implementation will be applying and updating the themes to match the look and feel for your brand. Adobe XD is a great tool for designers to rapidly prototype these kinds of updates. And our site template actually comes with a UI starter kit to help accelerate this process. The UI starter kit includes the different templates and pages available in our site template. The starter kit also breaks down each UI element and maps it to a corresponding AEM component. So now a designer can come in and start updating the look and feel of these different components. XD has some really powerful features, that make it possible to create relationships between different UI elements. For example, we have a functional color named accent. I’ll go ahead and update this color to a brand specific color, to match our WKND branding. Observe that we can see this change in update cascade through all the different UI elements. The update is also added to the page mock-ups. Once the designers is happy with their UI updates, we would then want to hand off this information and export it to a front-end developer, who can then make the CSS updates. Adobe XD makes this really easy by giving us the ability to export the art boards, with a shareable link.

Developer can then access this link, and see the updated styles and direction from our designer without needing to install Adobe XD on his or her computer.

This link is live, so any updates to the original XD file, will be reflected here. Now as a front-end developer, I can inspect the different properties included in the mock-ups, and make the corresponding updates in my front end theme source.

Updating the theme source for our site, is pretty straightforward. In AEM, I can click the root of our generated site, and go ahead and download the theme source. The theme source is a Front-End Project based on Webpack. It includes all of the CSS and JavaScript code, used to style our site. Here, I’ve opened up the theme source using the Visual Studio Code Editor. Built into the theme source, is a local proxy server that is run using Node JS and MPM. This allows us to make code updates and see them reflected in our AEM as a cloud service environment, in real time. notice that we are proxying the AEM environment through the proxy port and local host and using browser sync to live reload our page.

Let’s go ahead and make an update to that accent color that we saw reflected in our XD Comps.

I can go ahead and copy the color code here and update my variables file in my front end theme source. Now, once I save the changes in my front end theme source, the front end theme source is recompiled, and we can see that change reflected through the proxy server. So in this way, our front-end developer can rapidly make and preview these sorts of CSS and other front-end code style changes and seeing them reflected against the live content of our AEM site. Once the developer, is happy with their changes to the front end theme source, they will want to deploy the CSS and JavaScript updates to the actual AEM environment. A front end pipeline is available via cloud manager that can be used to deploy these changes. The front end developer will commit the theme sources to source control using git, and then configure and trigger a front end pipeline to deploy the updates. The front end pipeline can be run automatically, following a git commit, or it can be triggered manually, allowing the front end developer to quickly iterate continuously until the site matches the UX designs.

So that’s a brief overview of some of the Quick Site Creation features of Adobe Experience Manager, and how you can use Adobe XD in a low code approach to implementing a site. Thanks for watching. -