Theming workflow

In this chapter we update the theme sources of an Adobe Experience Manager Site to apply brand specific styles. We learn how to use a proxy server to view a preview of CSS and Javascript updates as we code against the live site. This tutorial will also cover how to deploy theme updates to an AEM Site using Adobe Cloud Manager’s Front End Pipeline.

In the end our site is updated to include styles to match the WKND brand.

Prerequisites

This is a multi-part tutorial and it is assumed that the steps outlined in the Page Templates chapter have been completed.

Objectives

  1. Learn how the theme sources for a site can be downloaded and modified.
  2. Learn how code against the live site for a real-time preview.
  3. Understand the end-to-end workflow of delivering compiled CSS and JavaScript updates as part of a theme using Adobe Cloud Manager’s Front End Pipeline.

Update a theme

Next, make changes to the theme sources so that the site matches the look and feel of the WKND Brand.

High level steps for the video:

  1. Create a local user in AEM for use with a proxy development server.
  2. Download the theme sources from AEM and open using a local IDE, like VSCode.
  3. Modify the theme sources and use a proxy dev server to preview CSS and JavaScript changes in real time.
  4. Update the theme sources so that the magazine article matches the WKND branded styles and mockups.

Solution Files

Download the finished styles for the WKND Sample Theme

Deploy a theme using a Front End Pipeline

Deploy updates to a theme to an AEM environment using Cloud Manager’s Front End Pipeline.

High level steps for the video:

  1. Create a new git repository in Cloud Manager

  2. Add your theme sources project to the Cloud Manager git repository:

    $ cd <PATH_TO_THEME_SOURCES_FOLDER>
$ git init -b main
$ git add .
$ git commit -m "initial commit"
$ git remote add origin <CLOUD_MANAGER_GIT_REPOSITORY_URL>

  3. Configure a Front End Pipeline in Cloud Manager to deploy the front end code.

  4. Run the Front End Pipeline to deploy updates to the target AEM environment.

Example repos

There are a couple of example GitHub repos that can be used as a reference:

Congratulations!

Congratulations, you have just updated and deployed a theme to AEM!

Next Steps

Take a deeper dive in to AEM development and understand more of the underlying technology by creating a site using the AEM Project Archetype.

On this page