Theming workflow

CAUTION

The quick site creation features showcased here will be released in the second half of 2021. The related documentation is available for preview purposes.

In this chapter we will update the theme sources of an Adobe Experience Manager Site to apply brand specific styles. We will earn 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 GitHub Actions.

In the end our site will be 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 GitHub Actions.

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 Theme

Deploy a theme

Deploy updates to a theme to an AEM environment using GitHub Actions.

High level steps for the video:

  1. Add your theme sources project to GitHub as a new repository.
  2. Create a personal access token in GitHub and save to a secure location.
  3. Configure the GitHub Settings in your AEM environment to point to your GitHub repository and include your personal access token.
  4. Create the following encrypted secrets in your GitHub Repository:
    • AEM_SITE - root of your AEM site (i.e wknd)
    • AEM_URL - url of your AEM Author environment
    • GIT_TOKEN - Personal access token from Step 2.
  5. Run the GitHub Action: Build and deploy Github artifacts. This will have the downstream effect of running the action: Update theme config on AEM with artifact id, which will deploy the theme sources to the AEM environment as specified by AEM_URL and AEM_SITE.

Example repos

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

Congratulations!

Congratulations, you have just created 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