Create a Website in Adobe CQ5 / AEM:

In this tutorial, I will show you how to create a website in CQ5 with step by step detailed explanation of each step.

At the end of this tutorial you will learn:

· How to create the structure of the Website in AEM.

· How to create a Template in AEM.

· How to create a Rendering Component.

· How to create a Page in Site Admin in AEM.

Create Structure of Website in AEM (CQ5):

In this section, we will create a directory structure for the website. Follow the below steps to create the directory structure for a website in AEM (CQ5):

1. Login into CRXDE Lite. In the left panel, navigate to the apps folder.

2. Right-click on the apps folder. Select Create and Create Folder.

3. Enter the name as training(This will be your project name) and click OK.
Tip:- Always provide node name in lower case, because they become part of the URL.

4. click Save All.

5. Repeat the above process to create a directory structure as follows:

Your basic structure of the website is completed.

Create a Template using crxde for your website

A template is used to create a page. To create a page, the templates' content (apps/<application name>/templates/<template name>) must be copied to the corresponding position in the site tree. This happens automatically when we create a page using AEM.

When we create a template, the following information gets saved at node repository:

· Label: cq:Template – node name

· Title: jcr:title – property

· Resource Type: sling:resourceType – property

· Ranking: ranking – property

· Allowed Paths: allowedPaths – property

In this section, we will create a template in AEM:

1. Right-click the templates folder created in the previous section.

2. click Create > Create Template

3. Enter the following details and click Next:

Name	Value
Label	myTemplate
Title	Content Page Template
Description	This is Simply Cracked Content page template
Resource Type	training/components/myComponent( We need to create a component with same name “myComponent“)
Ranking	1(ranking indicates the order in which the template appears on the creation page. Setting rank to 1 ensures that the template appears first in the list.When we create a page from site admin)

4. Click the + symbol prided with Allowed Path property. The Allowed Path property defines the path where this template is to be used to create pages. Add the following value : /content(/.*)?

5. click Next on the Allowed Parent screen.

6. click OK on the Allowed children screen.

7. click Save All.

Note: Test the template created.

· Go to Site http://localhost:4502/sites.html/content

· On the toolbar-> click Create -> select Create Page.

· See the template created.

· click Cancel to close the window.

Create a Page Rendering Component:

1. Right-click the /apps/training/components folder and click Create -> Create Component.

2. Enter the following details.
Note: The Label name should be the same as the resource type that we have given at the time of creating Template.

Name	Value
Label	myComponent
Title	My Custom Component
Description	This is Simply Cracked Content Page Component

3. Click Next until you reach till the last screen. Click OK and click Save All changes.

4. Notice that the myComponent component is created with a default JSP with the same name as component name myComponent .jsp

5. Double click on myComponent .jsp and replace the JSP code with the below code.

<html>

<%@include file="/libs/foundation/global.jsp" %>

<cq:include script="/libs/wcm/core/components/init/init.jsp"/>

<head><title>Welcome to Simply Cracked </title></head>

<body>

<h1>Welcome to Simply Cracked</h1>

<h2>I am your rendering script!!</h2>

<cq:include path="par" resourceType="foundation/components/parsys" />

</body>

</html>

6. You have successfully created a page-rendering component.
Note:- global.jsp is used to include default scripts and libraries whereas init.jsp is used to display sidekick in authoring.

Create Pages in AEM :

A page is a place where the author creates and edits content, which will be viewed by site visitors in publish mode.

In this section, we are going to create a basic structure of website and pages in aem.

1. Log in to AEM SiteAdmin.

2. Click Websites in the left panel.

3. Create a folder Click -> New -> New Folder -> Enter name as Simply Cracked.

4. Click New -> New Page.

5. Enter the title of the page as Home page( This will be our jcr:title ).

6. Enter Name as homepage
Tip: Always provide a name in lower case as this will be a part of URL.

7. Select Content Page Template as Template and click Create.

8. As soon as we create a page site admin will push our new page to a content folder in crxde.

9. Double click on Home Page to open it. By default, it will open in Touch UI. Move to classic UI by replacing editor.html with cf# in URL.

10. The page will look like a below.

You have successfully rendered the component on Template.

AEM Tutorials for Beginners

March 15, 2020
Estimated Post Reading Time ~ 3 mins