How to Quickly Create a Website

You are reading the AEM 6.2 version of How to Quickly Create a Website.
This documentation is also available for the following versions:  AEM 6.1  AEM 6.0  AEM 5.6.1  AEM 5.6  CQ 5.5  CQ 5.4 

Introduction

This tutorial enables you to quickly create a website with CQ5, based on an existing website. It is mainly targeted at Day Pre-Sales staff and Day Partners preparing Proof Of Concept for a project. You only need CQ5 WCM, CRXDE and a Web browser.

Creating the application, the Content Page Template, the Content Page Component and a Web Page

  1. In CRX Explorer, copy the node apps/geometrixx, name the target node <customername> and paste it under apps.

  2. Set the title (jcr:title property) of the Template apps/<customername>/templates/contentpage to <Customername> Content Page Template.

  3. Replace the thumbnail /apps/<customername>/templates/contentpage/thumbnail.png with one representing your Template.

    • Create a PNG image, 128 x 98 px big.

    • In your file system, copy the image and paste it into /apps/<customername>/templates/contentpage/ .

  4. Set the property allowedPaths of the Template /apps/<customername>/templates/contentpage to /content(/.*)? to make the template available for all the new pages below /content.

  5. Set the property sling:resourceType of the node /apps/<customername>/templates/contentpage/jcr:content to <customername>/components/contentpage.

  6. In CRXDE, under the Component /apps/<customername>/components/contentpage, create the file contentpage.jsp.

  7. Copy/paste following code into the script contentpage.jsp:

    <%@page session="false" contentType="text/html; charset=utf-8" %><% %><%@taglib prefix="cq" uri="http://www.day.com/taglibs/cq/1.0" %><% %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <%@include file="/libs/foundation/global.jsp" %><% %><head> <cq:include script="/libs/wcm/core/components/init/init.jsp"/> <% currentDesign.writeCssIncludes(out); %> MyCustomerHead </head> <body> MyCustomerBody </body> </html>
  8. In your browser, open the Website tab.

  9. Under Websites, create a new page with the Title www.<customername>.com, the label <customername> and the <Customername> Content Page Template.

  10. Under the Page www.<customername>.com, create a new page with the Title English, the label en and the <Customername> Content Page Template. If needed, create one Page with the Title French, the label fr and one Page the Title German, the label de.

  11. Under the Page English, create as many pages as needed in order to reproduce the site map of your customer site.

Setting up the Designer

  1. In CRX Explorer, copy the node /etc/designs/geometrixx, name the target node <customername> and paste it under /etc/designs.

  2. In contentpage.jsp, insert <% currentDesign.writeCssIncludes(out); %> at the appropriate location.

  3. In CRXDE, open the file /etc/designs/<customername>/static.css and adapt the styles to your needs.

  4. Link your pages to the <customername> designer: in CRX Explorer, select the node /content/<customername>/jcr:content. Double-click Property cq:designPath and set /etc/designs/<customername> as Value.

Importing the original Web Page (CSS, HTML and images) into your project

  1. In Firefox, browse to the page that you want to import, select Save Page As …, enter <customername> as Filename and save it on your desktop.

  2. Test the downloaded website on your desktop: open the downloaded <customername>.htm file in your browser and compare the result with the original website. If it is different, open the file in a text editor and fix the problems. Problems are often caused by paths for css files and images that need to be correctly reset.

  3. In your filesystem, zip all the resources of your webpage (html, css, images, ...).

  4. In CRX Explorer, under the node /apps/<customername>/components/contentpage, create a New Node: set the Name to resources and the Type to sling:Folder.

  5. In CRX Content Loader, import the zip file and expand it into the node /apps/<customername>/components/contentpage/resources:

    • Browse to http://localhost:4502/crx/loader/index.jsp.

    • Click Browse beside Root path for import:, browse to the node /apps/<customername>/components/contentpage/resources and click Open.

    • Click Browse beside File to upload:, browse to your zip file and click Open.

    • Check Auto-Expand and Expand file content directly below selected root checkboxes.

    • Click Import.

    In a normal project setup, the resources wouldn't be placed under the Component. It is only done here to maximize your efficiency.

  6. In CRXDE, open the file <customername>.html and copy the content between the <head> and </head> tags. In the script contentpage.jsp, select MyCustomerHead and paste the previously copied content.

  7. In the file <customername>.html, copy the content between the <body> and </body> tags. In the script contentpage.jsp, select MyCustomerBody and paste the previously copied content.

  8. In the script contentpage.jsp, reset the paths of the css files and the images by replacing: <customername>_files with: /apps/<customername>/components/contentpage/resources

    Make sure that the names of your resources don't start with _ (underscore).

    .
  9. In the script contentpage.jsp, replace all external links with internal links. This way the external links don't appear broken when your machine is not online.

  10. In your browser, in the Website tab, open the page www.<customername>.com. It should display your <customername> web page.

Replacing static content by dynamic content using CQ Foundation Components

  1. In CRXDE, in the file contentpage.jsp, select the content of the middle part of the page and replace it with: <cq:include path="par" resourceType="foundation/components/parsys" />. The content has been replaced by the parsys Foundation Component.

  2. In your browser, refresh your page. The features of the Paragraph System are now available to you: you can include other Components, for example, Flash, Text or Text Image.

  3. By following the previous steps, you can add other CQ Foundation Components as for example topnav or toolnav.

  4. In your browser, in the Website tab, open a page of your choice from your application. Copy content from the original web page and paste it into your page.

  5. Adapt the design to look like the design of the original website.

Creating a Media Library

  1. In your browser, download about 20 resources (pictures, banners, pdf, …) from the original website: open a Google page, type site:<customer-url>, click search and click the Images tab. Save the desired resources on your computer.

  2. In your filesystem, zip all the resources.

  3. In CRX Content Loader, import the zip file and expand it into the node content/dam/<customername>. The resources are now in the Media Library and available in the Content Finder, when browsing through the Pages.

Any questions?

Have a question about this or any other AEM topic? Ask our Community.
Learn more about AEM topics on our help hub.
Was this helpful?

By submitting your feedback, you accept the Adobe Terms of Use.

Thank you for submitting your feedback.

On this page