Amplify

Aufsetzen einer statischen Website mit Amplify und Hugo

Hugo lokal einrichten

Warum Hugo?

  • Einer der favorisierten statischen Seiten-Generatoren (im April 2020)
  • Optimiert auf Geschwindigkeit, einfache Handhabung und Konfigurierbarkeit
  • Basiert auf Go anstatt Javascript (persönliche Präferenz)

Installation unter Pengwin (WSL)

Es wird empfohlen, Hugo mittels des Paket-Managers snap zu installieren, um immer die aktuellste Version zu erhalten. Dann kann Hugo jedoch aufgrund der Berechtigungen von Snap nur ins $HOME-Verzeichnis des Benutzers schreiben.

Für Pengwin (wie Debian) habe ich daher Hugo mittels sudo apt-get install hugo installiert. Dies liefert nicht immer die neuste, jedoch eine recht aktuelle Version.

Mehr Informationen zur Installation: https://gohugo.io/getting-started/installing/

Seite erstellen und konfigurieren

Erstellen einer neuen Website und Nutzen von Git, um Änderungen zu tracken:

hugo new site my-website
cd my-website
git init
git add .
git commit -m 'Initialer Commit'

Branches erstellen (optional)

git checkout -b www

Theme hinzufügen

git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml
git commit -m 'Theme anake benutzen'

Konfigurieren der config.toml.

Einen ersten Post erstellen mittels hugo new posts/my-first-post.md. Bearbeiten des Inhalts im Editor.

Starten eines lokalen Hugo-Servers mittels hugo server -D und Aufruf von http://localhost:1313/.

Optional

Bauen der statischen Website mittels hugo -D. Das Ergebnis befindet sich im Verzeichnis public.

Veröffentlichen mittels Amplify-Konsole

Pushen des Git Repos zu AWS CodeCommit

Erstellen eines AWS CodeCommit Repo mittels aws codecommit create-repository --repository-name my-website.

Kopieren der “CloneUrlHttp” und Verbinden des lokalen Git Repos durch: git remote add aws https://git-codecommit.eu-central-1.amazonaws.com/v1/repos/my-website.

Pushen: git push --set-upstream aws master

Bauen und Deployen

Aufruf von “AWS Amplify” in der AWS-Konsole. Klick auf “Get started” oder wenn schon Apps existieren, dann “Connect App”.

Auswahl von “AWS CodeCommit” und danach wählen des Repos und des master-Branches. Bei der Lösung mit mehreren Branches je Subdomain den passenden wählen (www, blog, docs, etc).

Die nächsten Konfigurationen vorausgewählt lassen und auf der letzten Seite “Save and deploy” wählen.

Nach Beendigung der Deploy-Pipeline ist die Website Live unter einer Adresse wie https://master.fooefn92barcpt.amplifyapp.com/.

Änderungen, welche mittels Commit und Push gemacht werden, lassen die Deployment Pipeline automatisch loslaufen.

Eigene Domain hinzufügen

“Domain management” in der Amplify-Konsole aufrufen und dort eine eigene Domain hinzufügen.

Konfiguration von AWS Amplify

Um sicherzustellen, dass immer die aktuellste oder eine spezifische Version von Hugo genutzt wird, können die Build-Einstellungen angepasst werden:

  • “Build Settings”
  • “Build Image Settings”: “Edit”
  • “Live package updates”: “Add package version”
  • Hugo: latest (oder besser: aktuelle lokale Version)

Nutzung von Subdomains

Amplify ist darauf ausgelegt, Branches mit Subdomains zu verknüpfen. Gleichzeitig ist Hugo so konzipiert, dass eine Hugo-Instanz für eine Basis-URL genutzt werden kann. Eine Subdomain entspricht damit einer eigenen Hugo-Instanz. Somit kann man sich zu Nutze machen, mehrere Hugo-Instanzen in eigenen Branches mit Subdomains zu verknüpfen.

Die Nutzung sieht damit folgendermaßen aus:

  • Basis-Hugo-Instanz im Branch master: Ist der “Master” für alle davon abgeleiteten Instanzen. Gemeinsamkeiten zwischen allen Instanzen (bzgl. Konfiguration etc.) werden über den Master gesteuert.
  • Subdomain-Hugo-Instanz in einem vom Master abgeleiteten Branch (bei mir www, blog, docs): Hugo-Instanzen, welche per Amplify deployed werden und unter den entsprechenden Subdomains verfügbar sind.

Preise

Quellen