Author content and publish changes

CAUTION

The quick site creation features showcased here will be released in the second half of 2021. The related documentation is available for preview purposes.

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, let’s author a few components using AEM’s 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. In the dialog, un-check all of the boxes. We want to publish the full site.

    Update publish scope

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

    Publish references

  6. Finally, click Publish in the upper right-hand corner to publish the content.

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

Learn how to create and modify Page Templates. Understand the relationship between a Page Template and a Page. Learn how to configure policies of a Page Template to provide granular governance and brand consistency for content. A well-structured Magazine Article template will be created based on a mockup from Adobe XD.

On this page