Es gibt viele Möglichkeiten, Ihre mit Blowfish erstellte Hugo-Website bereitzustellen. Das Theme ist so konzipiert, dass es in fast jedem Bereitstellungsszenario flexibel einsetzbar ist.
Blowfish verwendet durchgehend relative URLs im gesamten Theme. Dies ermöglicht es, Websites einfach in Unterordnern und auf Hosts wie GitHub Pages bereitzustellen. Normalerweise ist keine spezielle Konfiguration erforderlich, solange der baseURL-Parameter in der hugo.toml-Datei korrekt konfiguriert wurde.
Die offizielle Hugo Hosting und Bereitstellung Dokumentation ist der beste Ort, um zu lernen, wie Sie Ihre Website bereitstellen. Die folgenden Abschnitte enthalten einige spezifische Theme-Konfigurationsdetails, die Ihnen helfen können, bei bestimmten Anbietern reibungslos zu deployen.
Wählen Sie Ihren Anbieter:
GitHub Pages#
GitHub ermöglicht das Hosting auf GitHub Pages mit Actions. Um diese Funktionalität zu aktivieren, aktivieren Sie Pages in Ihrem Repository und erstellen Sie einen neuen Actions-Workflow, um Ihre Website zu erstellen und bereitzustellen.
Die Datei muss im YAML-Format sein, im Verzeichnis .github/workflows/ Ihres GitHub-Repositories platziert und mit der Erweiterung .yml benannt werden.
branches und im Deploy-Schritt-if-Parameter auf den Quell-Branch setzen, der in Ihrem Projekt verwendet wird.# .github/workflows/gh-pages.yml
name: GitHub Pages
on:
push:
branches:
- main
jobs:
build-deploy:
runs-on: ubuntu-24.04
concurrency:
group: ${{ github.workflow }}-${{ github.ref }}
steps:
- name: Checkout
uses: actions/checkout@v3
with:
submodules: true
fetch-depth: 0
- name: Setup Hugo
uses: peaceiris/actions-hugo@v2
with:
hugo-version: "latest"
- name: Build
run: hugo --minify
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
if: ${{ github.ref == 'refs/heads/main' }}
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_branch: gh-pages
publish_dir: ./publicPushen Sie die Konfigurationsdatei zu GitHub und die Action sollte automatisch ausgeführt werden. Sie könnte beim ersten Mal fehlschlagen, und Sie müssen den Abschnitt Settings > Pages Ihres GitHub-Repos besuchen, um zu überprüfen, ob die Quelle korrekt ist. Sie sollte auf den gh-pages-Branch eingestellt sein.
Sobald die Einstellungen konfiguriert sind, führen Sie die Action erneut aus und die Website sollte korrekt erstellt und bereitgestellt werden. Sie können die Actions-Logs einsehen, um zu überprüfen, ob alles erfolgreich bereitgestellt wurde.
Netlify#
Um auf Netlify bereitzustellen, erstellen Sie eine neue Continuous Deployment-Site und verknüpfen Sie sie mit Ihrem Quellcode. Die Build-Einstellungen können in der Netlify-UI leer gelassen werden. Sie müssen nur die Domain konfigurieren, die Sie verwenden werden.
Erstellen Sie dann im Root-Verzeichnis Ihres Site-Repositories eine netlify.toml-Datei:
# netlify.toml
[build]
command = "hugo mod get -u && hugo --gc --minify -b $URL"
publish = "public"
[build.environment]
NODE_ENV = "production"
GO_VERSION = "1.16"
TZ = "UTC" # Auf bevorzugte Zeitzone setzen
[context.production.environment]
HUGO_VERSION = "0.104.1"
HUGO_ENV = "production"
[context.deploy-preview.environment]
HUGO_VERSION = "0.104.1"Diese Konfiguration geht davon aus, dass Sie Blowfish als Hugo-Modul bereitstellen. Wenn Sie das Theme mit einer anderen Methode installiert haben, ändern Sie den Build-Befehl einfach zu hugo --gc --minify -b $URL.
Wenn Sie die Konfigurationsdatei in Ihr Repository pushen, sollte Netlify Ihre Website automatisch bereitstellen. Sie können die Deploy-Logs in der Netlify-UI überprüfen, um nach Fehlern zu suchen.
Render#
Die Bereitstellung auf Render ist sehr unkompliziert und die gesamte Konfiguration erfolgt über die Render-UI.
Erstellen Sie eine neue Static Site und verknüpfen Sie sie mit dem Code-Repository Ihres Projekts. Konfigurieren Sie dann einfach den Build-Befehl als hugo --gc --minify und das Publish-Verzeichnis als public.
Die Website wird automatisch erstellt und bereitgestellt, wenn Sie eine Änderung in Ihr Repository pushen.
Cloudflare Pages#
Cloudflare bietet den Pages-Dienst an, der Hugo-Blogs hosten kann. Er erstellt die Website aus einem Git-Repository und hostet sie dann auf dem CDN von Cloudflare. Folgen Sie deren Hugo-Bereitstellungsanleitung, um loszulegen.
Die von Cloudflare angebotene Rocket Loader™-Funktion versucht, das Rendering von Webseiten mit JavaScript zu beschleunigen, aber sie unterbricht den Erscheinungsbild-Umschalter im Theme. Sie kann auch ein störendes Hell-/Dunkel-Bildschirmflackern beim Durchsuchen Ihrer Website verursachen, da Skripte in der falschen Reihenfolge geladen werden.
Dieses Problem kann behoben werden, indem Sie es deaktivieren:
- Gehen Sie zum Cloudflare Dashboard
- Klicken Sie auf Ihren Domainnamen in der Liste
- Klicken Sie auf Optimization im Abschnitt Speed
- Scrollen Sie nach unten zu Rocket Loader™ und deaktivieren Sie es
Hugo-Websites, die mit Blowfish erstellt wurden, laden auch mit deaktivierter Funktion immer noch sehr schnell.
Shared Hosting, VPS oder privater Webserver#
Die Verwendung von traditionellem Webhosting oder die Bereitstellung auf Ihrem eigenen Webserver ist so einfach wie das Erstellen Ihrer Hugo-Website und das Übertragen der Dateien auf Ihren Host.
Stellen Sie sicher, dass der baseURL-Parameter in hugo.toml auf die vollständige URL zum Root Ihrer Website gesetzt ist (einschließlich aller Subdomains oder Unterordner).
Erstellen Sie dann Ihre Website mit hugo und kopieren Sie den Inhalt des Ausgabeverzeichnisses in das Root-Verzeichnis Ihres Webservers und Sie sind bereit. Standardmäßig heißt das Ausgabeverzeichnis public.
Wenn Sie einen Hosting-Anbieter benötigen, schauen Sie sich Vultr oder DigitalOcean an. Die Anmeldung über diese Affiliate-Links gibt Ihnen bis zu 100 $ kostenloses Guthaben, damit Sie den Service ausprobieren können.
