Hugo: ein in Go geschriebener Open-Source-Static-Site-Generator

Hugo: ein in Go geschriebener Open-Source-Static-Site-Generator 103

Ein in Go entwickelter Open-Source-Static-Site-Generator — schnell und flexibel. Dank seines Template-Systems und einer schnellen Asset-Pipeline rendert er komplette Websites in wenigen Sekunden.

#Ai工具箱 #Ai编程建站

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.

Hugo: Ein in Go geschriebener Open-Source-Generator für statische Websites.webp

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

Ähnliche Tools zu Hugo: ein in Go geschriebener Open-Source-Static-Site-Generator