1.1.3 Einrichten der AEM CS-Umgebung
1.1.3.1 Einrichten des GitHub-Repositorys
Navigieren Sie zu https://github.com. Klicken Sie auf Anmelden.
Geben Sie Ihre Anmeldedaten ein. Klicken Sie auf Anmelden.
Nach der Anmeldung sehen Sie Ihr GitHub-Dashboard.
Navigieren Sie zu https://github.com/AdobeDevXSC/citisignal-one. Sie werden es dann sehen. Klicken Sie Diese Vorlage verwenden und anschließend auf Neues Repository erstellen.
Für den Repository-Namen verwenden Sie citisignal. Setzen Sie die Sichtbarkeit auf Privat. Klicken Sie Repository erstellen.
Nach einigen Sekunden wird dann Ihr Repository erstellt.
Navigieren Sie anschließend zu https://github.com/apps/aem-code-sync. Klicken Sie Konfigurieren.
Klicken Sie auf Ihr GitHub-Konto.
Klicken Sie Nur Repositorys auswählen und fügen Sie dann das soeben erstellte Repository hinzu. Klicken Sie anschließend auf Installieren.
Sie erhalten dann diese Bestätigung.
1.1.3.2 Aktualisierungsdatei fstab.yaml
Klicken Sie in Ihrem GitHub-Repository auf , um die Datei fstab.yaml zu öffnen.
Klicken Sie auf Symbol Bearbeiten“.
Jetzt müssen Sie den Wert für das Feld (URL in 4 aktualisieren.
Sie müssen den aktuellen Wert durch die URL Ihrer spezifischen AEM CS-Umgebung in Kombination mit den Einstellungen Ihres GitHub-Repositorys ersetzen.
Dies ist der aktuelle Wert der URL: https://author-p131639-e1282833.adobeaemcloud.com/bin/franklin.delivery/adobedevxsc/citisignal-one/main.
Es gibt drei Teile der URL, die aktualisiert werden müssen
https://XXX/bin/franklin.delivery/YYY/ZZZ/main
XXX sollte durch die URL Ihrer AEM CS-Autorenumgebung ersetzt werden.
JJJJ sollte durch Ihr GitHub-Benutzerkonto ersetzt werden.
ZZZ sollte durch den Namen des GitHub-Repositorys ersetzt werden, das Sie in der vorherigen Übung verwendet haben.
Die URL Ihrer AEM CS-Autorenumgebung finden Sie unter https://my.cloudmanager.adobe.com. Klicken Sie auf Programm, um es zu öffnen.
Klicken Sie anschließend auf der Registerkarte Umgebungen auf die mit den drei Punkten und anschließend auf Details anzeigen.
Anschließend werden die Details Ihrer Umgebung angezeigt, einschließlich der URL Ihrer Author-Umgebung. Kopieren Sie die URL.
XXX = author-p148073-e1511503.adobeaemcloud.com
Den Namen des GitHub-Benutzerkontos finden Sie leicht in der URL Ihres Browsers. In diesem Beispiel ist der Name des Benutzerkontos woutervangeluwe.
JJJJ = woutervangeluwe
Den GitHub-Repository-Namen finden Sie auch im Browser-Fenster, das Sie in GitHub geöffnet haben. In diesem Fall ist der Repository-Name citisignal.
ZZZ = citisignal
Diese drei Werte zusammen führen zu dieser neuen URL, die im fstab.yaml konfiguriert werden muss.
https://author-p148073-e1511503.adobeaemcloud.com/bin/franklin.delivery/woutervangeluwe/citisignal/main
Klicken Sie Änderungen übernehmen….
Klicken Sie Änderungen übernehmen.
Die Datei fstab.yaml wurde aktualisiert.
1.1.3.3 Hochladen von CitiSignal-Assets
Navigieren Sie zu https://my.cloudmanager.adobe.com. Klicken Sie auf Programm, um es zu öffnen.
Klicken Sie anschließend auf die URL Ihrer Autorenumgebung.
Klicken Sie Mit Adobe anmelden.
Anschließend wird Ihre Autorenumgebung angezeigt.
Ihre URL sieht dann wie folgt aus: https://author-p148073-e1511503.adobeaemcloud.com/ui#/aem/aem/start.html?appId=aemshell
Sie müssen jetzt auf die Umgebung CRX Package Manager von AEM zugreifen. Entfernen Sie dazu ui#/aem/aem/start.html?appId=aemshell aus der URL und ersetzen Sie sie durch crx/packmgr. Ihre URL sollte jetzt wie folgt aussehen:https://author-p148073-e1511503.adobeaemcloud.com/crx/packmgr.
Drücken Sie Eingabetaste, um die Package Manager-Umgebung zu laden
Klicken Sie anschließend auf Paket hochladen.
Klicken Sie Durchsuchen, um das hochzuladende Paket zu suchen.
Das Paket, das hochgeladen werden soll, heißt Citisignal-assets.zip und kann hier heruntergeladen werden: https://tech-insiders.s3.us-west-2.amazonaws.com/one-adobe/citisignal-assets.zip.
Wählen Sie das Paket aus und klicken Sie auf Öffnen.
Klicken Sie anschließend auf OK.
Das Paket wird dann hochgeladen.
Klicken Sie anschließend auf Installieren auf dem soeben hochgeladenen Paket.
Klicken Sie auf Installieren.
Nach einigen Minuten wird Ihr Paket installiert.
Sie können dieses Fenster jetzt schließen.
1.1.3.4 Veröffentlichen von CitiSignal-Assets
Navigieren Sie zu https://my.cloudmanager.adobe.com. Klicken Sie auf Programm, um es zu öffnen.
Klicken Sie anschließend auf die URL Ihrer Autorenumgebung.
Klicken Sie Mit Adobe anmelden.
Anschließend wird Ihre Autorenumgebung angezeigt. Auf Assets.
Klicken Sie auf Dateien.
Klicken Sie auf den Ordner CitiSignal und dann auf Veröffentlichung verwalten.
Klicken Sie auf Weiter.
Klicken Sie auf Veröffentlichen.
Ihre Assets wurden veröffentlicht.
1.1.3.5 Erstellen einer CitiSignal-Website
Navigieren Sie zu https://my.cloudmanager.adobe.com. Klicken Sie auf Programm, um es zu öffnen.
Klicken Sie anschließend auf die URL Ihrer Autorenumgebung.
Klicken Sie Mit Adobe anmelden.
Anschließend wird Ihre Autorenumgebung angezeigt. Klicken Sie auf Sites.
Klicken Sie auf Erstellen und dann auf Site aus Vorlage.
Klicken Sie Importieren.
Sie müssen jetzt eine vorkonfigurierte Vorlage für Ihre Site importieren. Sie können die Vorlage (). Speichern Sie die Datei auf Ihrem Desktop.
Wählen Sie als Nächstes die citisignal-edge-delivery-services-template-0.0.4.zip aus und klicken Sie auf Öffnen.
Sie werden es dann sehen. Klicken Sie auf die gerade hochgeladene Vorlage, um sie auszuwählen, und klicken Sie dann auf Weiter.
Nun müssen Sie einige Details ausfüllen.
- Site-Titel: Verwenden CitiSignal
- Site-Name: verwenden Citisignal-One
- GitHub-URL: Kopieren Sie die URL des GitHub-Repositorys, das Sie zuvor verwendet haben
Dann hast du das hier. Klicken Sie auf Erstellen.
Ihre Site wird jetzt erstellt. Dies kann einige Minuten dauern. Klicken Sie auf OK.
Aktualisieren Sie Ihren Bildschirm nach einigen Minuten. Danach sehen Sie Ihre neu erstellte CitiSignal-Website.
1.1.3.6 Publish CitiSignal-Website
Klicken Sie anschließend auf das Kontrollkästchen vor CitiSignal. Klicken Sie dann auf Veröffentlichung verwalten.
Klicken Sie auf Weiter.
Klicken Sie auf Untergeordnete Einstellungen einschließen.
Aktivieren Sie das Kontrollkästchen Untergeordnete Elemente einbeziehen und heben Sie dann die Auswahl der anderen Kontrollkästchen auf. Klicken Sie auf OK.
Klicken Sie auf Veröffentlichen.
Sie werden dann hierher zurückgeschickt. Navigieren Sie CitiSignal > us > en. Aktivieren Sie das Kontrollkästchen vor index und klicken Sie dann auf Bearbeiten.
Ihre Website wird dann im universellen Editor geöffnet.
Sie können nun auf Ihre Website zugreifen, indem Sie zu main--citisignal--XXX.aem.page/us/en/ und/oder main--citisignal--XXX.aem.live/us/en/ wechseln, nachdem Sie XXX durch Ihr GitHub-Benutzerkonto ersetzt haben, was in diesem Beispiel woutervangeluwe ist.
In diesem Beispiel lautet die vollständige URL wie folgt:https://main--citisignal--woutervangeluwe.aem.page/us/en/ und/oder https://main--citisignal--woutervangeluwe.aem.live/us/en/.
Es kann einige Zeit dauern, bis alle Assets korrekt angezeigt werden, da sie zuerst veröffentlicht werden müssen.
Sie sehen dann Folgendes:
Nach einigen Minuten werden die Assets alle ordnungsgemäß geladen.
1.1.3.7 der Testseitenleistung
Navigieren Sie zu https://pagespeed.web.dev/. Geben Sie Ihre URL ein und klicken Sie auf Analysieren.
Anschließend sehen Sie, dass Ihre Website sowohl in einer Mobile- als auch in einer Desktop-Visualisierung einen Highscore erhält:
Mobil:
Desktop:
Nächster Schritt: 1.1.4 Konfigurieren eines benutzerdefinierten Blocks
Zurück zu Adobe Experience Manager Cloud Service und Edge Delivery Services