AEM Tutorial On Building A Sightly Page Component

AEM, Tutorial

The purpose of this tutorial is to show you how to build an AEM page component using sightly. You can read more about sightly here: Sightly

For this tutorial we will be using crxde lite. This tutorial does not go into full detail, but does provide all the code that was used in the creation of this component for learning purposes.

For this tutorial I was using: AEM 6.0. You should be able to follow along with other versions of this software.

In order to follow along with this tutorial, you will need to have a basic project structure already set up, or you can follow along with this tutorial here:

Basic Project Setup Tutorial

If you have not completed the tutorial listed above, you can download a package from GitHub that has the completed project from here: AEM-Getting-Started. Just follow the instructions in the “readme” file to install the package into your instance of AEM.

If you have completed the previous steps, we can get started.

  1. Once your instance of AEM is up and running, navigate to crxde lite. Navigate to the “myProject” folder, click on the “components” folder, and then click on the “page” folder.

  2. Right click on this folder and choose “Create Component”. Enter the following information:


Keep clicking the "Next" button until you can click the "OK" button.

3. Right click on the component you just created, and choose "Create File". Name the file: simplePageSightly.html.

4. Right click on the "simplePageSightly.jsp" file, and choose delete.

5. Now, open the "simplePageSightly.html" file, and add the following code to it:

6. Next we need to create a template for the page component. Right click on the "templates" folder, and choose "Create Template". An example is posted below:


Click the "Next" button. In the "Allowed Paths" section add the following: /content(/.*)?
Keep clicking the "Next" button until you can click the "OK" button.

7. Next go to the websites console and choose the option to create a page. Make sure to choose the "Simple Page Template - Sightly" from the template options.

8. Now open up the page you just created, and you should see your simple page component that you just created with sightly.

Summary: This tutorial showed you how to create a simple page component by using sightly. You can build upon this page by adding content to it, or by making a full site.

I hope you enjoyed this tutorial. If you have any questions or comments, please feel free to post them below.

You can download a package of the component on GitHub from here: Sightly Page Component