Hugo: ein in Go geschriebener Open-Source-Static-Site-Generator
Hugo: ein in Go geschriebener Open-Source-Static-Site-GeneratorEinführung
Was ist Hugo?
Hugo ist ein in Go geschriebener statischer Website-Generator, der schnell und hochflexibel ist. Mithilfe eines Template-Systems und einer schnellen Asset-Processing-Pipeline kann Hugo komplette Websites innerhalb weniger Sekunden rendern. Hugo kann verschiedene Arten von Websites erstellen, darunter Unternehmens-, Regierungs-, gemeinnützige, Bildungs-, Nachrichten-, Veranstaltungs- und Projekt-Websites, Dokumentationsseiten, Bilder-Portfolios, Landingpages, geschäftliche, professionelle und persönliche Blogs sowie Lebensläufe.

Hauptfunktionen von Hugo
Schnelle Asset-Processing-Pipeline
Bildverarbeitung: Ermöglicht Konvertierung, Größenänderung, Zuschneiden, Drehen, Farbanpassung, Anwendung von Filtern, Überlagern von Text und Bildern sowie das Extrahieren von EXIF-Daten.
JavaScript-Bundling: Transpiliert TypeScript und JSX zu JavaScript, führt Bundling, Tree-Shaking, Komprimierung, Source-Map-Erstellung und SRI-Hashing durch.
Sass-Verarbeitung: Transpiliert Sass zu CSS, führt Bundling, Tree-Shaking, Komprimierung, Source-Map-Erstellung und SRI-Hashing durch und integriert sich mit PostCSS.
Tailwind CSS-Verarbeitung: Kompiliert Tailwind-CSS-Utility-Klassen zu Standard-CSS, führt Bundling, Tree-Shaking, Optimierung, Komprimierung und SRI-Hashing durch und integriert sich mit PostCSS.
Flexibles Framework
Hugo verfügt über Mehrsprachenunterstützung und ein leistungsstarkes Taxonomie-System und wird häufig zur Erstellung von Dokumentationsseiten, Landingpages sowie Unternehmens-, Regierungs-, gemeinnützigen, Bildungs-, Nachrichten-, Veranstaltungs- und Projekt-Websites eingesetzt.
Integrierter Webserver
Während der Entwicklung kannst du mit Hugos eingebettetem Webserver Änderungen an Inhalt, Struktur, Verhalten und Darstellung sofort sehen.
Hugo-Module
Inhalte, Assets, Daten, Übersetzungen, Themes, Templates und Konfigurationen können über öffentliche oder private Git-Repositories mit anderen Projekten geteilt werden.
Hugo-Versionen
Hugo gibt es in drei Versionen: Standard, Extended und Extended/Deployable. Die Versionen Extended und Extended/Deployable bieten erweiterte Funktionen, z. B. das Kodieren von Bildern im WebP-Format und das Transpilieren von Sass zu CSS mit dem eingebetteten LibSass. Die Version Extended/Deployable unterstützt zusätzlich das direkte Bereitstellen der Website in Google Cloud Storage-Buckets, AWS S3-Buckets oder Azure Storage-Container.
Wie verwendet man Hugo?
1. Neue Website erstellen
Öffne das Terminal und führe den folgenden Befehl aus, um eine neue Hugo-Website zu erstellen:
hugo new site mynewsite cd mynewsite
2. Theme hinzufügen
Du kannst ein Theme aus der Hugo-Theme-Bibliothek auswählen und es zu deiner Website hinzufügen. Am Beispiel des Hyde-Themes importierst du das Theme mit dem Hugo-Modulsystem:
# Hugo-Modulsystem initialisieren hugo mod init github.com/<your_user>/<your_project> # Theme in der Hugo-Konfigurationsdatei importieren # Bearbeite die Datei hugo.toml oder hugo.yaml und füge Folgendes hinzu [module] [[module.imports]] path = "github.com/spf13/hyde"
3. Inhalte erstellen
Verwende den folgenden Befehl, um einen neuen Artikel zu erstellen:
hugo new posts/my-first-post.md
Bearbeite anschließend die generierte Markdown-Datei content/posts/my-first-post.md und füge den Artikelinhalt hinzu.
4. Entwicklung und Vorschau
Während der Entwicklung kannst du mit Hugos eingebettetem Webserver Änderungen an Inhalt, Struktur, Verhalten und Darstellung in Echtzeit anzeigen. Führe den folgenden Befehl aus, um den Server zu starten:
hugo server -D
Die Option -D bedeutet, dass Entwurfsartikel eingeschlossen werden. Öffne den Browser und rufe http://localhost:1313 auf, um deine Website anzuzeigen.
Github:https://github.com/gohugoio/hugo
Drehbuch-Assistent▸
AI Apps
AI Nachrichten