Hugo ist ein beliebter Open-Source Static Site Generator (SSG), der Entwicklern dabei hilft, Websites schnell und effizient zu erstellen und zu verwalten. Er kann zur Erstellung von Blogs, Portfolios und allen Arten von persönlichen Websites verwendet werden, die keine dynamischen Daten benötigen.

Wenn du Websites mit Hugo erstellst, möchtest du sie sicher online hosten, damit du sie mit allen teilen kannst, die darauf zugreifen müssen. Hier kommt das statische Seiten Hosting von Kinsta ins Spiel!

Was ist Kinsta’s statisches Seiten Hosting?

Kinsta’s statische Seiten Hosting ist ein kostenloser Dienst, der sich auf das Hosting statischer Websites spezialisiert hat. Dazu werden vorgefertigte HTML-, CSS- und JavaScript-Dateien bereitgestellt, die sich nicht dynamisch verändern. Du verbindest ein Repository, das bei einem Git-Provider (BitBucket, GitHub oder GitLab) gehostet wird, mit deinem Kinsta-Konto und stellst deine statischen Website-Dateien ins Internet.

Das statische Seiten Hosting von Kinsta kann automatisch Websites aus SSGs erstellen, die auf Node.js basieren. Für andere wie Hugo, die in der Programmiersprache Go (Golang) geschrieben sind, musst du einen anderen Ansatz finden.

In diesem Artikel erfährst du, wie du deine Hugo-Site mit Kinsta’s statischem Seiten Hosting kostenlos auf Kinsta bereitstellen kannst!

Bereitstellen deiner Hugo-Site mit Kinsta’s statischem Seiten Hosting

Es gibt drei Möglichkeiten, deine Hugo-Site auf dem statischen  Seiten Hosting von Kinsta bereitzustellen:

  1. Erstelle deine Website mit Continuous Integration and Continuous Deployment (CI/CD) und stelle sie dann bereit.
  2. Nutze die Entwicklerabhängigkeit hugo-bin.
  3. Biete lokal erstellte statische Dateien an.

In diesem Artikel gehen wir alle diese Möglichkeiten durch.

Voraussetzungen

Um diesem Tutorial folgen zu können, setzen wir voraus, dass du Folgendes hast

  • Erfahrung mit Hugo und Git.
  • Eine Hugo-Site, die lokal läuft.

Erstelle deine Website mit CircleCI und stelle sie auf Kinsta bereit

Für die erste Methode verwenden wir CircleCI als CI/CD-Tool. Bei dieser Methode erstellst du einen CircleCI-Workflow, der deine Hugo-Site in einem neuen Zweig namens deploy erstellt, und konfigurierst Kinsta, um die statischen Dateien von diesem Zweig aus zu verteilen.

Vorteile der CI/CD-Methode

Mit dieser Methode musst du deine Website nicht mehr lokal erstellen, bevor du sie in dein Git-Repository stellst. Normalerweise kümmert sich Kinsta bei SSGs, die auf Node.js basieren, um die Erstellung der Website, aber bei anderen SSGs wie Hugo kann die Verwendung eines Workflows helfen, den Erstellungsprozess automatisch zu erledigen.

Außerdem kannst du deiner CI/CD-Konfigurationsdatei weitere Jobs hinzufügen, zum Beispiel zum Linting und Testen deines Codes. Außerdem garantierst du, dass deine Bereitstellung nur dann aktualisiert wird, wenn die CI/CD-Pipeline erfolgreich abgeschlossen wurde.

Schritt 1: Erstelle die Konfigurationsdatei

Beginne mit der Erstellung eines Ordners .circleci im Stammverzeichnis deines Hugo-Projekts. In diesem Ordner erstellst du eine config.yml-Datei, um die Konfiguration deines Workflows zu definieren.

Schritt 2: Pushe deinen Code in ein Git-Repository

Erstelle ein Git-Repository mit deinem bevorzugten Git-Anbieter und schiebe deinen Code in das Repository.

Schritt 3: Erstelle einen verwaisten Zweig

Als Nächstes erstellst du einen leeren verwaisten Zweig mit dem Namen deploy, in den die statischen Dateien für die Bereitstellung verschoben werden. Führe die folgenden Befehle im Terminal deines Projekts aus:

git switch --orphan deploy
git commit --allow-empty -m "Initial commit on deploy branch"
git push -u origin deploy

Füge diesem Zweig keine Dateien hinzu; er wird vom CircleCI-Workflow automatisch mit dem Inhalt des von Hugo erstellten öffentlichen Ordners gefüllt.

