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 structure of 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 below steps to create directory structure for website in AEM (CQ5):
- Login into CRXDE Lite. In left panel, navigate to the apps folder.
- Right click on apps folder. Select Create and Create Folder.
- 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.
- click Save All.
- Repeat the above process to create a directory structure as follows:
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:
- Right click the templates folder created in previous section.
- click Create > Create Template
- Enter following details and click Next:
|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:
- Right click the /apps/training/components folder and click Create -> Create Component.
- Enter following details.
Note: The Label name should be same as the resource type that we have give at the time of creating Template.
Name Value Label myComponent Title My Custom Component Description This is Simply Cracked Content Page Component
- Click Next until you reach till last screen. Click OK and click Save All changes.
- Notice that the myComponent component is created with a default jsp with the same name as component name myComponent .jsp
- 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>
- 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 :
In this section we are going to create a basic structure of website and pages in aem.
- Log in to AEM SiteAdmin.
- Click Websites in the left panel.
- Create a folder Click -> New -> New Folder -> Enter name as Simply Cracked.
- Click New -> New Page.
- Enter the title of the page as Home page( This will be our jcr:title ) .
- Enter Name as homepage
Tip: Always provide name in lower case as this will be a part of url.
- Select Content Page Template as Template and click Create.
- As soon as we create a page siteadmin will push our new page to content folder in crxde.
- 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.
- The page will look like a below.
You have successfully rendered the component on Template.