Appii Design

Hello family! I’m excited to share some thoughts about Adobe Experience Manager (AEM) Edge Delivery Services. It’s a tool that can help designers like us and anyone company working on digital projects—build websites faster that are faster. 🙂 Today, I’ll walk you through how to start using it, step by step.

What Is AEM Edge Delivery Services?

AEM Edge Delivery Services is part of Adobe Experience Manager as a Cloud Service. It’s a new way for front end developers to build AEM websites quickly and consume page data from anywhere keeping them simple to manage for site owners. For example, the pages could be created from a folder of Google docs or Word docs. This new AEM services turns these things into HTML to be decorated with CSS and JavaScript on the Edge. In this article, I’m focusing on content that comes from AEM Pages, called WYSIWYG Authoring.

Let’s see how to begin.

Step 1: Get Ready

Before you start, there are a few things to set up. It’s like preparing a space to work in:

• Try the Tutorial: Adobe has a short guide to show you how it works. It’s a good place to start. The tutorial takes you through creating a site with Google Docs. Step 2 will talk about doing this with AEM Pages
• Use AEM Cloud: You’ll need an AEM Cloud environment. If you don’t have one, ask your Adobe contact.
• Turn On the Editor: Enable the Universal Editor in your environment.

Think of this as laying a foundation—simple, but important.

Step 2: Build Your Starting Point

Next, you’ll set up a project. It uses GitHub, which keeps things organized. Here’s what to do:

• Get the Template: Go to GitHub and download the WYSIWYG template. It’s a starting point you can adjust.
• Make Your Site: In your AEM Cloud Service, go to the Sites console. Choose “Create > Site from Template,” upload the template, name your site, and create it.
• Connect to GitHub: Create a new repo based off of the boiler plate starter code.

Step 3: Connect the Pieces

Now, you’ll tell the system how to find your content and show it on your site. It’s straightforward:

• Update fstab.yaml: In your GitHub repo, edit this file to point to your AEM instance, like https://<aem-author>/bin/franklin.delivery/your-github-org/your-git-hub-repo/main. Save it.
• Fix paths.json: Change the default path to something like /content/your-site-name/:/. This keeps content flowing right.

Step 4: Design and Edit

Here’s where you can start creating. Open your site in the Universal Editor, and you’ll see what you’re building as you go:

• Use Blocks: There are ready-made components called blocks for things like headers or cards. You can modify them or make your own custom blocks.
• Adjust Styles: In your GitHub repo, find the blocks folder and edit the .css files to change how things look.
• Check Your Work: The editor shows you everything live, so you can tweak until it feels right.

It’s like shaping something with your hands—simple and direct.

Step 5: Publish and View

When you’re happy with it, publishing is easy. In the AEM Sites console, pick your pages, click “Quick Publish,” and it’s done. Visit your site at a URL like https://main–your-github-repo–your-git-hub-org.aem.live to see it live.

Who’s going to love this?

• Business Authors: The universal editor makes it easy to see and change things, like editing w word doc.
• Frontend Developers: You can create websites and update them using comonly known HTML, CSS, and JavaScript.

Try it! Build a site and play with a few blocks and see how easy it is to create websites. If you give it a try, let me know how it goes—I’d love to hear about your projects.

Thanks for reading!