Erste Schritte mit Hugo und Docker

Docker-Container

Laden Sie den Docker-Container vom Docker Hub herunter:

docker pull registry.gitlab.com/pages/hugo/hugo_extended:latest

Tag

Der Einfachheit halber legen wir einen Alias (Tag) an, damit wir nicht bei jedem Docker-Befehl die vollständige URL angeben müssen.

docker tag registry.gitlab.com/pages/hugo/hugo_extended:latest hugo_extended

Weitere Informationen finden Sie unter docker tag.

Eine neue Website erstellen

Nun können wir den Hugo-Container verwenden, um eine neue Website zu erstellen:

docker run --rm -v ${PWD}:/src hugo_extended hugo new site quickstart

• docker run weist Docker an, einen neuen Container zu erstellen und auszuführen.
• --rm teilt Docker mit, dass der Container nach Abschluss der Ausführung entfernt werden soll.
• -v ${PWD}:/src bindet das aktuelle Verzeichnis des Host-Rechners in einen Ordner innerhalb des Hugo-Containers unter /site ein.
• hugo_extended ist der Hugo-Container, den wir zuvor heruntergeladen haben.
• hugo new site <site_name> führt die Unterbefehle new site von Hugo aus. Im Hugo-Container ist der Befehl hugo bereits als Einstiegspunkt (Entry Point) definiert. Das letzte Argument ist der Name der Website, die wir erstellen.

Nach dem Ausführen des obigen Befehls sehen Sie:

Congratulations! Your new Hugo site is created in /src/quickstart.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/ or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

1. Wir haben Hugo innerhalb des Containers ausgeführt; auf dem Host ist Hugo nicht installiert.

2. Die durch hugo new site erzeugten Dateien (bzw. Artefakte) bleiben dank des eingebundenen Volumes auf dem Host erhalten und verfügbar, auch nachdem der Container entfernt wurde.

Ein Theme hinzufügen

Bevor wir ein Theme hinzufügen, behandeln wir das Ganze wie ein echtes Projekt:

cd quickstart
git init
git add .
git commit -m "initial commit"

Da wir nun ein Git-Repository haben, können wir ein Theme als Submodul hinzufügen:

git submodule add https://github.com/calintat/minimal.git themes/minimal
git submodule init
git submodule update
echo 'theme = "minimal"' >> config.toml

Falls Ihnen dieses Theme nicht zusagt, finden Sie unter https://themes.gohugo.io/ weitere Themes zur Auswahl.

Jetzt können wir die Website starten mit:

docker run --rm -v ${PWD}:/src -p 1313:1313 hugo_extended hugo server --bind 0.0.0.0

• docker run weist Docker an, einen neuen Container zu erstellen und auszuführen.
• --rm teilt Docker mit, dass der Container nach Abschluss der Ausführung entfernt werden soll.
• -v ${PWD}:/src bindet das aktuelle Verzeichnis des Host-Rechners in einen Ordner innerhalb des Hugo-Containers unter /src ein.
• -p 1313:1313 leitet Port 1313 auf unserem Host an Port 1313 in unserem Container weiter.
• hugo_extended ist der Hugo-Container, den wir zuvor heruntergeladen haben.
• hugo server --bind 0.0.0.0 führt den Unterbefehl hugo server aus. Die zusätzliche Bind-Option ist beim Ausführen in einem Container erforderlich, da Sie die Website sonst nicht lokal in Ihrem Browser öffnen können.

Sie erhalten eine Ausgabe wie diese:

                   | EN
+------------------+----+
  Pages            |  7
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  3
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Total in 42 ms
Watching for changes in /src/{content,data,layouts,static,themes}
Watching for config changes in /src/config.toml
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop

Öffnen Sie einen Browser und rufen Sie http://localhost:1313 auf.

Wenn Sie fertig sind, drücken Sie im Terminal Ctrl+C, um den laufenden Hugo-Docker-Container zu beenden.

Ihre Änderungen committen

git add .
git commit -m "add theme submodule"

Vereinfachung mit Docker Compose

Docker Compose bietet uns die Möglichkeit, weniger tippen zu müssen und alles Nötige auf einmal zu starten. In diesem Fall gibt es nur einen einzigen Service, aber stellen Sie sich vor, Sie bräuchten Datenbanken, Logging-Services, Key-Value-Services und einen API-Service. Es ist viel angenehmer, nur einen Befehl auszuführen und ein System zu haben, mit dem man sofort loslegen kann.

Ein weiterer Grund ist unsere Continuous Integration und unser Deployment. Man hört oft, dass Docker genutzt wird, um Konsistenz zwischen Umgebungen sicherzustellen: Was in Dev läuft, ist dasselbe wie in Integration, Staging und Prod – nur mit unterschiedlicher Konfiguration. Das stimmt zwar, doch Docker Compose bietet darüber hinaus noch etwas sehr Mächtiges: einen kombinierbaren Satz von Deployment-Befehlen. Dazu später mehr.

Erstellen Sie im Projektstammverzeichnis eine docker-compose.yml mit folgendem Inhalt:

version: "3"
services:
  hugo:
    image: registry.gitlab.com/pages/hugo/hugo_extended:latest
    working_dir: /src
    ports:
      - "1313:1313"
    volumes:
      - ".:/src"
    command: server --bind 0.0.0.0

Hugo starten

docker-compose up -d hugo

Öffnen Sie einen Browser und rufen Sie http://localhost:1313 auf.

Ihre Änderungen committen

git add .
git commit -m "add docker-compose"