Category: Adobe

Hello, friends! Adobe Experience Manager (AEM) Edge Delivery Services is a simple way to create web content using tools we already know, like Google Docs or Microsoft Word. Let’s walk through how it works and pick up some tips we can use in our own projects, all while hanging out together as a design family.

What’s Document-Based Edge Delivery?

Document-based authoring with Edge Delivery Services lets us turn documents into web pages without much fuss. It’s part of AEM as a Cloud Service, and it’s perfect for us designers who want to focus on creating rather than wrestling with new tools. You write in a familiar place—like Google Docs or Word—add your text, images, or even videos, and Edge Delivery Services handles the rest, turning it into a webpage. It’s like writing a letter to a friend and having it magically become a beautiful card to share.

How It Works: The Basics

Here’s the simple process, straight from what I’ve learned:

• Write in Your Doc: Use Google Docs, Microsoft Word, or even OneDrive. Just create your content as you normally would—add headings, paragraphs, images, or links.
• Share It: Make sure your document folder is shared the with the Adobe Experience Manager user ([email protected]).
• Connect to Edge Delivery: Your document gets pulled into the system, and it becomes a webpage. You can preview it, tweak it, and publish it when you’re ready.

Tips for Us Designers

Here’s the things that can help us make the most of document-based authoring:

• Keep It Organized: Use headings in your doc (like Heading 1, Heading 2) to structure your content. Edge Delivery Services uses these to build the page, so it’s like sketching a clear outline for your design.
• Add Visuals Thoughtfully: You can drop in images, videos, or links right in your document. It’s a great way to prototype a page—think of it as a mood board that turns into a real site.
• Preview Before You Publish: Once your doc is linked, you can see a preview of the webpage. Check how it looks and feels, just like you’d test a user flow before sharing it with the team.
• Style with Code: If you’re a frontend dev like me, you can add custom styles by working in GitHub. The document handles the content, and you can make it look just right with CSS.

A little tip: If you’re using Google Docs, make sure your images are uploaded properly—sometimes they don’t show up if they’re just pasted in.

Why It’s Helpful for Our Family

This way of working has some real benefits for us as a design community:

• It’s Familiar: We all know how to use Docs or Word, so there’s no big learning curve. It’s like sitting down with a cup of tea and a notebook you’ve used a hundred times.
• It’s Flexible: You can start with a rough draft, share it with the family for feedback, and keep editing until it’s ready. It’s a bit like passing around sketches at a family gathering.
• It Plays Nice with Code: For those of us who code, we can pair the document with GitHub to add custom styles or scripts, making the page our own.

A Sunset Moment to Try It

Start with a small site and then share it with us—I’d love to see what you create. Let’s keep growing as the Appii Design family, finding new ways to design under every sunset.

Hello, Appii Design family! I’m Andrew, and I’m glad you’re here with us. Today, I want to share some helpful ideas about Adobe Experience Manager (AEM) Edge Delivery Services—specifically how it can make creating digital content easier for us as UX designers and frontend developers. This isn’t about building something for others to use, but about us—designers—learning together and finding better ways to work. Let’s take a look at how to author content with Edge Delivery Services, inspired by Adobe’s own guide, and see what we can take away for our own projects.

What’s Edge Delivery Services All About?

Edge Delivery Services is a tool that works with AEM as a Cloud Service. It’s built to help us create and manage content in a way that’s flexible and straightforward. For us designers, the big draw is the Universal Editor—a place where we can see our changes as we make them, kind of like sketching right on the screen. It saves our work in AEM, so everything stays organized, and it pulls in styles and code from Edge Delivery Services to keep things looking sharp. Whether you’re designing a flow or coding a layout, it’s a handy way to bring ideas to life.

Two Ways to Create

One thing I love about this tool is that it gives us options. There are two main ways to add content, and both can fit into how we like to work:

• Universal Editor: This is the “what you see is what you get” way. It’s perfect for tweaking designs live and seeing how they feel. You can manage pages, fragments, and more in AEM, then edit them right in the browser.
• Document-Based Authoring: This one’s neat—you can write in tools like Microsoft Word or Google Docs, and it turns those documents into web pages. It’s simple and uses what we already know.

As peers, we can mix these depending on the project. Maybe start with a doc for quick ideas, then polish it in the Universal Editor. It’s like sketching on paper before moving to a prototype.

Getting Started

Why It’s Worth It

Here’s what I’ve found helpful as a UX designer and frontend dev:

• Live Design: The Universal Editor lets us see our work almost instantly, so we can tweak until it feels right—great for nailing down user flows.
• Simple Tools: Using Word or Docs or AEM Pages means less time learning new stuff and more time creating. It’s like sticking to pencils we already know how to hold.
• Team-Friendly: Since it ties into GitHub for code, we can share styling ideas with other devs in the family and keep everything in sync.

A Sunset Thought

Start small—maybe a single page—and see where it takes you. I’d love to hear what you think or what you’re working on. Let’s keep learning as the Appii Design family, with every sunset bringing new ideas.

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!