AEM Sites architecture guidance for migrating static HTML pages

This article outlines the recommended architecture and migration steps for transferring static HTML and CSS pages into Adobe Experience Manager Sites when content editing is not required.

Description description

Environment

  • Adobe Experience Manager (all versions).

Symptoms

  • Approximately 100 static HTML and CSS pages need to be migrated into AEM Sites.
  • Content does not require editing after migration.
  • The existing layout should be preserved.
  • Pages should reside in AEM Author, with optional public delivery via AEM Publish.
  • Some recurring sections exist across pages, but many pages have unique layouts.
  • JavaScript and CSS are present and must be managed appropriately.
  • Some pages include forms.

Cause

Traditional AEM Sites architecture offers a more maintainable and lower-risk approach for migrating static HTML pages that do not require ongoing content editing, compared to creating page-specific components or adopting Edge Delivery Services for this use case.

Resolution resolution

Follow the steps below to resolve the issue.

  1. Assess page layouts and reusability:

    1. Identify recurring sections across the static pages that can be implemented as reusable AEM components.
    2. Determine if a shared page template can be used or if multiple templates are needed for unique layouts.
  2. Implement AEM Sites structure:

    1. Create page templates in AEM that reflect the common structure and layout of the static pages.
    2. Develop reusable components for recurring sections such as headers, footers, navigation, and forms.
    3. Avoid creating a single, large component for each entire page, as this reduces maintainability and reusability.
  3. Migrate static content:

    1. Use an import script or migration utility to create the page structure and populate content from the existing HTML files.
    2. Manage JavaScript and CSS through AEM client-side libraries (clientlibs).
    3. Integrate any forms as AEM components or embed them as needed.
  4. Validate migration:

    1. Test a representative set of migrated pages in a lower environment.
    2. Validate visual accuracy, links, asset references, SEO metadata, and JavaScript behavior.
  5. Determine delivery requirements:

    • If pages need to be publicly accessible, configure delivery through AEM Publish.
    • If pages are only required in AEM Author for internal use, no public delivery setup is necessary.
  6. Edge Delivery Services consideration:

    • Edge Delivery Services is not recommended for direct migration of arbitrary static HTML/CSS, as it requires adapting content to the Edge Delivery Services block model and Universal Editor.
    • Consider Edge Delivery Services only if high-performance public delivery is a primary objective and the team is prepared to adopt its development and authoring model.
recommendation-more-help
experience-cloud-kcs-help-kbarticles