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.
- Nutzung von Route 53 für ANAME/ALIAS
- siehe auch Docs: Route 53
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
- Offizielle Hugo-Seite
- Static Gen - List of static site generators
- Hugo: Host on AWS Amplify
- AWS Docs: Hosten einer statischen Website auf Amazon S3
- AWS Tutorial: Hosten einer statischen Website
- Simple Static Website creating with Hugo and Deploying with Amplify Console
- How to build a Hugo website in AWS Lambda and deploy it to S3