Static html js css pages moved to AEM as CS | Static pages migration

[georhe6]

Hi Team,

We have a bunch of static pages with rich CSS and JS. As part of the migration to AEM as a Cloud Service, the customer needs to get the same pages in AEM. We don't need to create specific components; the pages should render as they are.

One suggestion I have received is to create a new template and a page component, then add the HTML, CSS, and JS to the HTML to render the page. Is there a better approach to handle this scenario? We have around 18 static pages.

Thanks 

[konstantyn_diachenko]

Hi @georhe6 ,

Actually, it's not a good practice. I see here 2 approaches.

1) Host static pages on Apache/Dispatcher.

Create a Rewrite Map File

conf.d/rewrite/maps/static_pages.map:

/content/site/page1.html conf.d/rewrite/static-files/page1.html
/content/site/page2.html conf.d/rewrite/static-files/page2.html
/content/site/page3.html conf.d/rewrite/static-files/page3.html

Enable RewriteMap in Apache Configuration

RewriteEngine On

# Define RewriteMap from file
RewriteMap staticpages txt:conf.d/rewrite/maps/static_pages.map

# Apply the rewrite rule
RewriteCond ${staticpages:$1} !=""
RewriteRule ^(.*)$ ${staticpages:$1} [L,R=301]

2) AEM Page Component approach

Create 18 page component under /apps/project-a/components/static-pages. 

Example:

/apps/project-a/components/static-pages
|__page1
   |__page1.html
...
|__page18
   |__page18.html

To page1.html ... page18.html put anticipated static HTML content.

Create pages in the desired location. Example:

/content/project-a/static/page1:

jcr:primaryType="cq:PageContent"
sling:resourceType="project-a/components/static-pages/page1"
jcr:title="Static Page 1"

I would suggest option #1.

Best regards,

Kostiantyn Diachenko.

[DPrakashRaj]

Apart from the suggested approach by @konstantyn_diachenko you can also take a look at sling content disposition filter configuration on aem where you can exclude certain paths to be excluded from sling content disposition filter disposition to render your html as it is. 
however this is still not the best practice. Sling content disposition is responsible for creating a page based on xml structure of aem pages so it will always looks for this rules for all pages unless those pages are excluded from the list 

[giuseppebag]

hi @georhe6, 

You can create a new AEM template, such as a Static Page Template, to allow editors to add the full HTML of the page. Make sure to pay careful attention to the resource paths. You should update the relative paths in your HTML files to point to the correct locations of the CSS and JS files that are uploaded in the DAM.

<link rel="stylesheet" href="/content/dam/static-pages/styles.css">
<script src="/content/dam/static-pages/script.js"></script>

I would also recommend trying the Embed component, but be aware that it may cause issues for your purpose because of the HTL context:

<sly data-sly-test="${embed.html}">${embed.html @context = 'html'}</sly>

[AmitVishwakarma]

Hi @georhe6 ,

Solution: Host Static HTML/CSS/JS in AEM DAM + Use Sling Mapping

1. Upload All Static Files to DAM

Example folder:

/content/dam/static-site/
  ├── page1.html
  ├── page2.html
  ├── styles/
  │     └── style.css
  └── scripts/
        └── script.js

Now each HTML page is accessible via: https://<domain>/content/dam/static-site/page1.html

2. Fix Relative Paths in HTML

Update links in your HTML:

<!-- Original -->
<link rel="stylesheet" href="styles/style.css">
<script src="scripts/script.js"></script>

<!-- Updated (DAM paths) -->
<link rel="stylesheet" href="/content/dam/static-site/styles/style.css">
<script src="/content/dam/static-site/scripts/script.js"></script>

3. Sling Resource Mapping (Vanity URLs)

Make /page1.html serve from /content/dam/... by mapping paths.

Path: /apps/<project>/config/rewriter/mapping (create mapping)

Create mapping at /etc/map.publish/http:

/content/site/page1.html -> /content/dam/static-site/page1.html
/content/site/page2.html -> /content/dam/static-site/page2.html

Use a Sling Mapping Node or Apache Rewrite Rule depending on AEMaaCS setup.

4. Dispatcher Config (Optional)

Ensure Dispatcher allows HTML in DAM: In dispatcher.any:

/0001 { /type "allow" /glob "/content/dam/static-site/*.html" }

5. Test URLs

Access:

https://<domain>/content/site/page1.html

Behind the scenes, it serves from DAM → Perfect rendering, no components, no deployment needed.

Regards,
Amit