{"total":144,"offset":0,"limit":144,"data":[{"path":"/developer/tutorial","title":"Getting Started – Developer Tutorial","image":"/developer/media_1d00989ba18e942fbddc9bb108add01e153029f22.png?width=1200&format=pjpg&optimize=medium","description":"This tutorial will get you up-and-running with a new Adobe Experience Manager (AEM) project. In ten to twenty minutes, you will have created your own ...","content":"style\ncontent\n\nGetting Started – Developer Tutorial\n\nThis tutorial will get you up-and-running with a new Adobe Experience Manager (AEM) project. In ten to twenty minutes, you will have created your own site and be able to create, preview, and publish your own content, styling, and add new blocks.\n\nPrerequisites:\n\nYou have a GitHub account, and understand Git basics.\nYou understand the basics of HTML, CSS, and JavaScript.\nYou have Node/npm installed for local development.\n\nThis tutorial uses macOS, Chrome, and Visual Studio Code as the development environment and the screenshots and instructions reflect that setup. You can use a different operating system, browser, and code editor, but the UI you see and steps you must take may vary accordingly.\n\nTIP: If you would like to get your AEM project started the fastest way Adobe offers with content you already know, use the AEM Modernization Agent. Just create your boilerplate repository and then collaborate with the agent to import your site.\n\nGet started with the boilerplate repository template\nhttps://main--helix-website--adobe.aem.page/developer/videos/tutorial-step1.mp4\n\nThe fastest and easiest way to get started following AEM best practices is to create your repository using the Boilerplate GitHub repository as a template.\n\nhttps://github.com/adobe/aem-boilerplate\n\nClick the Use this template button and select Create a new repository, and select the user org that owns the repository\n\nWe recommend that the repository is set to public.\n\nThe only remaining step in GitHub is to install the AEM Code Sync GitHub App on your repository by visiting this link: https://github.com/apps/aem-code-sync/installations/new\n\n\n\n\nIn the Repository access settings of the AEM Code Sync App, make sure you select Only select Repositories (not All Repositories). Then select your newly created repository, and click Save.\n\nNote: If you are using Github Enterprise with IP filtering, you can add the following IP to the allow list: 3.227.118.73\n\nCongratulations! You have a new website running on https://----.aem.page/ In the example above that’s https://main--mysite--aemtutorial.aem.page/\n\n\n\n\nEdit, Preview and Publish your content\n\nNavigate to Author on https://da.live/ and find the example content.\n\nEdit content and preview and publish content as needed. For more information on authoring see https://da.live/docs.\n\n\nInstall Sidekick\n\n\nTo interact with AEM as an author across environments we strongly recommend installing the Sidekick Chrome extension. Find the Chrome extension in the Chrome Web Store.\n\nAfter adding the extension to Chrome, don’t forget to pin it, this will make it easier to find it.\n\nStart developing styling and functionality\nhttps://main--helix-website--adobe.aem.page/developer/videos/tutorial-step4.mp4\n\nTo get started with development, it is easiest to install the AEM Command Line Interface (CLI) and clone your repo locally through using the following.\n\nnpm install -g @adobe/aem-cli\ngit clone https://github.com//\n\n\n\n\nFrom there change into your project folder and start your local development environment using the following.\n\ncd \naem up\n\n\n\n\nThis opens http://localhost:3000/ and you are ready to make changes.\nA good place to start is in the blocks folder which is where most of the styling and code lives for a project. Simply make a change in a .css or .js and you should see the changes in your browser immediately.\n\nOnce you are are ready to push your changes, simply use Git to add, commit, and push and your code to your preview (https://----.aem.page/) and production (https://----.aem.live/) sites.\n\nThat’s it, you made it! Congrats, your first site is up and running. If you need help in the tutorial, please join our Discord channel or get in touch with us.\n\nTo get you to a live website as fast as possible, this tutorial uses Document Authoring as the content source. Universal Editor can also be configured for your project, to provide a WYSIWYG + Form-based authoring option.\n\nNOTE: Edge Delivery Services supports multiple content sources including Google Drive, Microsoft Sharepoint and AEM.\n\nNext Steps\n\nNow that your site is up and running, choose how you want to continue:\n\nBuild your first block - Create, style, and deploy a custom block from scratch.\nBuild with AI - Configure your project for AI-assisted block creation and development.\n\nPrevious\n\nBuild\n\nUp Next\n\nAnatomy of an AEM Project","lastModified":"1773252759","labs":""},{"path":"/docs/go-live-checklist","title":"Go-Live Checklist","image":"/docs/media_1da4bd7d3a1161f686fa72258c51bd49249fa142a.png?width=1200&format=pjpg&optimize=medium","description":"The go-live checklist is a summary of best practices to consider when launching a website. These steps are generally good practices but have some aspects ...","content":"style\ncontent\n\nGo-Live Checklist\n\nThe go-live checklist is a summary of best practices to consider when launching a website. These steps are generally good practices but have some aspects specific to Adobe Experience Manager.\n\nSteps Before Go-Live\nContent and Design QA\n\nMake sure that your content and design conforms to the specifications and that you are happy with the website you see on your projects .aem.live domain. This may include checks for specific accessibility and SEO requirements of your project.\n\nPerformance Validation\n\nEvery AEM project should produce a lighthouse score of 100 for mobile and desktop from Google Pagespeed insights on its respective .aem.live site.\n\nSee the document Keeping it 100, Web Performance for more information.\n\nAnalytics Validation\n\nMake sure that all your analytics setup and the rest of your martech stack is firing as expected and visitor data is visible in your reporting dashboards.\nIn any relaunch of a website the analytics instrumentation will change based on loading sequence and performance.\n\nIt is important to expect that the baseline of any metric captured by analytics will change. Contact the corresponding analysts to make sure that the adjustment of the baseline is understood and expected.\n\nMetrics that may change their baselines as reported by analytics may include pageviews, conversion rates, bounce rates, time on page, etc. Depending on the change in loading patterns the baseline of the metrics may go up and down.\nBottom of the funnel metrics like checkout, transactions or form submission that are captured by operational systems are not affected and are expected to stay flat past a lift-and-shift launch.\n\nRUM instrumentation\n\nTo be able to see performance impact quickly and reliably and to compare before / after launch metrics we recommend instrumenting your website before launch with Real Use Monitoring (RUM), ideally as early as possible. Adding RUM to your existing site is trivial and can give you important operational insights even before launch.\n\nLegacy Redirects\n\nIn most migrations there are legacy URLs that are retired. Make sure those are reflected in your redirects spreadsheet (redirects.xlsx in sharepoint or redirects in google), found in your project content folder. Check Google Search Console for the most impactful backlinks (in terms of SEO) to create redirects for.\n\nSee the document Redirects for more information.\n\nSitemap & Robots\n\nFor most websites with a significant number of pages, a sitemap is desirable. AEM automatically generates sitemaps from the query index. For multilingual sites, adding hreflang to the sitemap ensures that the website correctly targets the appropriate geographic and language audience, which is essential for SEO and prevents issues like duplicate content across different language versions (aka SEO cannibalisation) and improves the search engine's ability to serve the right version of the content to the right users.\n\nIf you have a sitemap that’s generated for your site make sure it is discoverable from your robots.txt. Note that robots.txt is (technically) case sensitive, and a good example is:\n\nUser-agent: *\nAllow: /\n\nSitemap: https:///sitemap.xml\n\n\nNote: aem.page and aem.live are kept hidden from crawlers intentionally, to avoid duplicate content. There is no need to set the robots.txt to Disallow crawlers during development.\n\nIt is important to understand that a Disallow in robots.txt is potentially helping with crawler budget issues under certain conditions, but does not prevent a page from being added to the google index, and conversely will make its removal via noindex impossible. URLs of pages that have a Disallow can still be discovered in a SERP.\n\nAn effective way to remove a URL from the index is to Allow crawlers and put a noindex robots tag on the page.\n\nAdding a custom robots.txt is done via config service.\n\nSee the documents Indexing and Sitemaps for more information.\n\nCanonical URLs\n\nMake sure canonical URLs return 2xx HTML response status code (not 3xx or 4xx) and that they are correctly implemented, which is crucial for preventing duplicate content issues across the site. Proper canonicalization helps search engines understand which versions of similar pages to index and display in search results, directly impacting SEO performance.\n\nSee the following external documentation for more information: Consolidate duplicate urls\n\nFavicon\n\nAdding a favicon to your site gives it a professional look in your visitor’s browsers.\n\nSee the document Favicon for more information.\n\nAuthentication for Authors\n\nBy default, authors don’t need to be logged in to use AEM Sidekick. If you decide you want to control who can preview and publish documents this can be configured.\n\nSee the document Configuring Authentication for Authors for more information.\n\nSharePoint Access\n\nIf your content is in SharePoint, follow this guide to configure dedicated access which you control.\n\nCDN Configuration\n\nOne of the last steps in a go-live is usually to update your CDN to point to your aem.live endpoint.\n\nYou can either use your existing, self-managed CDN or an Adobe-managed CDN included in your license. See here for details on supported CDN options.\n\nIdeally the CDN configuration is tested in a staging environment to make sure everything works as expected, which includes redirects from www to APEX and vice-versa.\n\nPush Invalidation Setup\n\nMake sure push invalidation is properly set up according to the document Configuring Push Invalidation for BYO Production CDN. Test the setup by publishing a small change and verifying that the change is visible on the production domain.\n\nNotify Engineering On-Call\n\nThe Edge Delivery Services team is closely monitoring all systems as part of our standard 24/7 operations. Multi-tenant incidents typically appear on status.adobe.com. If we detect irregularities affecting a single tenant, we will reach out to the affected customer to help them address the problem.\n\nBy notifying us about your go-live, you can help us pay extra attention to your project during the go-live, and we can contact you via Teams or Slack more quickly in case of any anomalies we can assist with.\n\nTo notify us, please send an email to aemgolives@adobe.com and include the following information:\n\naem.live URL(s) that will be going live on Edge Delivery Services\nProduction domain\nPlanned go-live date and time\nPrimary contact person for the go-live\nTeams or Slack channel for real-time collaboration with Engineering\nIf you do not yet have a collaboration channel set up yet, please refer to Teams Collaboration for guidance.\nPost Go-Live Validation\nPerformance Validation\n\nValidate that the performance is still at a lighthouse score of 100 via pagespeed insights on the production environment. Introducing a CDN layer can have adverse performance effects that are usually visible on the protocol layer. Typical culprits are running HTTP/1.1 or ineffective origin caching as well as bot detection or other libraries injected by the CDN configuration.\n\nGoogle Search Console\n\nIf you have an active Google Search Console with your sitemap uploaded, it may be valuable to get a coverage report and make sure that indexing works as expected. The Google Search Console should be monitored for the weeks after a go-live to track the indexing status of new and updated pages, ensuring they are properly recognized by Google. It's crucial to check for total clicks, total impressions, backlinks changes and crawl errors, as these can significantly impact the site's SEO performance and authority.\n\nMartech and Analytics validation\n\nCertain aspects of your martech stack may be tied to specific origins / hostnames, and operate differently on staging (or .page and .live) hostnames if not configured correctly. It is advisable to make sure that all the important tags in the martech stack fire correctly and the information is continuously collected after a go-live.\n\n404 Report\n\nAfter a website has been migrated there is usually a set of 404 Not Founds, which should be monitored after the go-live and redirected to popular page URLs. This information can be pulled from your site analytics and the respective Slack bot report. Monitoring this for the weeks after a go-live is recommended.\n\nPrevious\n\nLaunch\n\nUp Next\n\nBYO CDN Setup Overview","lastModified":"1758639182","labs":""},{"path":"/docs/","title":"Documentation","image":"/default-social.png?width=1200&format=pjpg&optimize=medium","description":"Documentation hub for authors, developers and operations.","content":"Documentation\nHelpful guides for your journey with Adobe Experience Manager\nBuild\nPublish\nLaunch\nstyle\nheading\nstyle\ncontent\nBuild\nDeveloper Tutorial\n\nThis tutorial will get you up-and-running with a new project.\n\nAnatomy of a Project\n\nDiscover how a typical project should look from a code standpoint.\n\nBlock Collection\n\nA collection of blocks considered a part of the product and are recommended as blueprints for blocks in your project.\n\nSpreadsheets\n\nMicrosoft Excel workbooks and Google Sheets are translated into JSON files that can easily be consumed by your website or web application.\n\nIndexing\n\nHow to keep an index of all the published pages in a particular section of your website.\n\nKeeping it 100\n\nThe quality of the experience of consumers of your website is crucial to achieving the business goals of your website and the satisfaction of your visitors.\n\nMarkup - Sections\n\nThe markup and DOM are constructed in a way that allows flexible manipulation and styling.\n\nFavicon\n\nAdding a favicon to your site gives it a professional look in your visitor’s browsers.\n\nCustom Headers\n\nLearn how to apply custom HTTP response headers to resources, for example to allow CORS.\n\nDevelopment Collaboration and Good Practices\n\nBecome a better developer and team mate with these tips from successful AEM project leads.\n\nPublish\nAuthoring\n\nIf you use Microsoft Word or Google Docs, then you already know how to create content.\n\nAuthoring with AEM\n\nAuthoring content in AEM as a Cloud Service using the Universal Editor, you benefit from the power of AEM’s robust tool set for content management and the unparalleled performance of Edge Delivery Services.\n\nBulk Metadata\n\nIn some cases, it is useful to apply metadata en masse to a website.\n\nSlack Bot\n\nWe are available to you on Slack, and our Slack Bot can perform useful tasks.\n\nPlaceholders\n\nPlaceholders can be managed as a spreadsheet that is either in the root folder of the project or in the locales root folder in the case of a multilingual site.\n\nSitemap\n\nAutomatically generate sitemap files to be referenced from your robots.txt. This helps with SEO and the discovery of new content.\n\nLaunch\nGo Live Checklist\n\nThe go-live checklist is a summary of best practices to consider when launching a website.\n\nPush Invalidation\n\nAutomatically purge content on your production CDN, whenever an author publishes content changes.\n\nCloudflare Worker Setup\n\nLearn how to configure Cloudflare to deliver content.\n\nAkamai Setup\n\nDiscover how to use the Akamai Property Manager to configure a property to deliver content\n\nFastly Setup\n\nThis guide illustrates how to configure Fastly to deliver content.\n\nCloudFront Setup\n\nSet up Amazon Web Services Cloudfront to deliver your AEM site with push invalidation\n\nAdobe-managed CDN\n\nUse the CDN included in your Adobe Experience Manager Sites as a Cloud Service license.\n\nRedirects\n\nYou can intuitively manage redirects as a spreadsheet called redirects (or redirects.xlsx) in the root of your project folder.\n\nResources\nSidekick\n\nInstall the AEM Sidekick to author and publish with Adobe Experience Manager.\n\nFAQ\n\nAnswers to your other questions in one place.\n\nAdmin API\n\nReference documentation for the Admin API.\n\nAEM Status\n\nCheck if Adobe Experience Manager sites are available right now and confirm service level availability.\n\nArchitecture\nArchitecture Overview\n\nUnderstand the basics of AEM architecture\n\nStaging & Environments\n\nBest practices for setting up environments\n\nSecurity Overview\n\nHow Adobe is keeping your sites secure and available\n\nGlobal Availability\n\nGlobal Content Delivery Networks enable global content availability\n\nIntegration Anti-Patterns\n\nThese integration patterns frequently cause issues, avoid them\n\nAEM as a Content Source\n\nHow content is published from AEM Sites authoring to Edge Delivery Services","lastModified":"1744376865","labs":""},{"path":"/docs/redirects","title":"Redirects","image":"/docs/media_11f1e812b5708f947436b2cd918bcec9cf5e2d6b7.jpg?width=1200&format=pjpg&optimize=medium","description":"Every website has the need for redirects. For example if you relocate or delete content, you want your users to still be able to find ...","content":"style\ncontent\n\nRedirects\n\nEvery website has the need for redirects. For example if you relocate or delete content, you want your users to still be able to find it or the next best thing. See the document Authoring and Publishing Content for more information on deleting content.\n\nYou can intuitively manage redirects as a spreadsheet called redirects (or redirects.xlsx) in the root of your project folder.\n\nThe spreadsheet has to contain at least two columns titled Source and Destination.\n\nThe Source is relative to the domain of your website, so it only contains the relative path.\nThe Destination can be either a fully qualified URL if you are redirecting to a different website, or it can be a relative path if you are redirecting within your own website.\n\nAfter making changes to your redirects spreadsheet, you can preview your changes via the sidekick and have your stakeholders check that the redirects are working on your .page preview website before publishing the redirect changes to your production website. See the Sidekick documentation for more information about switching between environments.\n\nRedirects take precedence over existing content, which means that if you have an existing page with a given URL, defining a redirect for that same URL will serve the redirect for that page and “hide” the existing page. Conversely if a redirect that has been set up on an existing page is removed, the existing page will be served again, unless the page was unpublished.\n\nRemember that if your redirect workbook has multiple pages (worksheets), then the redirects will only work on the sheet that is called helix-default. This allows you to manage more complex redirects through spreadsheet formulas. The spreadsheets and JSON documentation page has all the details.\n\nWildcards Redirects\n\nWildcard redirects have a set of issues around (a) unmanaged complexity and accumulate tech debt over time, (b) introducing potential redirect loops and also tend to (c) 301 into 404. For those reasons we generally recommend avoiding patterns-based wildcard redirects, and instead create redirects based on actual \"usage\" data.\n\nHowever there are some cases where individually managed redirects are inflating the list of redirects, and for practical or perceived initial simplicity reasons it may be compelling to use pattern based redirects. For example, you might want to apply a redirect to all pages under a specific path, regardless of the exact URL. This is where using wildcards in your CDN can be helpful. Wildcards allow you to match multiple URLs under a common path, simplifying the redirection of entire sections of your site.\n\nExample: If you want to redirect all URLs under /old-path/ to /new-path/, including any subpages (e.g., /old-path/page1, /old-path/page2), you can configure a wildcard redirect in your CDN.\n\nInput URL pattern: /old-path/*\nRedirect to: /new-path/$1\n\nThe wildcard (*) captures anything after /old-path/, and $1 represents the captured part of the URL, ensuring the structure is maintained in the new location.\n\nKeep in mind that redirecting this way usually redirects the entire namespace and hence creates redirects (301) into 404 for an infinite number of URLs and may therefore lead to undesirable results.\n\nNote: The specifics of configuring these redirects depend on the CDN provider you are using. Different vendors may have their own syntax, interface, and capabilities for handling wildcards and advanced redirect rules. Always consult the documentation of your specific CDN for guidance on how to implement wildcard redirects.\n\nSite Migrations and SEO\n\nWhen migrating your site to AEM Edge Delivery Services, this may necessitate some changes to the URLs your site uses. This can have an impact on SEO, so it is important that you plan for this carefully to avoid any disruption. We recommend the following steps to handle the most common scenarios:\n\nAdd your most popular URLs to the redirects sheet to ensure these are handled properly via 301 redirects\nIf the change to URLs follows a common pattern, for example, removing .html from all urls, set this up as a wildcard redirect at your CDN\nIf the change includes more complex situations than a common pattern, best practice is to map the old and new URLs 1-to-1.\nIf you are pruning content as part of your migration, avoid the temptation to redirect these urls to a common destination such as your home page; See the “Avoid irrelevant redirects” note in Google's documentation on site moves for more information\nEnsure your sitemap is up to date\nAfter go-live, monitor 404s via Operational Telemetry and add missing redirects as needed\n\nFor more information, see Google's documentation on site moves.\n\nPrevious\n\nFavicon\n\nUp Next\n\nResources","lastModified":"1750693945","labs":""},{"path":"/docs/sidekick","title":"Using AEM Sidekick","image":"/docs/media_14c67a991f1384b43a512beca53dd8d1365ee5af8.jpg?width=1200&format=pjpg&optimize=medium","description":"AEM Sidekick provides content authors with a toolbar offering context-aware options so that you can edit, preview, and publish your content directly from the pages ...","content":"style\ncontent\nUsing AEM Sidekick\n\nAEM Sidekick provides content authors with a toolbar offering context-aware options so that you can edit, preview, and publish your content directly from the pages of your website.\n\nInstallation\n\nThe Sidekick is available for Google Chrome and chromium-based browsers. You can install it from the Chrome web store.\n\nUsing Microsoft Edge?\n\nTo install the Sidekick extension into your Microsoft Edge Browser, you need to enable the following option to \"Allow extensions from other stores\" under edge://extensions in your URL bar.\n\n\nOnce that setting is enabled the sidekick can be installed from the Chrome web store.\n\nFirst Time Use\n\nOnce installed, the Sidekick appears as a toolbar hovering over the bottom portion of your content in the browser on pages that you have authored with AEM. The Sidekick provides you with various tools and actions for navigating and publishing your content.\n\nThe Sidekick is laid out to make the most common tasks easily accessible (from left to right):\n\nDrag handle - The Sidekick defaults to the bottom of the browser, but you can use the Adobe logo to drag the toolbar to another location. This can be useful to view content that might otherwise be hidden behind it without toggling it off. The new position is not persisted and it will snap back to its original position on window resize or reload.\n\nEnvironment Switcher - Select from available modes such as production and live based on the status of your content.\n\nActions - Use these buttons to quickly update or publish your content. What actions are available depends on your current mode and the content source.\n\nMenu - You can show additional options such as adding projects and managing your projects, toggling dark and light mode for the Sidekick, or access help.\n\nSign in - If your site has authentication for authors enabled, you will first need to sign in to authenticate before you can use the Sidekick. Even if your site does not require authentication, you must be signed in if you wish to unpublish and delete pages.\n\nClose - Click the X to toggle Sidekick off. Toggle back on using the AEM Sidekick icon next to the address bar in your browser.\n\nThe Sidekick can be invoked in the following contexts:\n\nWithin project environments\nA preview URL (the domain name ending in .aem.page)\nA live URL (the domain name ending in .aem.live)\nA production URL (the domain name being your project’s public host name), custom preview URL, or custom live URL\nNote: This requires adding the project to your configuration\nWithin online editors (depending on your project setup)\nGoogle Docs/Sheets\nMicrosoft Word/Excel\nEnvironment Switcher and Modes\n\nWhen using document-based authoring to create content, content moves from the editor through different environments. The environment switcher allows you to easily jump between them.\n\nSource Mode\n\nWhen editing your document and first using the Sidekick, you default to Source mode. Click the Source button to reveal the additional environments available.\n\nThe environment switcher on a Sidekick in Google Docs.\n\nIn Source mode, you have the following action available.\n\nPreview (re)generates the preview page based on the current document and opens it in a separate tab.\n\nIf you are using the Sidekick in the preview, live, or production environments, the source switcher may also offer an Open in option (a document icon) next to the Source mode option, which opens the online editor of the current page’s source (either a document or the AEM editor) in a separate window.\n\nAt a minimum read access to the document in Google Drive or Microsoft SharePoint is required to use this action.\n\nPreview Mode\n\nThe preview environment reflects the latest changes of the page rendered from the source document. Preview environments are indicated by a blue label. You can send preview URLs to stakeholders so they can review your content before it gets published. Note that this option is only enabled if the content you are looking at has been previewed before.\n\nThe preview URL follows the pattern https://branch--site--org.aem.page/path.\n\nbranch, site and org identify the content source and code base to use\n/path corresponds to the location of the content in Google Drive or Microsoft SharePoint, starting from the root folder.\nA / at the end of a path refers to the index document in a folder.\n\nIn Preview mode, the following actions are available:\n\nEdit is used to open the content source for editing.\nUpdate is used to force a content refresh.\nFor example if you have Source and Preview open in side-by-side tabs while working on the content.\nThe effect is identical to the Preview action in the editor.\nPublish makes the current preview version of the page available in the live and production environments.\nVisitors to your public-facing website will not be able to see changes until they are published.\n\nIf you are previewing a sheet, note that there may be additional options available.\n\nPreviewing Sheets in AEM Authoring\n\nPreview mode for sheets works the same as other pages, however there are additional options available that make managing changes to sheets within AEM authoring easier.\n\nWhen previewing a page, the preview loads the sheet using the Adobe Experience Manager Sites Data Rendition tool, to show the resulting JSON in a user-friendly way.\n\nTap or click the X in the banner to close the Data Rendition tool and view the raw JSON.\n\nThe preview lazy loads the first 1000 rows. You can search the entirety of the spreadsheet using the Search field.\n\nTo visualize what has changed since the last publication, tap or click Show changes.\n\nThis creates a diff, showing what has changed in your sheet between the current published state of the sheet and the content you are previewing.\nAdded lines are in green, prefixed with a plus.\nRemoved lines are in red, prefixed with a minus.\nTo show all rows along with the changes, tap or click Show all rows.\n\nLive Mode\n\nLive mode is only available if there is no production environment yet. It shows the published content and serves as a stand-in for your project’s production environment. Live environments are indicated by a green label. Note that this option is only enabled if the content you are looking at has been published before.\n\nThe live URL looks almost identical to the preview URL, the only difference being in the 1st level domain: https://main--site--org.aem.live/path\n\nIn Live mode, the following actions are available:\n\nEdit is used to open the content source for editing.\nPublish makes the current preview version of the page available in the live and production environments.\nVisitors to your public-facing website will not be able to see changes until they are published.\nProduction Mode\n\nProduction mode takes you to the production environment, which is your project’s public-facing website. Production environments are indicated by a green label.\n\nThis option may not be available during the development stage of your project or because no production environment has been configured yet.\nThis environment can be a 3rd-party or “bring your own” CDN.\n\nIf your public-facing domain name is yourproject.com, the production URL would be https://yourproject.com/path\n\nThe following action is available in Production mode:\n\nPublish makes the current preview version of the page available in the live and production environments.\nVisitors to your public-facing website will not be able to see changes until they are published.\nActivating Sheets\n\nWhen editing a document-based sheet in Google Drive or Sharepoint, the Sidekick’s environment selector is disabled. The only option is to Activate the sheet.\n\nNote that sheets created in AEM authoring allow for additional options.\n\nBulk Actions\n\nOpen the Sidekick in Google Drive or Microsoft SharePoint and select one or more files to bulk preview and publish files and conveniently copy their URLs. The Sidekick counts the number of selected files and prompts you to confirm any bulk actions.\n\nThe Sidekick provides a status of ongoing bulk actions.\n\nWhen the bulk actions are completed successfully, the Sidekick turns green and allows you to copy the URLs of the affected files via the Copy x URLs button or preview them via the Open x URLs button.\n\nIf a bulk action fails, it turns red and provides feedback on the failure via the Details button.\n\nYou can also use the bulk action feature to preview and publish media files. Adobe continues to extend the support for file formats that can be published directly from your content source (Microsoft SharePoint or Google Drive) based on popular use and security considerations. Currently the supported formats are MP4, PDF, SVG, JPG, PNG. You can learn more about file size limits here.\n\nLimitation: in Microsoft SharePoint, large selections of more than 60 files may not be available to the Sidekick and may therefore need to be split into smaller badges.\n\nBulk Preview\n\nSelecting multiple documents in Microsoft SharePoint or GDrive allows you to preview multiple documents en masse.\n\nBulk Publish\n\nSelecting multiple documents in Microsoft SharePoint or GDrive allows you to publish multiple documents en masse. The Sidekick prompts you to confirm before performing bulk actions.\n\nCopy URLs\n\nUse this feature to copy the preview, live or production URLs of one or multiple files.\n\nUnpublishing and Deleting Content\n\nIf you no longer require content to be published, you can unpublish it and/or delete it.\n\nUnpublishing content will remove the page from your live and production environments, but still keep it in the preview environment for reference or future republication.\nDeleting permanently removes the content from all environments, implicitly unpublishing it.\n\nUnpublishing and deleting content require you to be signed into the Sidekick. You must also have the appropriate roles assigned to your user.\n\nTo unpublish you must have the role publish.\nTo delete you must have either the role publish or author.\n\nBecause unpublishing and deleting are not as common as previewing and publishing content, these options are kept behind an ellipsis menu, shown only when appropriate. Navigate to a published page or its preview and click the ellipsis button on the Sidekick to show the Unpublish option.\n\nYou can only delete pages from the preview environment. Deletion implicitly unpublishes the page if it has been published before.\n\nCaution: The Delete and Unpublish actions cannot be undone! Double-check the URL and page content to make sure it is really OK to delete and/or unpublish a page.\n\nDue to the finality of deleting pages, you must confirm your deleting by entering DELETE in a dialog.\n\nAdding Your Project\n\nThe Sidekick is able to auto-detect if a URL belongs to your project. If you want the Sidekick to also recognize custom domains, such as your project’s production domain, custom preview domain, or custom live domain, you must add the project to the Sidekick.\n\nThis can be done in two ways:\n\nFrom your source documents\n\nNavigate to any source document associated with your project. Then click the context (≡) menu on the Sidekick and select Add this project.\n\nFrom your project URL\n\nNavigate to a project URL (similar to https://main--repo--owner.aem.page/) and click the context (≡) menu on the Sidekick and select Add this project.\n\nRemoving projects and migration\n\nYou can remove projects from the Sidekick by following the same steps, but select Remove this project from the context menu instead.\n\nIf you have used a previous version of the Sidekick, you can migrate your previously-configured projects.\n\nEnable both the previous version of the Sidekick and the new version in your browser.\nRight-click the Sidekick plugin icon in your browser’s menu bar.\nSelect Import projects from AEM Sidekick v6 from the context menu.\nManaging Projects (Experimental)\n\nOnce you have added at least one project to your sidekick, you Then click the context (≡) menu on the Sidekick and select Manage projects to open the Project Admin.\n\nThe Project Admin page lists all projects you added to the sidekick.\n\nEach project is listed with:\n\nConvenient links to project resources including\nContent location\nPreview URL\nProduction URL (if configured)\nEdit button to edit the name of the project within the Sidekick or to remove the project from the Sidekick.\nSign in button to sign into the project\nA dropdown menu is available from the Sign in button to select which IDP is used for signing in\nError Messages\n\nFor a complete catalog of error messages appearing in the Sidekick, review Sidekick Errors.\n\nCustomizing the Sidekick\n\nIf you are a developer, you can customize the Sidekick for your project.\n\nPrivacy and Security\n\nReview AEM Sidekick Security for detailed information about how privacy and security are being handled in the Sidekick.\n\n3rd Party Libraries\nLibrary\t License Custom Elements Polyfill\t BSD \n Lit\t BSD 3-Clause \n MobX\t MIT \n Spectrum Web Components\t Apache 2.0\n\nUp Next\n\nSidekick Library","lastModified":"1768836091","labs":""},{"path":"/docs/slack","title":"Slack","image":"/docs/media_16a9ec5b9abba592f9d4436d322696a4e58e4247d.png?width=1200&format=pjpg&optimize=medium","description":"We are available on dedicated Slack channels for AEM customers and the Adobe team is available to answer your questions. We create one Slack channel ...","content":"style\ncontent\n\nSlack\n\nWe are available on dedicated Slack channels for AEM customers and the Adobe team is available to answer your questions. We create one Slack channel for each customer and invite business users, developers, and authors to the channel to coordinate your launch or migration, answer questions about authoring and development, and help with best practices.\n\nThe Adobe team is globally distributed. During US and European business hours you can expect to receive an answer within one hour. Outside those times, responses may take a bit longer.\n\nTo request a Slack channel, reach out to your Adobe contact. For customers who prefer Teams, we can also collaborate with you on Teams.\n\nUp Next\n\nTeams","lastModified":"1765528700","labs":""},{"path":"/docs/architecture","title":"Architecture","image":"/docs/media_12c0b6c754f10cc4e98df8f6e378c543531f7149e.png?width=1200&format=pjpg&optimize=medium","description":"Take a deep dive into the architecture behind Edge Delivery Services and document based authoring in Adobe Experience Manager Sites as a Cloud Service.","content":"style\ncontent\nArchitecture\n\nEdge Delivery Services and document-based authoring are part of the next generation of Adobe Experience Manager’s composable architecture. A key aspect of this architecture is to enable customers to create great experiences using the infrastructure and processes that already enable their success.\n\nHow AEM fits in\n\nhttps://main--helix-website--adobe.hlx.page/docs/architecture-delivery.svg\n\nAt the highest level, Adobe Experience Manager is an on origin service that you plug in to your existing Content Delivery Network (CDN). There are out of the box integrations with Akamai, Cloudflare, Fastly, and Amazon Cloudfront.\n\nThe AEM stack itself is engineered for high performance and availability. In order to achieve best possible availability, all delivery services are run in two fully redundant edge providers, have fully redundant storage infrastructure, and are constantly monitored for performance.\n\nThe full picture\n\nhttps://main--helix-website--adobe.hlx.page/docs/architecture-overview.svg\n\nLooking at the full stack, there are four key layers:\n\nYour customer-specific infrastructure like CDNs, DNS, TLS certificates, etc.\nAdobe’s edge compute layer\nAdobe’s storage layer for edge delivery\nYour customer-specific sources of content and code\n\nIn the visitor-facing tier of this architecture, Edge Delivery Services, customers use their existing CDNs, DNS, certificates, etc. which is then delivering the AEM-produced experience to all modern web browsers, native mobile applications, chat bots, or other backend applications.\n\nThe central tier consists of the experience composition service, a dual-stack (for maximum availability) architecture that serves content stored in highly optimized formats for experience delivery. The storage layer is made up of Content Bus for structured and unstructured content, Media Bus for assets and media, and Code Bus for the code of the site.\n\nThe bottom tier enables authoring productivity and just like the top tier, it composes the tools and infrastructure already in use, be it AEM Authoring, Microsoft Sharepoint, Word, Excel, or Google Drive, Docs, and Sheets.\n\nHow content gets published\n\nhttps://main--helix-website--adobe.hlx.page/docs/architecture-publishing.svg\n\nThe core publishing process is facilitated by the Admin service for preview and publishing and consists of two key steps, both triggered by authors through the sidekick.\n\nThe preview operation in sidekick will pull content from the configured content source such as Sharepoint or Google Drive, or Adobe Experience Manager Sites. This integration is based on the standardized delivery format for structured and unstructured content and can be extended to other third-party content providers. Once the content has been pulled from the originating repository, it will be stored in AEM’s storage layer, separated by structured, unstructured content, assets, and media.\n\nIn a second step, authors can publish content. This operation takes the previewed content and makes it available to the delivery tier of our infrastructure. The most important step here is to purge the CDN. AEM will purge every layer of the caching infrastructure, thanks to its deep integration with content delivery networks.\n\nWhat about code?\n\nLike content, AEM uses code from your customer-provided repositories. Unlike content, code is taken from GitHub, using the AEM code sync app for GitHub that has been installed during the initial tutorial.\n\nThis integration pulls code from all active branches, enabling effective parallel development and scalable testing. When code is merged into the main branch, the CDN will be purged of all affected resources, making deployments fast and easy.\n\nLifecycle differences of Content, Media, Code and Configuration.\n\nInternally AEM separates different resources needed to assemble and deliver a website based on their corresponding lifecycle and manages them separately.\n\nContent (text in documents and spreadsheets, PDFs, SVGs, redirects, etc.) follow lifecycle states of preview and publish have stages of preview and publish. Content is immediately available to all Code branches on the corresponding .aem.page and .aem.live URLs depending on their previewed / published state.\n\nMedia (images, and videos uploaded or copy/pasted into a document) is using Content Addressable Storage internally, meaning that every asset is only stored once with a unique hash following the media_ prefix. Media is accessible on all branch URLs across .aem.page and .aem.live as soon as it is added to the system via a preview operation of the asset itself or a document that contains the asset. Since the hash is produced from the binary content of the asset itself, it is immutable and can be cached permanently.\n\nCode (javascript, css, etc. ) is managed in branches, creating individual environments for every branch. Changes are visible across .aem.page and .aem.live URLs at the same time.\n\nConfiguration (via config service) is using inheritance from a profile and is immediately applied to all branch environments on both .aem.page and .aem.live for a particular site.\n\nUp Next\n\nStaging & Environments","lastModified":"1752066026","labs":""},{"path":"/docs/authoring","title":"Authoring and Publishing Content","image":"/docs/media_1cf7bb3a1af050eff35416bc16502895c1f5a166e.jpg?width=1200&format=pjpg&optimize=medium","description":"How to author, preview and publish content using the AEM Sidekick.","content":"style\ncontent\n\nAuthoring and Publishing Content\nAuthoring Content\nYou already know the most important part.\n\nIf you use Microsoft Word or Google Docs, then you already know how to create content.\n\nYour documents in Word or Google Docs become your pages on your website. Your headings in your documents will become headings on your website. Bold, italic, underlining, lists, images, etc. will all appear on your website.\n\nImages and Videos\n\nTo add an image to your document, drag the image into the page. Word and Google Docs automatically add it as normal. Your image will be resized to fit the browser window of your visitor. Any resizing you do in Word or Google Docs will have no effect.\n\nIt is a good idea to set an alternative text for all images you add to the document, as this increases accessibility and helps search engines find your content.\n\nTo do this, use the built-in features of Document Authoring, Microsoft Word or Google Docs. See the documentation of either product for more details.\n\nDocument Authoring\nMicrosoft Word\nGoogle Docs\n\nMicrosoft Word and Google Docs do not allow you to just drag and drop videos, but you can add videos via SharePoint or Google Drive, preview and publish them using the Sidekick and add the resulting URL as a link to a suitable block in your document.\n\nLinks\n\nLinks are an important part of every website and you can add them both in Word and Google Docs. If you are creating a link within your website, enter the URL as is, even if the page you are linking to is not public yet (e.g. a preview or live URL).\n\nLinks pointing to other pages on the same site will automatically be adjusted to be relative to your site.\n\nYou can link to headings or sections within a page by appending an anchor value to the URL. Heading elements have automatic lower-cased IDs where spaces are replaced with dashes. For example, if a page /about-us has a heading “Our History”, the URL linking to it would be https:///about-us#our-history.\n\nSections\n\nOn some websites you have sections or blades that change background color or otherwise indicate breaks in the content. Creating a section break in both Microsoft Word and Google Docs can be done using --- (three hyphens) on a single line. In Google Docs you can also create sections by inserting a Horizontal Line element into the page (select “Insert → Horizontal Line” from the menu).\n\nBlocks\n\nBlocks are a way to work with more structured content and add special functionality to your site. Which blocks are available to your site depends on what your development team has implemented and differs from site to site. The only block that is common to all sites is the metadata block described previously.\n\nRegardless of site, the structure of a block is always the same: it is a table with a merged first row that serves as the block name (header row). The header row may have specific formatting like a background color to increase their discoverability and differentiation in a document.\n\nBlocks usually contain content, configuration, or references to other pieces of content, be it from other documents, spreadsheets, or both.\n\nAs you can see from this example, you are free to put any kind of content into the cells of a block, and it is up to the block to either render the content or ignore it. If the site you are working on uses blocks extensively, then you will probably have a reference list of blocks you can use.\n\nBlocks can have variants in parenthesis. For example, a Columns block can have a (highlight)option which passes a layout hint to the block display logic.\n\nSee the document The Block Collection to learn more about out-of-the-box blocks.\n\nMetadata\n\nSee the document Page Metadata for instructions on how to manage metadata for your pages.\n\nStructured Data in Spreadsheets\n\nYou can put content into spreadsheets and then the spreadsheet is automatically turned into an API that your developers can use. This allows you to use spreadsheets like a headless CMS for use in data tables, navigation, or feature comparisons, for example.\n\nSee the document Spreadsheets and JSON for more information.\n\nPreview and Publish Content\n\nOnce a document is created in Google Drive or Sharepoint, you can preview the corresponding web page and eventually publish the content to your production website.\n\nThe preview function is used to share pages with stakeholders before they are published and available to the general public on your website.\n\nIn order to preview, publish, or delete content, use the Sidekick that can be installed as a browser extension.\n\nPreview\n\nIn Word or Google Docs, open the Sidekick, then click the “Preview” button. This will open a new browser window (check for the popup warning) that has the preview version of your site.\n\nAlthough you can copy and share the URL of this preview, it is not meant for production. It does not have your domain name on it and is invisible to search engines. If the content is ready for publication, you can publish. If you need to make changes, open the Sidekick on the preview page and click “Edit” to go back to Word or Google Docs.\n\nPublish\n\nPublishing makes your content visible to everyone on the internet. To publish something, open the sidekick on a preview page (or follow the instructions above to open the preview again), then click “Publish”. After a few seconds, a new browser window will open, with your page on your public website.\n\nOnce your content has been published, it is visible to everyone on the internet, and search engines will be able to find it.\n\nDelete\n\nGenerally, deleting published content and therefore removing publicly accessible resources from the web can be problematic because of inbound links from search, social, bookmarks and other referring sites. If a page is deleted that was once published, it is recommended to use redirects to make sure that incoming traffic for the deleted page is sent to the next best place. See the document Redirects for more information.\n\nIf you want to remove published content or just delete it from your site as part of a clean-up, doing so is a two-step process.\n\nFirst, delete the source document.\nAlternatively you can rename the page or move it to a different folder, for example your drafts folder.\nThen open the page you want to delete on the preview site, open the sidekick and sign in. You will now see a ... menu with two options: Delete and Unpublish.\nUnpublish removes it from the public production website, but keeps the preview.\nDelete removes the preview, too.\n\nDeleting or unpublishing something is permanent and cannot be undone easily. If you want to undo a deletion, you have to restore the original document and then preview and publish it again.\n\nPrevious\n\nPublish\n\nUp Next\n\nMetadata","lastModified":"1756717198","labs":""},{"path":"/docs/bulk-metadata","title":"Bulk Metadata","image":"/docs/media_1700294000e02ecedd96e97c5f692838c399c0fde.jpg?width=1200&format=pjpg&optimize=medium","description":"By default, metadata is managed at the page level, but in some cases, it is useful to apply metadata en masse to a website. Common ...","content":"style\ncontent\n\nBulk Metadata\n\nBy default, metadata is managed at the page level, but in some cases, it is useful to apply metadata en masse to a website. Common use cases include:\n\nDefault metadata such as image should be applied to the entire website to ensure every page has an image defined.\nA certain section of a website should look and feel different from the rest of the website (such as a different template or a theme).\nA certain section of the website should not be indexed or crawled (robots set to noindex).\n\nIf you want to create metadata for many pages at once, create a metadata sheet in the root folder of your website content.\n\nName the file metadata in Document Authoring, Google Drive or AEM.\nName the file metadata.xlsx in SharePoint.\n\nThe workbook should have only one sheet and at least two columns like in the following image:\n\nThe column titled URL has the URL pattern of the pages that should get a particular metadata entry.\n\nThe wildcard * (the asterisk) can be used as a prefix or suffix, allowing for flexible matches on the URL pathname. Typical examples include /docs/** or **/docs/**.\n\nThe metadata sheet is evaluated from top to bottom, site wide metadata set to ** must be before more specific entries.\n\nFor each metadata property, create a column in the worksheet and name it using the property you want to assign. Typical examples include template, theme, or robots. Property names will be lower-cased in the HTML.\n\nPage-level metadata added via a metadata block takes precedence over bulk metadata. See Page Metadata and Metadata (block) for more information.\n\nNote: You need to preview and publish the metadata sheet in order to see changes reflected on your site.\n\nhttps://main--helix-website--adobe.aem.page/docs/special-metadata-properties\nOmitting Metadata Values\n\nTo explicitly remove metadata a \"\" can be used as a value. This will remove the element or set the corresponding attribute to \"\" for a particular path.\n\nExample:\n\nURL Canonical\n/** \"\"\n\n\nThe example above will remove the from all pages by default, unless there is a specific override for example from a page metadata block.\n\nAdditional Metadata\n\nWhen metadata is managed by several teams, it is not practical to keep them all in a single metadata file. Multiple metadata files can therefore be optionally configured in the site configuration:\n\ncurl -X POST https://admin.hlx.page/config/{org}/sites/{site}/metadata.json \\\n -H 'content-type: application/json' \\\n -H 'x-auth-token: {your-auth-token}' \\\n --data '{\n \"source\": [\n \"/metadata.json\",\n \"/metadata-2nd.json\",\n \"/metadata-seo.json\"\n ]\n}'\n\n\nThe order of the entries in the array dictates the order of how the data is applied. Note that duplicate metadata properties can be overwritten by subsequent sources, but never deleted. In the above example, if the /metadata.json defines a property title, the same property in /metadata-2nd.json will overwrite the value, but only if it is not empty.\n\nMetadata Source Hierarchy\n\nDefault hierarchy:\n\nPage level metadata block wins over\nFolder-mapped metadata* sheet wins over\nBulk metadata sheet (/metadata.json)\n\nHierarchy if there is additional metadata configured:\n\nPage level metadata block wins over\nFolder-mapped metadata* sheet wins over\nMetadata sheets in configured order\n\n* deprecated\n\nPrevious\n\nPage Metadata\n\nUp Next\n\nPlaceholders","lastModified":"1759491633","labs":""},{"path":"/docs/byo-cdn-akamai-setup","title":"Akamai Setup","image":"/docs/media_1d07c43f5918a053faf2f434f65680737bd41d657.jpg?width=1200&format=pjpg&optimize=medium","description":"The following screenshots illustrate how to use the Akamai Property Manager to configure a property to deliver content from AEM using your Akamai CDN setup. ...","content":"style\ncontent\n\nAkamai Setup\n\nThe following screenshots illustrate how to use the Akamai Property Manager to configure a property to deliver content from AEM using your Akamai CDN setup. Essential settings are marked with a red circle.\n\nEssential Property settings\nOrigin Server\n\nConfiguration properties:\nName\t Value\t Comment \n Origin Server Hostname\t main----.aem.live\t Replace repo and organization with the values for your site. \n Forward Host Header\t Origin Hostname\t \n Cache Key Hostname\t Incoming Host Header\t \n Send True Client IP Header\t No\t \n Verification Settings\t Choose your own\t \n Use SNI TLS Extension\t Yes\t \n Trust\t Akamai-managed Certificate Authorities Sets\t \n Akamai Certificate Store\t Enabled\t\n\n\n⚠️Do NOT set Trust to Specific Certificates (pinning) as the certificate is periodically renewed and HTTPS traffic would be served with certificate errors due to the expired pinned certificate.\n\nAdd Behavior: Remove Vary Header\n\nConfiguration properties:\nName\t Value\t Comment \n Remove Vary Header\t On\t\nAdd Behavior: Modify Outgoing Request Header\n\nWe will need a number of outgoing request headers, please see the table below. Keep the \"avoid duplicate headers\" setting enabled for all.\n\nConfiguration properties:\nAction\t Select Header Name\t Custom Header Name\t New Header Value \n Modify\t Other\t X-Forwarded-Host\t {{builtin.AK_HOST}} \n Modify\t Other\t X-BYO-CDN-Type\t akamai \n Modify\t Other\t X-Push-Invalidation\t enabled\nAdd/Modify Behavior: Caching\n\nConfiguration properties:\nName\t Value \n Caching Option\t Honor origin Cache-Control \n Enhanced RFC support\t No \n Honor private\t No \n Honor must-revalidate\t No\nAdd Behavior: HTTP/2\n\n(Optional, but recommended)\n\nAdd Rule: Modify Outgoing Response Header\n\nIn the list of rules in the sidebar, click the button \"+ Rules\"\n\nSelect \"Blank Rule Template\", set a name such as \"Conditionally strip headers\" and click \"Insert Rule\".\n\nTo set the criteria for the rule to be applied click \"+ Match\"\n\nThen select:\n\nIf\nPath\nDoes not match one of\n*.plain.html\n\nClick \"+ Behavior\" and \"Standard property behavior\" to set the behavior if a match is found\n\nThen select \"Modify Outgoing Response Header\"\n\nWith following values:\n\nAction: Remove\nSelect Header Name: Other\nCustom Header Name: X-Robots-Tag\n\nThese are all essential property settings for delivering content.\n\nOptional: Authenticate Origin Requests\n\nWhen using token-based Site Authentication, add the following under \"Add Behavior: Outgoing Request Headers\"\n\n\nConfiguration properties:\n\nName\t Value\t Comment \n Action\t Modify\t \n Custom Header Name\t Authorization\t \n New Header Value\t token \t Replace with the site token value received in token-based Site Authentication \n Avoid Duplicate Headers\t Yes\t\n\nThis setting will ensure that Akamai authenticates requests from your CDN to the AEM Origin, which validates the token received in the Authorization header.\n\nCaveats\n\nDo not enable Akamai mPulse Real Usage Monitoring. While the performance impact on most sites is negligible, for sites built for consistent high performance, enabling it will prevent reaching a Lighthouse Score of 100. In AEM, you have a Real Use Monitoring service built-in, so that dual instrumentation will be unnecessary and is strongly discouraged.\n\nAlso, do not enable Akamai Bot Manager Premier (also called “Transactional Endpoint Protection”) or similar Web Application Firewall offerings, as they markedly interfere with rendering performance and user experience. Your site on AEM is protected against bot attacks on the backend, so that this performance cost comes with negligible benefit.\n\nhttps://main--helix-website--adobe.hlx.page/docs/setup-byo-cdn-push-invalidation-for-akamai\n\nPrevious\n\nBYO CDN Setup Overview","lastModified":"1747144509","labs":""},{"path":"/docs/byo-cdn-cloudflare-worker-setup","title":"Cloudflare Setup","image":"/docs/media_106b5523b26f7079aad2f4e6f54b9fd98a355fe34.jpg?width=1200&format=pjpg&optimize=medium","description":"The following screenshots illustrate how to configure Cloudflare to deliver content. Essential settings are marked with a red circle.","content":"style\ncontent\n\nCloudflare Setup\n\nThe following screenshots illustrate how to configure Cloudflare to deliver content. Essential settings are marked with a red circle.\n\n\nThis setup can be completely done in the browser by using the Cloudflare Dashboard only. If you are already familiar with Cloudflare Workers, Wrangler & GitHub and not afraid of entering commands in a terminal window you might want to follow the instructions for Cloudflare with wrangler instead.\n\nCreate a Cloudflare site\n\nIf you already have a Cloudflare site and DNS set up you can skip forward to the Setup push invalidation section.\n\nEnter the domain:\n\n\n\nSelect a plan:\n\nFor this walk-through we’ll use the Free plan.\n\nhttps://main--helix-website--adobe.hlx.page/docs/setup-byo-cdn-push-invalidation-for-cloudflare\nDNS Setup\n\nFor a new site, we’ll start with a simple DNS setup.\n\nCreate a new CNAME record. If your zone is mysite.com and you want to serve traffic on www.mysite.com, then the name should be www\nIf you want to serve traffic on example.com (without a www) then the name should be @\nAnd if you want to serve traffic on all subdomains, then the name should be *\nAs we are using workers to serve the content, the value of the Content field does not matter. It’s easiest to use your ref--repo--owner.aem.live host name here. This is a hostname, not a URL, so leave out the leading https://\n\nMake sure the CNAME record is Proxied:\n\n\n\nSSL/TLS Setup\n\nSelect SSL/TLS from the left pane and Edge Certificates in the dropdown list. On the right side, scroll down to Always Use HTTPS and enable the setting:\n\nConfigure Caching\n\nNavigate to Caching → Configuration and adjust following settings:\n\nCaching Level: Standard\nBrowser Cache TTL: Respect Existing Headers\n\nCreate Cache Rules\n\nNext browse to Caching → Cache Rules and create a new cache rule\n\nNote: Enable Origin Cache Control option is only available for enterprise accounts. Free, Pro, and Business customers have this option enabled by default and cannot disable it.\n\nFollowing settings should apply:\n\nWhen incoming requests match: hostname contains mydomain.com\nThen: Eligible for cache\n\nUnder Browser TTL, click \"add setting\", then apply \"Respect Origin TTL\"\n\nCreate Worker\n\nReturn to the Cloudflare Dashboard homepage, then navigate the sidebar: Workers & Pages → Overview. Click \"create\" to create a new worker.\n\nOn the next screen, click \"create worker\", because that's what you want to achieve.\n\n\nEnter a name for the worker (e.g. aem-worker) and click on “Deploy”:\n\n \n\nOn the next screen, click \"Edit code\"\n\nEdit worker code\nCopy the content of this file.\nIn the left pane, replace the existing content with the copied content.\nClick on “Deploy”\nConfirm with \"Save and Deploy\"\n\nNote: If you are using the recommended content-security-policy with ‘strict-dynamic’ and (cached) nonce , please make sure to use the latest worker code, which removes the header in 304 responses, to ensure that there is no mismatch between the nonce cached in your site user’s browser and the one returned by the server.\n\n\nReturn to your worker (by clicking the back arrow in the top right corner), then click on Settings → Variables and “Add variable”:\n\nAdd a variable ORIGIN_HOSTNAME and set the value to the hostname of your origin (e.g. main--mysite--aemsites.aem.live):\n\nIf you have enabled push invalidation, add a second environment variable PUSH_INVALIDATION = enabled.\n\nApply the changes by clicking \"Deploy\".\n\n\nNext, click on Triggers an select “Add route”:\n\n \n\nEnter your domain route (e.g. www.mydomain.com/*), select your zone and confirm with “Add route”:\n\n\n\nDepending on the setup chosen in DNS Setup, you would select routes www.mydomain.com/* or mydomain.com/*\n\nWarning: if you select *.mydomain.com/* as Cloudflare suggests in the field default, your site will be available under multiple subdomains. This will invite attackers trying to open webmail.mydomain.com and similar sites, and lead to duplicate content, potentially depressing your search engine rankings.\n\nAfter completing all steps you should be all set.\n\nurl\nRoute\nOptional: Authenticate Origin Requests\n\nWhen using token-based Site Authentication, add the following to enable authenticated requests from Cloudflare to AEM.\n\nReturn to Workers → → Settings → Variables\nCreate a new environment variable ORIGIN_AUTHENTICATION\nPaste the site token value from token-based Site Authentication (it starts with hlx_)\nConfirm by clicking \"Deploy\"\n\nExpanding the AEM footprint on your website\n\nIn case you start with having only a portion of the website being routed to your .live origin and have routed a specific folder (eg. /blog/*) you can subsequently add more routes whenever you are ready to expose new sections of the site by simply adding more routes and repeat the last “add route” steps as needed, without changing your worker configuration.\n\nWatch out for duplicate content\n\nSearch engines often penalize sites for duplicate content, so it's important to make sure your content is not available on the web elsewhere. Cloudflare, unfortunately, has a default setting that will expose your site on additional network ports. In paid Cloudflare plans you can block traffic on these additional ports. This is a recommended setting for production sites.\n\nPrevious\n\nBYO CDN Setup Overview","lastModified":"1749131071","labs":""},{"path":"/docs/byo-cdn-cloudflare-worker-wrangler-setup","title":"Cloudflare Setup (with wrangler)","image":"/docs/media_1bfd2c2f03573acaaddcd537d21275f24ceee9cf4.png?width=1200&format=pjpg&optimize=medium","description":"The following screenshots illustrate how to configure Cloudflare using the wrangler command line interface to deliver AEM content. Essential settings are marked with a red ...","content":"style\ncontent\n\nCloudflare Setup (with wrangler)\n\nThe following screenshots illustrate how to configure Cloudflare using the wrangler command line interface to deliver AEM content. Essential settings are marked with a red circle.\n\nCreate a Cloudflare site\n\nEnter the domain:\n\n\n\nSelect a plan:\n\nFor this walk-through we’ll use the Free plan.\n\nhttps://main--helix-website--adobe.hlx.page/docs/setup-byo-cdn-push-invalidation-for-cloudflare\nDNS Setup\n\nWe’ll skip the DNS setup step as this would be beyond the scope of this simple walk-through. Make sure the CNAME record is Proxied:\n\nSSL/TLS Setup\n\nSelect SSL/TLS from the left pane and Edge Certificates in the dropdown list:\n\nOn the right side, scroll down to Always Use HTTPS and enable it:\n\n\n\nConfigure Caching\n\nCreate Page Rule\n\nCreate Worker\n\nFork or create a new GitHub repository using this template.\n\nClone the repository and follow the instructions in the README. You can skip directly to step 2.\n\nAfter completing all steps you should be all set.","lastModified":"1743757663","labs":""},{"path":"/docs/byo-cdn-cloudfront-setup","title":"Amazon Web Services (AWS) CloudFront Setup","image":"/docs/media_14f7e30bdfd5f95c1e5fca4e6ca48ccd78ff5d3c1.png?width=1200&format=pjpg&optimize=medium","description":"The following screenshots illustrate how to configure AWS CloudFront to deliver content from an AEM origin. Essential settings are marked with a red circle.","content":"style\ncontent\n\nAmazon Web Services (AWS) CloudFront Setup\n\nThe following screenshots illustrate how to configure AWS CloudFront to deliver content from an AEM origin. Essential settings are marked with a red circle.\n\nCreate a CloudFront distribution\n\nConfigure the origin\n\nUse main--sitename--orgname.aem.live as the Origin domain.\n\nAdd following custom headers:\n\nX-Forwarded-Host: your domain name\nX-BYO-CDN-Type: cloudfront\n\nIf you have successfully configured push invalidation for your project you should also add the following custom header:\n\nX-Push-Invalidation: enabled\n\nCache behavior\n\nKeep the default settings here.\n\nCache key and origin requests\n\nClick \"create cache policy\"\n\nCreate cache policy\n\nSet the Default TTL to 300 seconds.\n\nUnder \"cache key settings\", keep the defaults:\n\nHeaders: none\nCookies: none\nCompression support: gzip, brotli\n\nAnd override the following:\n\nQuery Strings: Include the following query strings\nwidth\nheight\nformat\noptimize\nlimit\noffset\nsheet\n\nClose the browser tab and return to the previous screen. On this screen, click \"create origin request policy\".\n\nCreate origin request policy\n\nKeep the default settings:\n\nHeaders: none\nCookies: none\n\nAnd override the following:\n\nQuery Strings: Include the following query strings\nwidth\nheight\nformat\noptimize\nlimit\noffset\nsheet\n\nThen click create and close the tab to return to the previous screen.\n\nApply Cache policy and origin request policy\n\nAfter returning to the distribution properties, click the reload buttons next to the Cache policy and origin request policy dropdowns, so that the two newly-created policies show up. Next, select the new policies for both Cache policy and origin request policy.\n\n\n\nCreate distribution\n\nSelect whether you want to enable a Web Application Firewall (WAF). Your AEM origin requires no WAF and use of a WAF is neither required nor recommended for AEM origins.\n\nScroll to the end of the page and click \"create distribution\". We need to return to the configuration later, so remember the ID of your distribution.\n\n\n\nCreate Function to remove Age and X-Robots-Tag headers\n\nIn the Cloudfront sidebar, select \"Functions\" and click \"Create function\".\n\nEnter a name for the function (e.g. stripHeaders), an optional description and click on “Create Function”:\n\nReplace the code of the function with the following snippet and click on “Save changes”:\n\nfunction handler(event) {\n const response = event.response;\n const request = event.request;\n const headers = response.headers;\n\n // Strip age header\n delete headers['age'];\n\n // Check if the request URL does not end with '.plain.html'\n if (!request.uri.endsWith('.plain.html')) {\n delete headers['x-robots-tag'];\n }\n\n return response;\n}\n\n\nSelect the \"Publish\" tab and click on “Publish function”:\n\nFinally, associate the function with your distribution by scrolling down to \"Associated distributions\" and click \"Add association\".\n\n\nIn the following dialog, select:\n\nDistribution: the ID of your new distribution\nEvent type: viewer response\nCache behavior: default\n\nFinally, click \"add association\"\n\nThat’s all (more or less). Please test the distribution in a stage environment.\n\nOptional: Authenticate Origin Requests\n\nIf you have enabled token-based Site Authentication, go back to Cloudfront → Distributions → → Origins → → Edit\n\nUnder \"Add custom header\", select \"add header\" and create a header Authorization with value token . Replace with the token value created through token-based Site Authentication (it starts with hlx_) as the header value.\n\n\nThis will ensure that all requests from the AWS Cloudfront CDN to your AEM origin use the correct authorization.\n\nhttps://main--helix-website--adobe.aem.page/docs/setup-byo-cdn-push-invalidation-for-cloudfront\n\nPrevious\n\nBYO CDN Setup Overview","lastModified":"1729252302","labs":""},{"path":"/docs/byo-cdn-fastly-setup","title":"Fastly Setup","image":"/docs/media_1c8e056645c57ad87499ef645e28e010db5583b02.jpg?width=1200&format=pjpg&optimize=medium","description":"The following screenshots illustrate how to configure Fastly to deliver content. Essential settings are marked with a red circle.","content":"style\ncontent\n\nFastly Setup\n\nThe following screenshots illustrate how to configure Fastly to deliver content. Essential settings are marked with a red circle.\n\nhttps://main--helix-website--adobe.aem.page/docs/setup-byo-cdn-push-invalidation-for-fastly\nCreate a Fastly service\n\nGo to the Fastly Management UI and select Create Service, CDN.\n\nAdd Domain\n\nAdd your production domain (e.g. www.mydomain.com):\n\n\nConfigure Origin\n\nAdd your origin (e.g. main–{site}--{org}.aem.live) and keep the default settings for:\n\nOverride default host\nDefault compression\nForce TLS & HSTS\n\nIn the new configuration, click \"Edit configuration\" in the top right corner and \"clone version 1 to edit\".\n\nIn the sidebar, select \"Hosts\" underneath \"Origins\" and click the pencil icon to change host settings.\n\nScroll down and change Shielding to Ashburn Metro (IAD) (non-mandatory but recommended setting):\n\nDon't forget to \"update\".\n\nCreate VCL Snippets\n\nCreate a VCL snippet for the recv subroutine with the following VCL code:\n\nif (fastly.ff.visits_this_service == 0) {\n # edge delivery node\n if (req.url.qs != \"\") {\n # remember query string\n set req.http.X-QS = req.url.qs;\n\n if (req.url.path !~ \"/media_[0-9a-f]{40,}[/a-zA-Z0-9_-]*\\.[0-9a-z]+$\" \n && req.url.ext !~ \"(?i)^(gif|png|jpe?g|webp)$\"\n && req.url.ext != \"json\"\n && req.url.path != \"/.auth\") {\n # strip query string from request url\n set req.url = req.url.path;\n }\n }\n}\n\n\nCreate additional VCL snippets for the miss and pass subroutines with the following VCL code:\n\nset bereq.http.X-BYO-CDN-Type = \"fastly\";\nset bereq.http.X-Push-Invalidation = \"enabled\";\n\n\nNote: The X-Push-Invalidation: enabled request header enables the push invalidation including long cache TTLs.\n\n\nCreate a deliver snippet with the following VCL code:\n\nif (fastly.ff.visits_this_service == 0) {\n # on edge delivery node\n if (\n http_status_matches(resp.status, \"301,302,303,307,308\")\n && req.http.X-QS\n && resp.http.location\n && resp.http.location !~ \"\\?.*\\z\"\n ) {\n # preserve request query string in redirect location\n set resp.http.location = resp.http.location \"?\" req.http.X-QS;\n }\n}\n\n\n\nFinally create a deliver snippet with the following VCL code:\n\nunset resp.http.Age;\n\nif (req.url.path !~ \"\\.plain\\.html$\") {\n unset resp.http.X-Robots-Tag;\n}\n\n\nAfter completing all steps and activating the service version you should be all set:\n\nOptional: Authenticate Origin Requests\n\nIf you have enabled token-based Site Authentication, navigate in the sidebar to Content → Headers, then \"create a header\" with following settings:\n\nName: Origin Authentication\nType: Request/Set\nDestination: http.Authorization\nSource: \"token \" (don't forget the quotes, and replace with the site token retrieved in token-based Site Authentication – the token starts with hlx_)\nIgnore if set: no\nPriority: 10\n\nNote\n\nEdge Delivery Services needs no Web Application Firewall, as it is running on hardened, shared, and ultra-scalable infrastructure. Requests that a WAF would typically intercept are terminated in our CDNs.\n\nPrevious\n\nBYO CDN Setup Overview","lastModified":"1772533192","labs":""},{"path":"/docs/byo-cdn-setup","title":"BYO CDN Setup","image":"/docs/media_141d72765656534440a69d2bf6e223feef96def5d.png?width=1200&format=pjpg&optimize=medium","description":"Customers may use their own CDN to deliver AEM content under their own domain (aka BYO Production CDN). While customers are generally free to configure ...","content":"style\ncontent\n\nBYO CDN Setup\n\nCustomers may use their own CDN to deliver AEM content under their own domain (aka BYO Production CDN). While customers are generally free to configure their CDN according to their own needs there are some settings mandated/recommended by Adobe Experience Manager:\n\nOrigin url\nhttps://main----.aem.live\nHeaders sent to origin\nX-Forwarded-Host: \nX-Push-Invalidation: enabled\n(see Configuring Push Invalidation)\nOrigin cache control\nI.e. Cache TTL on the production CDN is controlled via origin cache control response headers. This should be enabled (if available).\nCompression (gzip)\nShould be enabled\nQuery parameters\nMust be forwarded to origin\nMust be included in cache key\nAge response header\nThe Age response header must be either suppressed or overridden (Age: 0)\nVendor-specific setup instructions\n\nIf you already have a CDN, follow the instructions below. If you are not sure which CDN to pick, follow our guide to CDN selection.\n\nCloudflare Worker Setup\n\nLearn how to configure Cloudflare to deliver content.\n\nAkamai Setup\n\nDiscover how to use the Akamai Property Manager to configure a property to deliver content\n\nFastly Setup\n\nThis guide illustrates how to configure Fastly to deliver content.\n\nCloudFront Setup\n\nSet up Amazon Web Services Cloudfront to deliver your AEM site with push invalidation\n\nAdobe-managed CDN\n\nUse the CDN included in your Adobe Experience Manager Sites as a Cloud Service license.\n\n\n\n\nIMPORTANT: The production CDN setup should be validated and tested in a stage environment prior to going public.\n\n\nNote: In case you have not yet completed the upgrade from hlx.live to aem.live, you can find links to the hlx.live-specific versions of the CDN documentation here.","lastModified":"1742214515","labs":""},{"path":"/docs/davidsmodel","title":"David’s Model, Second take.","image":"/default-social.png?width=1200&format=pjpg&optimize=medium","description":"A long time ago, in a galaxy far, far away, I got to a point where I realized that people had a lot of different ...","content":"style\ncontent\n\nDavid’s Model, Second take.\n\nBy: David Nuescheler\n\nHistorical Context\n\nA long time ago, in a galaxy far, far away, I got to a point where I realized that people had a lot of different options on how they could model content in a content repository specification that I was involved in.\n\nSo in 2007 I started writing up my controversial opinions around content modeling in JCR and to make sure that people considered it “just my opinion” and nothing that would claim universal applicability I called it “David’s Model”.\n\nIt seems that this has helped people in the context of modeling content on an infrastructure level.\n\nToday, I find myself very often in situations that feel the same when arguing “How to model or structure content in Adobe Experience Manager”.\n\nThe parameters and stakeholders feel very different today, as I am not primarily worried about the underlying infrastructure anymore but about the user experience of a person authoring content and reaching a great authoring experience across different content sources and to a lesser extent the ease of developing against those structures and being able have portable (block) code across projects and content sources.\n\nIntroduction\n\nThis document should serve as a collection of “Content Modeling” or “Content Structure” best practices as they relate to Adobe Experience Manager and more importantly to an intuitive authoring experience across different authoring platforms. A good way of testing a content model, is to imagine an author working in different environments (eg. Word, Google Docs, AEM, Custom Authoring etc.) and making sure that the content model can easily be constructed in an intuitive manner across all possible content sources.\n\nThese “rules” are a reflection of lessons learned from first-hand authoring and authoring support and are rooted in the experiences working on real-world limitations of commonly used authoring environments like Microsoft Word Online or Google Docs, but also in the average knowledge of said tooling by the average author.\n\nMaking the authoring experience intuitive, simple and fast is paramount for the long-term success of any project as lays the foundation of authors enjoying making updates to websites or other digital experiences.\n\nThese rules are evolving, and I would like to invite discussion and commentary on all of them.\n\nRule #1: Blocks are not great for authoring\n\nGenerally blocks are not great as they are surfaced as tables on the authoring side. They provide a necessary framework for an author to indicate some special functionality or design for a certain component. For authors it is often easier to work in “Default Content” wherever possible.\nFor developers blocks are a great way to componentize their work, so there is tension where the developer feels that having something in a block makes their lives easier, sacrificing authoring ease-of-use.\n\nThe number of blocks and block variants, as well as (section-) metadata that influence layout should be limited by a design system. Often variants or blocks can be inferred, meaning that for example a carousel containing a video or a quote with an image should not be its own (explicit) block or variant but can be inferred automatically from the content.\n\nA lot of content that is referenced via URL (e.g. a video, modal, fragment or an embed) can often be auto blocked, and the author may just be able to paste the URL to get the desired result.\n\nIt is definitely an anti-pattern to have things that are represented natively as default content and put them into a block, so something like a Text, Heading or Image block yields a bad authoring perspective.\n\nRule #2: No nested blocks for authors\n\nTo a developer it might very often be tempting to nest complex structures, which in word document would lead to a table inside a table. As Rule #1 states that blocks are not desirable, nested blocks are definitely a lot worse.\n\nConsider fragments (referencing other documents) or links (with auto blocking) to reduce the authoring complexity.\n\nRule #3: Limit Row and Column spans\n\nGenerally we use a Column Span (merged cells) to denote the header with a block name in it. This is relatively straightforward and works well in word and google docs.\nThere are definitely situations where more complex table structure make sense (eg. a portion of the block content being in two columns and another portion of the block content being in three columns) but it is important to understand that creating and managing these structures can be extremely difficult, especially in word online that has very enigmatic support for complex tables.\n\nIf you find yourself in a place where you have a non-trivial rows and columns setup with spans / merged cells, it is probably a good idea to consider a different structure.\n\nRule #4: Fully qualified URLs only\n\nWhen referencing content sometimes developers think in references that are relative to host, the content repository or to their sharepoint / google drive. Authors (and most humans) often think of a URL as an opaque token that they copy/paste from their browser without deciphering them into protocol, hostname, pathname, etc.\nIt is always advisable to just let authors work fully qualified URLs and let either AEM or a developer do the work of extracting eg. a pathname where needed. As a bonus the URL can and should link to something that is easily accessible for an author from their document.\n\nRule #5: Lists?\n\nI often find myself in a situation where a block has a list of references, something like a list of related articles, or a list of cards. In HTML a lot of those semantically should be considered lists (mostly