Schritt 4: Erstelle ein CircleCI-Konto

Besuche die CircleCI-Website und erstelle ein Konto, falls du noch keins hast. Du kannst dich mit deinem bevorzugten Git-Anbieter anmelden, was den Zugriff auf deine Repositories ohne weitere Konfiguration erleichtert.

Schritt 5: Konfiguriere dein Repository

Nachdem du dich eingeloggt hast, gehst du zu deinem CircleCI-Dashboard, klickst in der linken Seitenleiste auf Projekte und wählst das Repository aus, das du konfigurieren möchtest. CircleCI wird deine Konfigurationsdatei automatisch erkennen.

Konfiguriere dein Repository mit CircleCI
Konfiguriere dein Repository mit CircleCI

Klicke auf die Schaltfläche Projekt ein richten, um CircleCI Zugriff auf deine Codebasis zu gewähren und Workflows bei Codeänderungen auszuführen.

Schritt 6: Definiere die CircleCI-Konfiguration

Du hast jetzt eine CircleCI-Konfigurationsdatei erstellt. Lass uns ihren Inhalt erstellen. Vergewissere dich, dass du dich in deinem Standardzweig befindest (nicht im deploy Zweig) und beginne mit der Definition der CircleCI-Version, die derzeit 2.1 ist:

version: 2.1

Schritt 7: Executors definieren

Da es sich um ein Hugo-Projekt handelt, musst du einen Executor definieren, der die Jobs ausführt. Definiere die hugo-executor hier, damit du sie nicht für jeden Job neu definieren musst. Dieser Executor verwendet ein Docker-Image (cibuilds/hugo:latest), um eine einheitliche Umgebung für den Aufbau der Hugo-Site zu schaffen:

executors:
  hugo-executor:
    docker:
      - image: cibuilds/hugo:latest

Schritt 8: Jobs definieren

Als nächstes definierst du zwei Jobs: build und push build. Diese Jobs legen die Schritte fest, die in jedem Job ausgeführt werden sollen:

jobs:
  build:
    executor: hugo-executor

  push build:
    executor: hugo-executor

Build Job:

Dieser Job ist für die Erstellung deiner Hugo-Site verantwortlich und speichert die erzeugten statischen Dateien im Arbeitsbereich zwischen, damit sie später im Job push build verwendet werden können.

build:
  executor: hugo-executor
  steps:
    - checkout

    - run:
        name: Update theme
        command: git submodule update --init --recursive

    - run:
        name: Build Hugo site
        command: hugo --destination=workspace/public

    # Persist the 'build' directory to the workspace
    - persist_to_workspace:
        root: workspace
        paths:
          - public

Der Job oben gibt an, dass er den zuvor definierten hugo-executor Executor verwendet. Und führt dann vier Hauptschritte aus:

  • checkout: Dieser Schritt checkt den Quellcode deines Projekts aus dem GitHub-Repository aus.
  • Update theme: Dieser Schritt initialisiert und aktualisiert Git-Submodule (falls vorhanden), um sicherzustellen, dass dein Hugo-Theme aktuell ist. Dies ist nützlich, wenn deine Hugo-Site Gitmodules verwendet, um auf das verwendete Theme zu verweisen, anstatt große Dateien von Themes zu pushen, die bereits auf GitHub verfügbar sind.
  • Build Hugo site: In diesem Schritt wird die Hugo-Site erstellt und der Zielordner als workspace/public angegeben.
  • persist_to_workspace: In diesem Schritt wird das öffentliche Verzeichnis (Ausgabe des Hugo-Builds) im Arbeitsbereich gespeichert, damit es später im push build Job verwendet werden kann.

Push-Build-Job:

Der Job push build ist dafür verantwortlich, die erstellte Website in einen verwaisten Zweig (deploy) in deinem GitHub-Repository zu verschieben. Auf diese Weise verbleibt dein Code auf dem Standard-Zweig und der Zweig deploy enthält nur die statischen Dateien deiner Website.

push build:
  executor: hugo-executor
  steps:
    - attach_workspace:
        at: workspace

    - run:
        name: Push build folder to GitHub
        command: |
          # Configure Git identity (replace <GitHubUsername> with your actual username)
          git config --global user.name "<GitHubUsername>"
          git config --global user.email "<GitHubUsername>@users.noreply.github.com"

          # Clone the repository (replace <your-repo-name> with your actual repository URL)
          git clone --branch deploy --depth 1 https://<GitHubUsername>:${GITHUB_TOKEN}@github.com/<GitHubUsername>/<your-repo-name>.git deployment

          # Copy the 'public' directory to the deployment folder
          cp -R workspace/public deployment

          # Navigate to the deployment folder
          cd deployment

          # Commit and push changes
          git add .
          git commit -m "Auto generated from ${CIRCLE_SHA1}"
          git push

