Skip to content

Home

Jump to bottom
Burkhard Pauli edited this page Feb 16, 2021 · 10 revisions

Sites-30 Wiki

Caution

The Sites-30 features including the aem-site-template-basic are currently in a limited pilot release, but we welcome your feedback on features and functionality.

The Sites-30 pilot program introduces exciting new features to AEM as a Cloud Service, accelerating deployment of custom-branded sites based on new site templates.

By eliminating the requirement for Java programming or AEM-specific and separating responsibilities into clear roles, the process of creating a new site and its content as well as branding becomes simple, fast, and greatly decreases time-to-value.

End-to-end Workflow

A. Create a new site from the basic site template:

  1. In the AEM "Sites" console (/sites.html), click the blue "Create" button and choose "Site (Template)".
    Note: If you only have a "Site" entry in the drop-down, then please contact me to enable the Sites-30 feature on that instance.
  2. In the "Create Site" wizard, click "Import" and from your disk upload the zip of the latest Basic Site Template release.
  3. Still in the wizard, select the uploaded template, click "Next", provide a Site title (e.g. "Monday"), and click "Create", and "Done".
  4. In the site admin, see the created site that can be edited by selecting the "My Site | en" page and choosing "Edit" from the toolbar – do some edits on the page.

B. Start frontend development:

  1. In the AEM "Sites" console (/sites.html), in the drop-down from the top-left panel icon select "Site (alt+4)" to open the left side-rail, then select the root page of your newly created site, and in the left side-rail, click "Download Theme Sources".
  2. Create a preview user with limited rights: In the AEM "Users" console (/security/users.html), click "Create" and in the "Create New User" enter a user ID (eg. "preview"), a password, and in the "Groups" tab assign the "Contributors" group, then click "Save & Close".
  3. Now on your local machine, uncompress the downloaded "theme-sources.zip" file, then open a command line, navigate into the uncompressed folder, and execute the following commands:
    npm install
    npm run live
  4. Once the browser opens http://localhost:3000/, click on the button "SIGN IN LOCALLY (ADMIN TASKS ONLY)" and login with the previously created "preview" user.
  5. Once logged-in, open the path of your site's "en" page (eg. /content/monday/en.html) – see how the content that you have edited in AEM is displayed in that local proxy server.
  6. Open the "theme-sources" folder in your favorite code editor to start editing the sources (eg. the colors in the file src/site/_variables.scss), and see how the changes done to those files are reflected on the proxy server (with a delay of a few seconds after having saved the file).

C. Deploy the updated theme to AEM:

  1. In GitHub, go to the personal access token console, click "Generate new token", name the token in the "Note" field (eg. "AEM Sites-30"), check all of "repo" and "workflow", validate "Generate token", and store that token in some password manager of yours.
  2. Create a new GitHub repository, give it a name (e.g. "monday-theme"), make it public, and validate "Create repository".
  3. In the "Settings" tab of that repository, select "Secrets" and create the following 3 secrets:
    • GIT_TOKEN: Enter your previously created token as value.
    • AEM_URL: The URL of your AEM instance (this should be the same value as configured in the .env file that is located in your locally unzipped folder).
    • AEM_SITE: The name of the created site (eg. "monday", this should be the same value as configured in the .env file that is located in your locally unzipped folder).
  4. In the AEM "Sites" console (/sites.html), select the root page of your site, and in the "Site" rail, click "Update Github Settings". In the opened dialog, enter the URL of your new GitHub repository and the created GitHub access token – and hit Save.
  5. Commit the content of your "theme-sources" folder into this GitHub repository, for example by executing the following commands:
    git clone git@github.com:PATH-TO-YOUR-REPO.git
    mv monday-theme/.git/ .
    rm -rf monday-theme
    git add .
    git commit -m "initial commit"
    git push\
  6. In the GitHub repository, go to the "Actions" tab, select the second workflow "Build and deploy…", and from the "Run workflow" drop-down, select "Run workflow". This will take a minute or two, and it will also kick-off the other workflow "Update theme config", which takes about the same time. Once those competed, going to your AEM instance, you should see the pages of your site updated accordingly.
Clone this wiki locally