How to create blog for AEM EDS site with Universal Editor

[SantoshBh2]

Hi,

I need to create a Blog page in an AEM EDS (Edge Delivery Services) site using the Universal Editor.

Looking for guidance or best practices on how to implement this.

[VishalKa5]

Hi @SantoshBh2 ,

Create a Blog in AEM EDS Using Universal Editor

1. Understand EDS content model
   In AEM EDS, you don’t create pages through AEM Sites. All content comes from your project’s Git repository and is edited using Universal Editor.
2. Create blog blocks in your project
   Inside your project repo, under /blocks, create the blocks needed for the blog:
   >blog-list → to display all posts
   >blog-detail → to display a single post
     These blocks define how the blog will look and behave.
3. Create a blog folder inside your content
   In your repo, create:
   
   /content/blog/
   
   This folder will store all blog posts.
4. Add blog posts as Markdown files
   Each blog post is a .md file, for example:
   
   /content/blog/my-first-post.md
   
   This file contains:
   >front matter → title, date, author, banner image
   >body content → paragraphs, images, headings, etc.
5. Commit & push to Git
   Once the markdown files and blocks are created, push them to your project’s Git branch.
6. Open the blog in Universal Editor
   Access your URL and click Open in Universal Editor.
   Universal Editor automatically detects the markdown metadata and lets you edit fields visually.
7. Edit content visually
   >You can modify:
   >title
   >images
   >body text
   >publish date
   >tags
   Everything updates visually inside the editor.
8. Publish through Edge Delivery Services
   Saving in Universal Editor pushes the updates back to Git.
   EDS then builds and publishes the blog automatically.

Summary: 

Create blog blocks → add markdown blog posts → open in Universal Editor → edit → publish.

This is the correct and simplest workflow for blogs in an AEM EDS project.

[ManviSharma]

Hello @SantoshBh2 ,

Here is the official guidance for using Adobe Experience Manager (AEM) with the Universal Editor and Edge Delivery Services:

When you author and persist content in AEM as a Cloud Service using the Universal Editor, you can fully leverage AEM’s capabilities (multi-site management, localization workflows, launches, etc.) while still delivering pages with high performance via Edge Delivery Services.

Authoring Workflow

When using AEM as a Cloud Service for content management, AEM, the Universal Editor, and Edge Delivery Services work together to provide a seamless authoring experience:

• The AEM Sites console is used for core content management activities, such as creating pages, Experience Fragments, Content Fragments, and more. All AEM features remain available, including workflows, MSM, translation, and Launches.

• The Universal Editor is used to author the content stored in AEM. It provides a modern UI for content editing.

• AEM renders the HTML but loads scripts, styles, icons, and other resources from Edge Delivery Services.

• All changes are persisted in AEM as a Cloud Service.

• Content authored via the Universal Editor and stored in AEM is published to Edge Delivery Services.

• AEM renders semantic HTML suitable for ingestion by Edge Delivery Services, which then publishes and delivers the pages, helping you achieve excellent Core Web Vitals.

Page Structure

When authoring using AEM and the Universal Editor, the same concepts used in document-based authoring with Edge Delivery Services apply:

• Blocks are the fundamental building units of pages delivered by Edge Delivery Services.

• Authors can use default blocks provided by Adobe or custom blocks created by developers for the project.

Reference:
https://www.aem.live/docs/aem-authoring

---

GitHub URL – Use the GitHub project URL that you created in the previous step. After creating the site, AEM confirms it via a dialog. Click OK to dismiss it.
In the Sites console, navigate to the index.html of the newly created site and click Edit in the toolbar. The Universal Editor opens in a new tab. You may need to click Sign in with Adobe to authenticate before editing your page.
You can now edit your site using the Universal Editor.

Publishing Your New Site to Edge Delivery Services

Once you’ve finished editing:

1. In the Sites console, select all the pages for your new site.

2. Click Quick publish in the toolbar.

3. Confirm by clicking Publish in the dialog.

Then, in a new browser tab, go to:

https://main--<repository-name>--<owner>.aem.page

You should see your content published and delivered via Edge Delivery Services.

Reference:
https://www.aem.live/developer/ue-tutorial

---

Creating Blocks Instrumented for the Universal Editor
You can create blocks for use with the Universal Editor when AEM is your content source. This involves:

• Adding components

• Loading component definitions in the Universal Editor

• Publishing pages

• Implementing block decoration and styles

• Deploying changes to production

• Verifying the implementation

Prerequisites

To work with Universal Editor–ready blocks, you should:

• Have prior experience with AEM authoring for Edge Delivery Services projects and the Universal Editor.

• Have access to Edge Delivery Services and understand its basics, including:

  • Access to an AEM as a Cloud Service sandbox

  • Completion of the Getting Started – Universal Editor Developer Tutorial

Adding a New Block to Your Project

As an example, you can create a block to render a quote on your page. For simplicity, all changes in the example are made on the main branch. In real projects, you should:

• Work on a separate feature branch

• Use pull requests for review before merging to main

Adobe recommends a three-phase approach for block development:

1. Create the block definition and model, review, and promote to production.

2. Author content using the new block.

3. Implement decoration and styles for the block.

The quote block example in the documentation follows this pattern.

Reference:
https://www.aem.live/developer/universal-editor-blocks

[muskaanchandwani]

Hello @SantoshBh2 !

A few points and resources that might come in handy :

1. Use AEM as a Cloud Service + Edge Delivery Services + Universal Editor - follow:
https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/edge-delivery/wy...

https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/edge-delivery/wy...

2. Content Model
- Blog Article (per page): title, description, publishDate, author, thumbnail, category, tags, optional featured/canonicalUrl/etc.
- Blog Listing: query parameters only (root path, category/tag filters, limit, sort, view, load-more).

3. Blocks to create:
- blog-article block:
> Holds metadata fields (title, description, date, author, category, tags, etc.).
> Renders article header and SEO/meta tags; body content comes from normal text/image blocks below it.

- blog-list block:
> Reads from an EDS index via JSON.
> Renders card list with filters, sorting, pagination/load-more.

4. Instrument blocks for Universal Editor:
- Define models in component-models.json
https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/edge-delivery/wy...

- Register blocks/HTML templates in component-definition.json.
- Control where blocks appear via component-filters.json.
https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/edge-delivery/wy...

5. Indexing for listings:
- Configure an EDS index (e.g. blog-index) including only /blog pages and fields: url, title, description, publishDate, category, tags, thumbnail, featured.
- blog-list block queries this index client-side for list pages, category/tag pages, “related posts”, RSS, etc.

https://www.aem.live/docs/indexing-reference

6. AEM / EDS wiring:

- In paths.yaml, map AEM /content/site/en/blog/ → public /blog/.
- Keep Git + AEM linkage per UE+EDS tutorial:
https://experienceleague.adobe.com/en/docs/experience-manager-learn/sites/edge-delivery-services/dev...

7. Templates & governance:
- Create a “Blog Article” page template in UE with the block pre-placed; authors “Use Page as Template” for new posts.
https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/sites/authoring/...

- Use editor-support.js + page metadata (e.g. template=blog-article) to:
> Restrict which blocks can be added on blog pages.
> Lock structural sections while keeping content editable.