Der obige Job macht Folgendes:

  • attach_workspace: Dieser Schritt fügt den Arbeitsbereich hinzu, in dem der Job build das öffentliche Verzeichnis gespeichert hat.
  • Push build folder to GitHub: Dieser Schritt führt mehrere Git-Operationen durch:
    • Er konfiguriert die Git-Identität mit deinem GitHub-Benutzernamen und deiner E-Mail-Adresse.
    • Klont dein GitHub-Repository in einen Ordner namens deployment auf dem CircleCI-Runner-Rechner.
    • Kopiert den Inhalt des Verzeichnisses workspace/public (die erstellte Hugo-Site) in den Ordner deployment.
    • Ändert das Arbeitsverzeichnis in deployment.
    • Überträgt die Änderungen mit einer Meldung, die darauf hinweist, dass es sich um einen automatisch generierten Commit von CircleCI handelt.
    • Verschiebt die Änderungen in einen neuen Zweig in deinem GitHub-Repository.

Ersetze <GitHubUsername> und <your-repo-name> durch deinen tatsächlichen GitHub-Benutzernamen und den Namen deines Repositorys. Stelle außerdem sicher, dass du ein GitHub-Zugangs-Token erstellst, damit CircleCI auf dein GitHub-Konto zugreifen kann.

Definiere die Bereiche für das GitHub-Zugriffstoken
Definiere die Bereiche für das GitHub-Zugriffstoken

Füge dann das Token als Umgebungsvariable mit dem Namen GITHUB_TOKEN in deinen CircleCI Projekteinstellungen hinzu.

Schritt 9: Definiere den Workflow

Nachdem du deine Jobs eingerichtet hast, geht es in der nächsten Phase darum, deinen Workflow zu konfigurieren. Fahre mit deiner CircleCI-Konfiguration fort und erstelle einen Workflow, der den Job build auslöst, wenn es Code-Änderungen im Zweig main gibt, und der voraussetzt, dass der Job build erfolgreich abgeschlossen wurde, bevor der Job push build ausgeführt wird:

workflows:
  version: 2
  build-and-deploy:
    jobs:
      - build:
          filters:
            branches:
              only:
                - main
      - push build:
          requires:
            - build

Schritt 10: Commit und Push

Sobald dein Workflow erfolgreich konfiguriert ist, übergibst du deine Änderungen an dein Git-Repository und stellst sie dort bereit. CircleCI erkennt automatisch das Vorhandensein der Konfigurationsdatei und löst deine definierten Workflows bei Codeänderungen aus.

Details zur CircleCI-Pipeline
Details zur CircleCI-Pipeline

Wenn du dein GitHub-Repository überprüfst, befindet sich im Zweig deploy bereits der öffentliche Ordner, der die statischen Dateien enthält.

Du kannst die komplette CircleCI-Konfiguration in diesem Beispiel-Repository überprüfen.

Schritt 11: Statische Dateien auf Kinsta bereitstellen

Die Bereitstellung auf Kinsta ist in Sekundenschnelle erledigt, vor allem, da die statischen Dateien bereits erstellt sind. Befolge diese Schritte, um deine Hugo-Site mit dem statischen Seiten Hosting kostenlos bereitzustellen:

  1. Logge dich ein oder erstelle ein Konto, um dein MyKinsta-Dashboard zu sehen.
  2. Autorisiere Kinsta bei deinem Git-Anbieter.
  3. Klicke in der linken Seitenleiste auf Static Sites und dann auf Site hinzufügen.
  4. Wähle das Repository und den Zweig aus, von dem aus du bereitstellen möchtest ( deploy ).
  5. Gib deiner Site einen eindeutigen Namen und klicke auf Weiter.
  6. Lass die Felder Build command und Node version leer und gib als Veröffentlichungsverzeichnis public an.
  7. Klicke abschließend auf Site erstellen.

Und das war’s! Innerhalb weniger Sekunden hast du eine bereitgestellte Website. Du erhältst einen Link, über den du auf die bereitgestellte Version deiner Website zugreifen kannst. Du kannst später deine eigene Domain und dein SSL-Zertifikat hinzufügen, wenn du möchtest.

Hugo-Bin zum Erstellen und Bereitstellen deiner Hugo-Site auf Kinsta verwenden

