Build Website with Edge Delivery Service and Document based Authoring

Published
Edge Delivery Services provides different options for authoring content via WYSIWYG authoring, headless authoring, or document based authoring. This article solely focuses on document based authoring that enables content creators to use familiar tools like Microsoft Word or Google Docs to write and structure content.
This approach is particularly well suited for basic static websites and micro sites. By leveraging document based authoring, teams can maintain content workflows within their preferred writing tools while benefiting from AEM's scalable and fast delivery via Edge Services.
Adobe provides Git repository with AEM boilerplate template for Edge Delivery Service. Use this template to create a new repository in your GitHub account.
Next, install the AEM Code Sync GitHub app to your GitHub account and provide access to the repository created in the previous step. Afterward, you'll be able to view the website in both preview and live mode.
Replace {repo} and {owner} with the name of your repository and GitHub username respectively.
EDS Document based WebSite

Change Content Source to your Google Drive

In your fork of the Boilerplate GitHub repository, the site points to an existing content source in Google Drive. The content is read-only, to make changes to the content, you need to create a new folder in your Google Drive and copy the content from the existing folder.
To copy the content, follow these steps:
  • Open the existing content source folder in Google Drive.
  • Select all the files (nav, index, footer) you want to copy.
  • Right-click and select Make a copy.
  • Move the copied files to your new folder.
Alternatively, you can also download the files and upload them to your new folder. But it requires to convert the downloaded .docx files back into native Google Docs, when you upload them to your folder in your Google Drive. Make sure the folder is shared with the Adobe Experience Manager user (helix@adobe.com).
Share with AEM User
Now that you have the content in your own folder, you need to update the reference in fstab.yaml in your GitHub repo. Copy/paste the folder URL from your Google Drive to fstab.yaml.

Preview and Publish your Content

Once you update the content source, the preview and live URL will show 404 not found error. This happens because the contents of the newly linked folder haven't been promoted to the preview and live environments yet.
To preview and publish content, author has to install AEM Sidekick Chrome extension. After installing the extension in Chrome, make sure to pin it for quick and easy access.AEM Sidekick Chrome Extension
Navigate to the Google Drive folder and activate the AEM Sidekick by clicking on your pinned extension. A new toolbar will appear on the bottom of the screen.AEM Sidekick Toolbar
Click on the Preview button to view content in preview environment and the Publish button to publish the content to live environment. Content must be previewed before it can be published — publishing without previewing will not be successful.
You can update the content directly in your Google Drive folder. Any changes you make will appear in preview and live environment once you click the respective buttons.

Development in Local Environment

To get started with development, install the AEM Command Line Interface (CLI).
npm install -g @adobe/aem-cli
From the project directory where you cloned the repository, start your local development environment using the following command.
aem up
This will launch http://localhost:3000 and you are ready to make changes. You can make changes in the blocks folder, typically in .css or .js file and you should see the changes in your browser immediately.
Once you're ready and push the changes to GitHub, the updates will be visible in both the preview and live environments immediately. No AEM Sidekick preview or publish action is needed for code changes.
Hopefully this article has provided you with a good understanding of how to set up and use document based authoring with Edge Delivery Service. If you have any questions or feedback, please feel free to reach out.
Write your Comment