Create Site from Template

Learn how to quickly create a new AEM site using a site template.

The Story So Far

In the previous document of the AEM Quick Site Creation journey, Understand Cloud Manager and the Quick Site Creation Workflow, you learned about Cloud Manager and how it ties together the new Quick Site Creation process and you should now:

• Understand how AEM Sites and the Cloud Manager work together to facilitate front-end development
• See how the front-end customization step is entirely decoupled from AEM and requires no AEM knowledge.

This article builds on those fundamentals so you can take the first configuration step and create a new site form a template which you can then later customize using front-end tools.

Objective

This document helps you understand how to quickly create a new AEM site using a site template. After reading you should:

• Understand how to obtain AEM Site templates.
• Learn how to create a new site using a template.
• See how to download the template from your new site to provide to the front-end developer.

Responsible Role

This part of the journey applies to the AEM administrator.

Site Templates

Site templates are a way to combine basic site content into a convenient and reusable package. Site templates generally contain base site content and structure as well as site styling information to get new site started quickly. The actual structure is as follows:

• files: Folder with the UI kit, XD file, and possibly other files
• previews: Folder with screenshots of the site template
• site: Content package of the content that is copied for each site created from this template such as page templates, pages, etc.
• theme: Sources of the template theme to modify how the site looks including CSS, JavaScript, etc.

Templates are powerful because they are reusable so that your content authors can quickly create a site. And since you can have multiple templates available in your AEM installation, you have the flexibility to meet various business needs.

Obtaining a Site Template

The simplest way to get started is to download the latest release of the AEM Standard Site Template from its GitHub repository.

Once downloaded you can upload it to your AEM environment as you would any other package. See the Additional Resources section for details on how to work with packages if you need more information on this topic.

Installing a Site Template

Using a template to create a new site is very easy.

1. Sign into your AEM authoring environment and navigate to the Sites console

   • https://<your-author-environment>.adobeaemcloud.com/sites.html/content

2. Tap or click Create at the top-right of the screen and from the drop-down menu select Site from template.

   

3. In the Create Site wizard, tap or click on Import at the top of the left column.

   

4. In the file browser, locate the template you downloaded previously and tap or click Upload.

5. Once uploaded, it appears in the list of available templates. Tap or click on it to select it (which also reveals information about the template in the right column) and then tap or click Next.

   

6. Provide a title for your site. A site name can be provided or will be generated from the title if omitted.

   • The site title appears in the browsers title bar.
   • The site name becomes part of the URL.

7. Tap or click Create and the new site is created from the site template.

   

8. In the confirmation dialog that appears, tap or click Done.

   

9. In the sites console, the new sites is visible and can be navigated to explore its basic structure as defined by the template.

   

Content authors can now begin authoring.

Is Further Customization Required?

Site templates are very powerful and flexible and any number can be created for a project, allowing for easy creation site variations. Depending on the level of customization already performed on the site template you use, you may not even need additional front-end customization.

• If your site does not require additional customization, congratulations! Your journey ends here!
• If you still need additional front-end customization, or if you simply want to understand the full process in case you need future customization, please continue reading.

Example Page

If you do require additional front-end customization, keep in mind that the front-end developer may not be familiar with the details of your content. Therefore it is a good idea to provide the developer with a path to typical content that can be used as a base of reference as the theme is customized. A typical example is the home page for the master language of the site.

1. In the sites browser, navigate to the home page of the master language of the site and then tap or click the page to select it and then tap or click Edit in the menu bar.

   

2. In the editor, select the Page Information button in the toolbar and then View as published.

   

3. In the tab that opens, copy the path of the content from the address bar. It will look something like /content/<your-site>/en/home.html?wcmmode=disabled.

   

4. Save the path to later provide to the front-end developer.

Download the Theme

Now that the site has been created, the theme of the site as generated by the template can be downloaded and provided to the front-end developer for customization.

1. On the sites console, show the Site rail.

   

2. Tap or click the root of your new site and then tap or click Download Theme Sources in the site rail.

   

You now have a copy of the theme source files in your download files.

Set Up Proxy User

In order for the front-end developer to preview the customizations using actual AEM content from your site, you must set up a proxy user.

1. In AEM from main navigation go to Tools -> Security -> Users.

2. In the user management console, tap or click Create.

   

3. In the Create New User window you must at a minimum provide:

   • ID - Take note of this value as you must provide it to the front-end developer.
   • Password - Save this value securely in a password vault as you must provide it to the front-end developer.

   

4. On the Groups tab, add the proxy user to the contributors group.

   • Typing in the term contributors triggers AEM’s auto-completion feature for easy selection of the group.

   

5. Tap or click Save & Close.

You now have completed the configuration. Content authors can now begin to create content on the site preparation begins for front-end customization in the next step of the journey.

What’s Next

Now that you have completed this part of the AEM Quick Site Creation journey you should:

• Understand how to obtain AEM Site templates.
• Learn how to create a new site using a template.
• See how to download the template from your new site to provide to the front-end developer.

Build on this knowledge and continue your AEM Quick Site Creation journey by next reviewing the document Set Up Your Pipeline, where you will create a front-end pipeline to manage the customization of your site’s theme.

Additional Resources

While it is recommended that you move on to the next part of the Quick Site Creation journey by reviewing the document Set Up Your Pipeline, the following are some additional, optional resources that do a deeper dive on some concepts mentioned in this document, but they are not required to continue on the journey.

• AEM Standard Site Template - This is the GitHub repository of the AEM Standard Site template.
• Creating and Organizing Pages - This guide details how to manage pages of your AEM Site if you wish to customize it further after creating it from the template.
• How to Work with Package - Packages enable the importing and exporting of repository content. This document explains how to work with packages in AEM 6.5, which also applies to AEMaaCS.
• Site Administration Documentation - Check out the technical docs on site creation for more details on the Quick Site Creation tool’s features.

Business.Adobe.com resources