1.1.2 Crear un sitio web basado en documentos

Mientras espera a que se cree su programa de Cloud Manager, tiene tiempo suficiente para configurar su primer sitio web de creación basada en documentos. El siguiente ejercicio se basa en el Tutorial para desarrolladores de aem.live. Siga los pasos a continuación para empezar.

1.1.2.1 Configurar la unidad de Google

Vaya a https://drive.google.com. Haga clic en + Nueva y luego haga clic en Nueva carpeta.

{modal="regular"}

Asigne un nombre a la carpeta aemdocb-test. Haga clic en Crear.

{modal="regular"}

Descargue el archivo aemboilerplate.zip y extráigalo en su equipo.

{modal="regular"}

Verá 3 archivos en esa carpeta. Copie esos archivos en la nueva carpeta de Google Drive.

{modal="regular"}

Ahora debe convertir estos archivos en un archivo nativo de Google. Para ello, abra cada archivo y vaya a Archivo > Guardar como Google Docs.

{modal="regular"}

Debe hacer esto para los 3 archivos y después verá 6 archivos en la carpeta de Google Drive.

{modal="regular"}

Luego tiene esto en su carpeta.

{modal="regular"}

Para que funcione la demostración de creación basada en documentos, ahora debe compartir la carpeta de Google Drive con la dirección de correo electrónico helix@adobe.com. Haz clic en el nombre de tu carpeta, haz clic en Compartir y luego haz clic en Compartir de nuevo.

{modal="regular"}

Escriba la dirección de correo electrónico helix@adobe.com y haga clic en Enviar.

{modal="regular"}

A continuación, copie y anote la dirección URL de la carpeta Google Drive tal como la necesitará en el siguiente ejercicio. Haz clic en el nombre de tu carpeta, haz clic en Compartir y luego haz clic en Copiar vínculo.

{modal="regular"}

https://drive.google.com/drive/folders/1PNIOFeptIfszSebawT-Y_bwB4_anQWk5?usp=drive_link

Debe quitar el parámetro de cadena de consulta ?usp=drive_link para que la dirección URL tenga el aspecto siguiente:

https://drive.google.com/drive/folders/1PNIOFeptIfszSebawT-Y_bwB4_anQWk5

1.1.2.2 Configurar el repositorio de GitHub

Vaya a https://github.com. Haga clic en Iniciar sesión.

{modal="regular"}

Introduzca sus credenciales. Haga clic en Iniciar sesión.

{modal="regular"}

Cuando haya iniciado sesión, verá su panel de GitHub.

{modal="regular"}

Vaya a https://github.com/adobe/aem-boilerplate. Entonces verá esto… Haga clic en Usar esta plantilla y luego haga clic en Crear un nuevo repositorio.

{modal="regular"}

Para el nombre del repositorio, use aemdocb-test. Establezca la visibilidad en Privado. Haga clic en Crear repositorio.

{modal="regular"}

Después de un par de segundos, se crea el repositorio.

{modal="regular"}

A continuación, ve a https://github.com/apps/aem-code-sync. Haga clic en Configurar.

{modal="regular"}

Haga clic en su cuenta de GitHub.

{modal="regular"}

Haga clic en Seleccionar solo repositorios y, a continuación, agregue el repositorio que acaba de crear. A continuación, haga clic en Instalar.

{modal="regular"}

Luego recibirás esta confirmación.

{modal="regular"}

1.1.2.3 Actualizar archivo fstab.yaml

En su repositorio de GitHub, haga clic para abrir el archivo fstab.yaml.

{modal="regular"}

Haga clic en el icono editar.

{modal="regular"}

Ahora necesita actualizar el valor del campo url en la línea 2.

{modal="regular"}

Debe reemplazar el valor actual por la URL de su entorno AEM CS específico en combinación con la configuración de su repositorio de GitHub.

Este es el valor actual de la dirección URL: https://drive.google.com/drive/u/0/folders/1MGzOt7ubUh3gu7zhZIPb7R7dyRzG371j.

Reemplace ese valor por la dirección URL que copió de la carpeta de Google Drive, https://drive.google.com/drive/folders/1PNIOFeptIfszSebawT-Y_bwB4_anQWk5. Haga clic en Confirmar cambios….

{modal="regular"}

Haga clic en Confirmar cambios.

{modal="regular"}

1.1.2.4 Instalación de la extensión de AEM Sidekick

Vaya a https://chromewebstore.google.com/detail/aem-sidekick/ccfggkjabjahcjoljmgmklhpaccedipo. Haga clic en Agregar a Chrome.

{modal="regular"}

Anclar la extensión AEM Sidekick.

{modal="regular"}

1.1.2.5 Previsualizar y publicar el sitio web basado en documentos

Vuelva a la carpeta de Google Drive. En la barra de tareas, haga clic en la extensión AEM Sidekick. A continuación, verá una ventana emergente de la barra de AEM Sidekick en la carpeta.

{modal="regular"}

Seleccione los 3 archivos de la carpeta Google Drive. Haga clic en Vista previa.

{modal="regular"}

Vuelva a hacer clic en Vista previa.

{modal="regular"}

Haga clic en para cerrar la ventana emergente de diálogo verde.

{modal="regular"}

Vuelva a seleccionar los tres archivos de la carpeta Google Drive. Ahora, haga clic en Publicar.

{modal="regular"}

Haga clic en Publicar.

{modal="regular"}

Haga clic en para cerrar de nuevo el cuadro de diálogo verde. Ahora, selecciona el archivo index, haz clic en Copiar URL y luego haz clic en Copiar URL de Live.

{modal="regular"}

La dirección URL que se copió tendrá el siguiente aspecto: https://main--aemdocb-test--woutervangeluwe.aem.live/.

En la URL anterior:

Abra una nueva ventana del explorador y vaya a la dirección URL.

{modal="regular"}

1.1.2.6 Realice un cambio y publíquelo

Vuelva a la unidad de Google y abra el filtro index en Google.

{modal="regular"}

Reemplace el texto Testing por cualquier otro texto de su elección. Haga clic en Vista previa.

{modal="regular"}

Se abrirá la versión de vista previa del sitio web. Revise el cambio y haga clic en Publicar.

{modal="regular"}

A continuación, verá la versión activa del sitio web.

{modal="regular"}

El ejercicio anterior era una buena manera de empezar y experimentar la creación basada en documentos. Ahora puede continuar con el siguiente ejercicio, en el que configurará su propio sitio web de demostración con CitiSignal como marca de demostración.

Siguiente paso: 1.1.3 Configurar el entorno de AEM CS

Volver a Adobe Experience Manager Cloud Service & Edge Delivery Services

Volver a todos los módulos