Getting Started with AEM Sites - WKND Tutorial

Welcome to a multi-part tutorial designed for developers new to Adobe Experience Manager (AEM). This tutorial walks through the implementation of an AEM site for a fictitious lifestyle brand the WKND. The tutorial covers fundamental topics like project setup, Core Components, Editable Templates, Client-side libraries, and component development with Adobe Experience Manager Sites.

Overview

The goal for this multi-part tutorial is to teach a developer how to implement a website using the latest standards and technologies in Adobe Experience Manager (AEM). After completing this tutorial a developer should understand the basic foundation of the platform and with knowledge of common design patterns in AEM.

The tutorial is designed to work with AEM as a Cloud Service and is backwards compatible with AEM 6.5.5.0+ and AEM 6.4.8.1+. The site is implemented using:

• Maven AEM Project Archetype
• Core Components
• HTL
• Sling Models
• Editable Templates
• Style System

Estimate 1-2 hours to get through each part of the tutorial.

Local Development Environment

A local development environment is necessary to complete this tutorial. Screenshots and video are captured using the AEM as a Cloud Service SDK running on a Mac OS environment with Visual Studio Code as the IDE. Commands and code should be independent of the local operating system, unless otherwise noted.

Required software

The following should be installed locally:

• Local AEM Author instance (Cloud Service SDK, 6.5.5+ or 6.4.8.1+)
• Java 11
• Apache Maven (3.3.9 or newer)
• Node.js (LTS - Long Term Support)
• npm 6+
• Git
• Visual Studio Code or equivalent IDE
  • VSCode AEM Sync - Tool used throughout tutorial

About the tutorial

The WKND is a fictional online magazine and blog that focuses on nightlife, activities, and events in several international cities.

Adobe XD UI Kit

To make this tutorial closer to a real-world scenario Adobe’s talented UX designers created the mockups for the site using Adobe XD. Over the course of the tutorial various pieces of the designs are implemented into a fully author-able AEM site. Special thanks to Lorenzo Buosi and Kilian Amendola who created the beautiful design for the WKND site.

Download the XD UI kits:

• AEM Core Component UI Kit
• WKND UI Kit

The name WKND is fitting because we expect a developer to take the better part of a weekend to complete the tutorial.

Github

All of the code for the project can be found on Github in the AEM Guide repo:

GitHub: WKND Sites Project

In addition, each part of the tutorial has its own branch in GitHub. A user can begin the tutorial at any point by simply checking out the branch that corresponds to the previous part.

Reference Site

A finished version of the WKND Site is also available as a reference: https://wknd.site/

The tutorial covers the major development skills needed for an AEM developer but will not build the entire site end-to-end. The finished reference site is another great resource to explore and see more of AEM’s out of the box capabilities.

To test the latest code before jumping into the tutorial, download and install the latest release from GitHub.

Powered by Adobe Stock

Many of the images in the WKND Reference website are from Adobe Stock and are Third Party Material as defined in the Demo Asset Additional Terms at https://www.adobe.com/legal/terms.html. If you want to use an Adobe Stock image for other purposes beyond viewing this demo website, such as featuring it on a website, or in marketing materials, you can purchase a license on Adobe Stock.

With Adobe Stock, you have access to more than 140 million high-quality, royalty-free images including photos, graphics, videos and templates to jumpstart your creative projects.

Next Steps

What are you waiting for?! Start the tutorial by navigating to the Project Setup chapter and learn how to generate a new Adobe Experience Manager project using the AEM Project Archetype.