AEM: Create a Website in CQ5

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:

Create Structure of Website in AEM (CQ5):

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

  1. Login into CRXDE Lite. In left panel, navigate to the apps folder.
  2. Right click on 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.
    create-a-website-in-cq5-aem-aemcq5tutorials-1
  4. click Save All.
    create-a-website-in-cq5-aem-aemcq5tutorials-2+
  5. Repeat the above process to create a directory structure as follows:
    create-a-website-in-cq5-aem-aemcq5tutorials-3

Your basic structure of 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’s content (apps/<application name>/templates/<template name>) must be copied to corresponding position in site tree. This happens automatically when we create a page using AEM.

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

  • Label: cq:Template – node name
  • Title: jcr:title – property
  • Resource Type: sling:resourseType  – property
  • Ranking: ranking – property
  • Alowed Paths: allowedPaths – property

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

  1. Right click the templates folder created in previous section.
  2. click Create > Create Template
  3. Enter following details and click Next:
NameValue
LabelmyTemplate
TitleContent Page Template
DescriptionThis is Simply Cracked Content page template
Resource Typetraining/components/myComponent( We need to create a component with same name “myComponent“)
Ranking1(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)

create a template in website in cq5 simply-cracked

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(/.*)? 

create-a-website-in-cq5-aem-allowed-path-aemcq5tutorials

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.create-a-website-in-cq5-aem-aemcq5tutorials-6
  • See the template created.create a website in cq5 aem simply-cracked 7
  • 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 following details.
    Note: The Label name should be same as the resource type that we have give at the time of creating Template.create a component in website in cq5 simply-cracked

    NameValue
    LabelmyComponent
    TitleMy Custom Component
    DescriptionThis is Simply Cracked Content Page Component
  3. Click Next until you reach till 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 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 author create and edit 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.
    create a folder in website in cq5 simply-cracked
  4. Click New -> New Page.
    create a page in website in cq5 simply-cracked
  5. Enter the title of the page as Home page( This will be our jcr:title ) .
    create page in website in cq5 simply-cracked
  6. Enter Name as homepage
    Tip: Always provide 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 siteadmin will push our new page to 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.test website in cq5 author mode simply-cracked

You have successfully rendered the component on Template.

Spread the love
  •  
  •  
  •  
  •  
  •  
  •  

Leave a Reply

Your email address will not be published. Required fields are marked *