Introduction to authoring and publishing

It is important to understand how a user will update content for the website. In this chapter we will adopt the persona of a Content Author and make some editorial updates to the site generated in the previous chapter. At the end of the chapter, we will publish the changes to understand how the live site gets updated.

Prerequisites

This is a multi-part tutorial and it is assumed that the steps outlined in the Create a site chapter have been completed.

Objective

  1. Understand the concepts of Pages and Components in AEM Sites.
  2. Learn how to update content of the website.
  3. Learn how to publish changes to the live site.

Create a new page

A website is typically broken into pages to form a multi-page experience. AEM structures content in the same way. Next, create a new page for the site.

  1. Log in to the AEM Author Service used in the previous chapter.

  2. From the AEM Start screen click Sites > WKND Site > English > Article

  3. In the upper right-hand corner click Create > Page.

    Create Page

    This will bring up the Create Page wizard.

  4. Choose the Article Page template and click Next.

    Pages in AEM are created based off of a Page Template. Page Templates will be explored in greater detail in the Page Templates chapter.

  5. Under Properties enter a Title of “Hello World”.

  6. Set the Name to be hello-world and click Create.

    Initial Page properties

  7. In the dialog pop-up click Open to open the newly created page.

Author a Component

AEM Components can be thought of as small modular building blocks of a web page. By breaking the UI into logical chunks or Components, it makes it much easier to manage. In order to re-use components, the components must be configurable. This is accomplished via the author dialog.

AEM provides a set of Core Components that are production ready to use. The Core Components range from basic elements like Text and Image to more complex UI elements like a Carousel.

Next, author a few components using the AEM Page Editor.

  1. Navigate to the Hello World page created in the previous exercise.

  2. Ensure that you are in Edit mode and in the left side-rail click the Components icon.

    Page editor side rail

    This will open up the Component library and list the available Components that can be used on the page.

  3. Scroll down and Drag+Drop a Text (v2) component on to the main editable region of the page.

    Drag + Drop text component

  4. Click the Text component to highlight and then click the wrench icon Wrench icon to open the Component’s dialog. Enter some text and save the changes to the dialog.

    Rich Text Component

    The Text component should now display the rich text on the page.

  5. Repeat the above steps, except drag an instance of the Image(v2) component on to the page. Open the Image component’s dialog.

  6. In the left rail, switch to the Asset finder by clicking the Assets icon asset icon.

  7. Drag+Drop an image into the Component’s dialog and click Done to save the changes.

    Add asset to dialog

  8. Observe that there are components on the page, like the Title, Navigation, Search that are fixed. These areas are configured as part of the Page Template and cannot be modified on an individual page. This will be explored more in the next chapter.

Feel free to experiment with some of the other components. Documentation about each Core Component can be found here. A detailed video series about Page authoring can be found here.

Publish updates

AEM environments are split between an Author Service and a Publish Service. In this chapter we have made several modifications to the site on the Author Service. In order for site visitors to view the changes we need to publish them to the Publish Service.

High level diagram

High level flow of content from Author to Publish

1. Content authors make updates to the site content. The updates can be previewed, reviewed and approved to be pushed live.

2. Content is published. Publication can be performed on-demand or scheduled for a future date.

3. Site visitors will see the changes reflected on the Publish service.

Publish the changes

Next, let’s publish the changes.

  1. From the AEM Start screen navigate to Sites and select the WKND Site.

  2. Click the Manage Publication in the menu bar.

    Manage publication

    Since this a brand new site, we want to publish all of the pages and can use the Manage Publication wizard to define exactly what needs to be published.

  3. Under Options leave the default settings to Publish and schedule it for Now. Click Next.

  4. Under Scope, select the WKND Site and click Include Children Settings. In the dialog, check Include children. Un-check the rest of the boxes to ensure the entire site is published.

    Update publish scope

  5. Click the Published References button. In the dialog, verify that everything is checked. This will include the Standard Site Template and several configurations generated by the Site Template. Click Done to update.

    Publish references

  6. Finally, check the box next to WKND Site and click Next in the upper right-hand corner.

  7. In the Workflows step, enter a Workflow title. This can be any text and can be useful as part of an audit trail later. Enter “Initial publish” and click Publish.

Workflow step initial publish

View published content

Next, navigate to the Publish service to view the changes.

  1. An easy way to get the URL of the Publish Service is to copy the Author url and replace the author word with publish. For example:

    • Author URL - https://author-pYYYY-eXXXX.adobeaemcloud.com/
    • Publish URL - https://publish-pYYYY-eXXXX.adobeaemcloud.com/
  2. Add /content/wknd.html to the Publish URL so that the final URL looks like: https://publish-pYYYY-eXXXX.adobeaemcloud.com/content/wknd.html.

    NOTE

    Change wknd.html to match the name of your site, if you provided a unique name during site creation.

  3. Navigating to the Publish URL you should see the site, without any of the AEM authoring functionality.

    Published site

  4. Using the Navigation menu click Article > Hello World to navigate to the Hello World page created earlier.

  5. Return to the AEM Author Service and make some additional content changes in the Page Editor.

  6. Publish these changes directly from within the page editor by clicking the Page Properties icon > Publish Page

    publish direct

  7. Return to the AEM Publish Service to view the changes. Most likely you will not immediately see the updates. This is because the AEM Publish Service includes caching via an Apache web server and CDN. By default HTML content is cached for ~5 minutes.

  8. To bypass the cache for testing/debugging purposes simply add a query parameter like ?nocache=true. The URL would look like https://publish-pYYYY-eXXXX.adobeaemcloud.com/content/wknd/en/article/hello-world.html?nocache=true. More details about the caching strategy and configurations available can be found here.

  9. You can also find the URL to the Publish Service in Cloud Manager. Navigate to the Cloud Manager Program > Environments > Environment.

    View Publish Service

    Under Environment Segments you can find links to the Author and Publish services.

Congratulations!

Congratulations, you have just authored and published changes to your AEM Site!

Next Steps

In a real-world implementation planning a site with mockups and UI designs typically precedes Site creation. Learn how Adobe XD UI Kits can be used to design and accelerate your Adobe Experience Manager Sites implementation in UI planning with Adobe XD.

Want to continue to explore AEM Sites capabilities? Feel free to jump right in to the chapter on Page Templates to understand the relationship between a Page Template and a Page.

On this page