How To Add A Page In AEM Edge Delivery Services

If you’ve just finished following Edge Deliver Services (hereafter EDS) official getting started tutorial, you may be wondering how to expand upon the website you just made. This article will show you how to build and publish a new page to your AEM website. This article assumes you have completed the original tutorial, and have a running website with the AEM Sidekick extension installed on your browser.

First, create a new file in your Google Drive

When you create your new file, you will be prompted to “Create and Share,” since you’ve already shared your folder with helix@adobe.com in the official tutorial. Sharing the folder and by extension the documents within it, allows EDS to see and pull content from your Google Drive into your website. Click “Create and Share” and start editing your new Document.

The first thing to be aware of when editing a document in a EDS project is the name of the document. This name will be used to create the URL that the page lives at.

As an example, the main URL for the project you’re seeing in this blog's screenshots is https://main--drews-franklin-demo--drew-cummings.hlx.live/.

If I create a new document named “new page,” then the URL that page will exist at when it’s published is https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page. It’s worth noting that all generated URLs will be lowercase, even if the name of the document is capitalized. For readability and navigation’s sake, make sure your document names are short and relevant.

Go ahead and update the title of your document to “new page”

Now let’s add a title to the top of our document. Set your text to “Heading 1” and put down your title.

Let’s see what that looks like on the website. Go ahead and go to the generated URL, in my case https://main--drews-franklin-demo--drew-cummings.hlx.live/new-page, and see how it loo-

Oh no! If you see this, don’t panic. This is what a ‘page not found’ error looks like in the default EDS demo. Our website can’t find our page right now because we haven’t previewed and published it yet. Navigate back to your document and click on the AEM Sidekick extension, the leftmost icon in the screenshot below

After a moment, your helper toolbar should appear. You should notice a “preview” button in the left-hand portion of it with a red dot. This red dot indicates that there is new content to be staged and pushed to the website. Go ahead and click on that button and look at the page it loads up for you.

This is the preview of your new page. This is what your page will look like on the “live” site once you publish it. It’s important to note that while content has not been published, it will not appear on the live page, and a page that hasn’t been published will not appear on the live website. This allows you to experiment with content and tweak things to your liking without your site’s users seeing it until you’re ready to publish it. For now, let’s leave this page unpublished, and go back to the Google Doc to add more content.

As it exists right now, our page is rather plain. Let’s add some color to it with an image. For simplicity’s sake, we’ll use the blue DNA picture from the sample page.

Hit preview and check out what it looks like.

Looking good! If you don’t want the text overlayed on top of the picture, just place the picture below your heading text in the document instead of above it and you’ll get a page that looks like this.

The text overlay only occurs for the first image in the article, and only when formatted as initially shown, with the text in Title or Heading 1 style directly below the image.

Now let’s add some text content to this article. I’ll use Lorem Ipsum, a Latin text traditionally used in the publishing industry for experimenting with text layouts. Lorum Ipsum allows us to see how Arabic alphabet content will look on a page without getting distracted by accidentally reading it. Feel free to add any text content you want instead. Here’s how it looks in my Google Doc:

And here’s how it looks on my preview page:

Finally, let’s see how an image will look when placed in-line with the content of the page. I’ll add one of the pictures from the demo page after the first paragraph to demonstrate how it will look on the site below:

It’s worth noting that EDS pulls content from the Google Doc and uses it to generate HTML files that create the website. As a result, the size of the image in the Google Doc does not correlate to the size of the image on the previewed/live page. If you want to adjust the image size on the site, you need to adjust the native resolution of the image.

Now that we’ve got a page we’re happy with showing to the world, we have one last step we need to accomplish before publishing. I want to change the title of this page in the metadata from “My New Page” to “Demo Page” without changing the title of my article. I also want to add a description to the metadata to make the page easier for search engines to find. To do this, we’ll need to add a metadata block.

The easiest way to add a metadata block is to just copy and paste the one from the demo homepage, but if you’re interested in making one from scratch I’ll walk you through that process.

First, insert a 2X3 table at the end of your document. Highlight the cells in the first row, right-click, and select “merge cells.”

Type “Metadata” in the top row, then type in “Title” and “Description” into the left-hand cells of the next two rows. Type what you want the title to be to the right of the “Title” cell, and what you want the description to be to the right of the “Description” cell. The end result should look something like this:

Go ahead and preview the page now. You’ll notice that the content of the page hasn’t changed at all, but if you look at the tab in Chrome, our new title will be listed instead of the default title we had previously.

If we inspect the HTML file of the webpage, we can see that both our title and description are present as properties of the webpage

You’re ready to publish! Click the “Publish” button on the left-hand side of your AEM Sidekick extension that appears on the preview page, and see your new live webpage on your website.

Congrats on adding a page to your website! There’s a chance that, if you previously visited the URL of this page before publishing and got the 404 Page Not Found Error, you will still see that error after publishing. This can happen due to a number of reasons, but unless you got an error message from the AEM Sidekick extension, it’s unlikely that your content has actually gone through. Just wait a minute or two to refresh the page and you should see your published page.

If you enjoyed this tutorial and want to learn more about AEM products, check out our article on what AEM is here.

About The Author

Contact Us

Podcast Episodes