Das Hugo-bin-Paket ist ein binärer Wrapper für Hugo. Es ermöglicht dir, dein Hugo-Projekt mit Node.js-Befehlen zu bauen und bereitzustellen. Bei dieser Methode brauchst du kein CI/CD-Tool, um deine Website zu erstellen, bevor du sie auf Kinsta’s statischem Seiten Hosting bereitstellst.

So verwendest du das Hugo-bin-Paket in deinem Hugo-Projekt:

  1. Initialisiere Node.js im Stammverzeichnis deines Projekts, indem du den Befehl npm init -y ausführst.
  2. Installiere dann Hugo-bin als Entwickler-Abhängigkeit in deinem Projekt, indem du diesen Befehl ausführst:
npm i -D hugo-bin
  1. Füge die folgenden Skriptbefehle zu deiner package.json Datei hinzu:
"scripts": {
    "build": "hugo",
    "create": "hugo new",
    "serve": "hugo server"
  }

Damit kann Kinsta deine Hugo-Site bauen und bereitstellen, ohne dass du deine Dateien vor der Bereitstellung bauen musst.

Wenn du alles erledigt hast, schiebe deinen Code in dein Git-Repository. Befolge diese Schritte, um deine statische Website auf Kinsta bereitzustellen:

  1. Logge dich ein oder erstelle ein Konto, um dein MyKinsta-Dashboard zu sehen.
  2. Autorisiere Kinsta mit deinem Git-Anbieter.
  3. Klicke in der linken Seitenleiste auf Static Sites und dann auf Site hinzufügen.
  4. Wähle das Repository und den Zweig aus, von dem aus du bereitstellen möchtest.
  5. Gib deiner Site einen eindeutigen Namen.
  6. Füge die Build-Einstellungen in folgendem Format hinzu:
    • Build-Befehl: npm run build
    • Node-Version: 18.16.0
    • Veröffentlichungsverzeichnis: public
  1. Zum Schluss klickst du auf Website erstellen.

Und das war’s! Du hast jetzt innerhalb von wenigen Sekunden eine Website eingerichtet.

Deine statischen Dateien nur auf Kinsta bereitstellen

Schließlich gibt es noch eine weitere Methode, um deine Hugo-Website auf Kinsta bereitzustellen: Du erstellst deine Website lokal und stellst sie dann auf Kinsta bereit. Bei diesem Verfahren wird ein öffentlicher Ordner im Stammverzeichnis deines Projekts erstellt. Der größte Nachteil dieser Methode ist jedoch, dass du deine Website vor jedem Push lokal erstellen musst, was im Vergleich zu anderen Methoden, die den Erstellungsprozess automatisieren, zeitaufwändig und weniger bequem sein kann.

Standardmäßig ist der öffentliche Ordner von deinem Git-Repository ausgeschlossen, da er in deiner .gitignore-Datei enthalten ist. So nimmst du ihn in dein Repository auf und stellst deine Website auf Kinsta bereit:

  1. Entferne den öffentlichen Ordner aus deiner .gitignore-Datei.
  2. Befolge die oben beschriebenen Schritte zur Bereitstellung.
  3. Stelle das Repository auf Kinsta bereit und achte darauf, dass die Felder Build command und Node version leer bleiben, da deine Website bereits gebaut ist.
  4. Gib das Verzeichnis für die Veröffentlichung als public an.

Alternativ kannst du auch nur die statischen Dateien in dein GitHub-Repository pushen. In diesem Fall musst du kein Git-Repository im Stammverzeichnis deines Projekts einrichten. Du musst nur git init im öffentlichen Ordner ausführen. So kannst du die Versionskontrolle für deine statischen Dateien vom Rest deines Projekts getrennt halten.

Wenn du in diesem Szenario die Dateien separat pushen willst, ohne sie in einem öffentlichen Ordner abzulegen, gibst du beim Deployment auf Kinsta das Verzeichnis Publish als . an. Diese Schreibweise steht für den Stammordner, und Kinsta wird die Dateien entsprechend bereitstellen.

Zusammenfassung

In diesem Artikel wurden drei effektive Methoden vorgestellt, mit denen du deine Hugo-Website kostenlos auf der Kinsta-Plattform für statische Websites bereitstellen kannst. Du hast die Flexibilität, die Methode zu wählen, die am besten zu deinen Anforderungen passt. Ausführliche Informationen zur Erstellung einer blitzschnellen statischen Website mit Hugo findest du in unserem umfassenden Leitfaden.

Joel Olawanle Kinsta

Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.