Statische Webseiten zeichnen sich durch ihre unkomplizierte Erstellung und bemerkenswerte Geschwindigkeit aus. Mit Hugo können Sie themenbasierte, statische Websites unter Linux entwickeln und das Erstellen von Webseiten wird wieder zum Vergnügen.
Der Webseiten-Generator Hugo
Eine statische Website unterscheidet sich von dynamischen Seiten dadurch, dass sie Webseiten nicht in Echtzeit generiert oder verändert. Es gibt keine Datenbank im Hintergrund, keine E-Commerce-Funktionen oder PHP. Die Webseiten sind vollständig vorgefertigt und können den Besuchern daher sehr schnell angezeigt werden.
Das bedeutet jedoch nicht, dass eine statische Seite langweilig sein muss. Sie können alle Möglichkeiten von HTML nutzen, ergänzt durch Cascading Style Sheets (CSS) und JavaScript. Auch Elemente wie Bildkarussells und animierte Hintergrundbilder lassen sich problemlos einbinden.
Der Hugo-Site-Generator verarbeitet eine Vorlage und Ihre Inhalte, um daraus eine komplette Website zu erstellen. Diese können Sie anschließend auf einer Hosting-Plattform bereitstellen und Ihre Website ist sofort online.
Hugo verwendet Markdown für die Gestaltung von Seiten und Blogbeiträgen. Markdown ist eine sehr leicht verständliche Auszeichnungssprache, was die Pflege Ihrer Website erheblich vereinfacht.
Die Konfigurationsdateien von Hugo werden entweder in TOML (Tom’s Obvious, Minimal Language) oder YAML (YAML Ain’t Markup Language) erstellt, beide ebenfalls leicht zu erlernen. Ein weiterer Vorteil ist die beeindruckende Geschwindigkeit von Hugo – manche Websites werden in weniger als einer Sekunde generiert. Es gibt eine große Auswahl an Vorlagen, und es kommen ständig neue hinzu, sodass der Einstieg sehr einfach ist. Wählen Sie einfach eine Vorlage aus und beginnen Sie mit dem Hinzufügen Ihrer eigenen Inhalte.
Hugo dient auch als kleiner Webserver direkt auf Ihrem Rechner. So können Sie Ihre Website live sehen, während Sie sie entwickeln und neue Inhalte hinzufügen. Die Seite wird bei jeder Speicherung automatisch aktualisiert, sodass Sie die Auswirkungen Ihrer Änderungen sofort im Browser betrachten können.
Webhosting für Ihre Seite
Wenn es um das Hosting Ihrer statischen Website geht, haben Sie eine große Auswahl. Viele Anbieter bieten kostenloses Hosting für private oder Open-Source-Projekte an. Alternativ können Sie auch einen der folgenden herkömmlichen Webhosting-Dienste in Betracht ziehen:
| Aerobatic |
| Amazon S3 |
| Azure |
| CloudFront |
| DreamHost |
| Firebase |
| GitHub Pages |
| GoDaddy |
| Google Cloud Storage |
| Heroku |
| GitLab Pages |
| Netlify |
| Rackspace |
| Surge |
Hugo installieren
Für die Nutzung von Hugo ist auch die Installation von Git erforderlich. Auf Fedora 32 und Manjaro 20.0.1 war Git bereits vorinstalliert. Unter Ubuntu 20.04 (Focal Fossa) wurde es als Abhängigkeit von Hugo automatisch mitinstalliert.
Um Hugo unter Ubuntu zu installieren, nutzen Sie diesen Befehl:
sudo apt-get install hugo
Für Fedora lautet der Befehl:
sudo dnf install hugo
Und für Manjaro:
sudo pacman -Syu hugo
Eine Website mit Hugo erstellen
Wenn Sie Hugo anweisen, eine neue Website zu erstellen, legt es eine Reihe von Verzeichnissen für Sie an. Diese enthalten die verschiedenen Bestandteile Ihrer Webseite. Es handelt sich dabei jedoch nicht um die finale Website, die Sie auf Ihre Hosting-Plattform hochladen werden. Vielmehr enthalten diese Verzeichnisse das Design, die Konfigurationsdateien, die Inhalte und die Bilder, die Hugo als Eingabe für die Erstellung der eigentlichen Webseite verwendet.
Es ist wie der Unterschied zwischen Quellcode und einem kompilierten Programm. Der Quellcode dient dem Compiler zur Generierung des Endprodukts. Hugo verwendet die Inhalte dieser Verzeichnisse, um eine funktionsfähige Webseite zu erstellen.
Der auszuführende Befehl erstellt ein Verzeichnis mit dem gleichen Namen wie die von Ihnen geplante Webseite. Dieses Verzeichnis wird an dem Ort erstellt, an dem Sie den Befehl ausführen.
Wechseln Sie also in das Verzeichnis, in dem Ihre Webseite angelegt werden soll. In diesem Beispiel verwenden wir unser Home-Verzeichnis und geben Folgendes ein:
hugo new site geek-demo
Dadurch wird das Verzeichnis „geek-demo“ erstellt. Um in dieses Verzeichnis zu wechseln, geben wir Folgendes ein:
cd geek-demo/
ls
Sie sehen die Konfigurationsdatei „config.toml“ und die angelegten Verzeichnisse. Diese sind jedoch noch leer, da sie nur das Grundgerüst für die Webseite bilden.
Git initialisieren und ein Design hinzufügen
Damit Hugo weiß, wie die fertige Seite aussehen soll, müssen wir ein Design (Theme) hinzufügen. Dazu müssen wir Git initialisieren. Führen Sie im Stammverzeichnis Ihrer Seite (wo sich die Datei „config.toml“ befindet) diesen Befehl aus:
git init
Es gibt hunderte von Designs zur Auswahl, die jeweils auf einer eigenen Webseite beschrieben sind. Sie können eine Demo des Designs ausprobieren und sehen, wie der Befehl zum Herunterladen lautet. Wir verwenden ein Design namens Meghna.
Um dieses Design in unsere Webseite zu integrieren, müssen wir in unseren „themes“-Ordner wechseln und den Befehl git clone ausführen:
cd themes
git clone https://github.com/themefisher/meghna-hugo.git
Git zeigt während des Vorgangs einige Meldungen an. Sobald der Vorgang abgeschlossen ist, verwenden wir ls, um das Verzeichnis mit dem Design anzuzeigen:
ls
Hugo-Designs beinhalten eine funktionierende Beispielwebseite. Sie müssen diese Standardseite in die Verzeichnisse Ihrer Webseite kopieren.
Kehren Sie zunächst zum Stammverzeichnis Ihrer Webseite zurück. Wir verwenden die Option -r (rekursiv) mit cp, um Unterverzeichnisse einzuschließen, und die Option -f (force), um eventuell vorhandene Dateien zu überschreiben:
cd ..
cp themes/meghna-hugo/exampleSite/* -rf .
Lokales Starten Ihrer Webseite
Wir haben nun genügend Vorbereitungen getroffen, um die neue Webseite lokal zu starten. Sie wird zwar noch Platzhaltertext und Bilder enthalten, dies sind aber nur kosmetische Änderungen. Wir überprüfen zunächst, ob die technischen Grundlagen funktionieren.
Wir weisen Hugo an, seinen Webserver zu starten und die Option -D (Entwurf) zu verwenden, um sicherzustellen, dass auch Dateien mit dem Status „Entwurf“ in die Webseite einbezogen werden:
hugo server -D
Das Bild unten zeigt die Ausgabe unseres Hugo-Befehls.
Hugo hat die Seite in 142 Millisekunden erstellt (wir hatten ja gesagt, dass es schnell ist, oder?). Außerdem werden Sie aufgefordert, Strg+C zu drücken, um den Server zu stoppen, aber lassen Sie ihn vorerst laufen.
Öffnen Sie nun Ihren Browser und gehen Sie zu localhost:1313, um Ihre Webseite zu sehen.
Ändern der Standardinhalte der Seite
Während die Seite läuft, bezieht Hugo die Webseiten aus dem Arbeitsspeicher. Die Webseite wurde noch nicht auf der Festplatte erstellt, sondern existiert als Arbeitskopie im RAM. Hugo überwacht aber die Dateien und Bilder auf der Festplatte. Wird eine dieser Dateien verändert, aktualisiert Hugo die Seite in Ihrem Browser – Sie müssen nicht einmal Strg+F5 drücken.
Öffnen Sie ein weiteres Terminalfenster und navigieren Sie zum Stammverzeichnis Ihrer Webseite. Öffnen Sie die Datei „config.toml“ in einem Editor. Ändern Sie die „baseURL“ in die Domäne, unter der Ihre Seite gehostet wird, und ändern Sie den „Titel“ in den Namen Ihrer Seite. Speichern Sie Ihre Änderungen, lassen Sie den Editor aber offen.
Hugo erkennt die Änderungen in der Datei „config.toml“, liest diese ein, erstellt die Seite neu und aktualisiert den Browser.
Sie sollten nun den Namen, den Sie für Ihre Seite gewählt haben, im Browser-Tab sehen. Die sofortige visuelle Rückmeldung zu gespeicherten Änderungen beschleunigt die Anpassung einer Webseite erheblich.
Alle Designs sind unterschiedlich, aber wir fanden, dass das verwendete Theme recht leicht zu verstehen war. Die verschiedenen Abschnitte der Seite sowie die Einstellungen innerhalb dieser Abschnitte haben eindeutige Namen, sodass immer klar ist, was Sie gerade verändern.
Auch hier gilt: Sobald Sie eine Änderung speichern, sehen Sie das Ergebnis im Browser. Wenn es Ihnen nicht gefällt, machen Sie die Änderung einfach rückgängig und speichern Sie erneut.
Die verschiedenen Konfigurationsdateien zur Steuerung der Webseite haben jeweils eine eigene Funktion und sind sinnvoll benannt. Sie sind leicht zu finden, da es im Verzeichnis nicht allzu viele Orte gibt, an denen sie sich befinden können. In der Regel befinden sie sich im Ordner „Data“.
Da wir eine zweisprachige Vorlage verwenden, befinden sich unsere englischen Konfigurationsdateien im Unterverzeichnis „En“.
Wenn Sie die Datei Data > En > banner.yml in einem Editor öffnen, sehen Sie die Einstellungen, die den Bannerbereich der Seite steuern.
Durch Ändern der Einstellungen „Titel“ und „Inhalt“ ändern Sie den Text auf der Bannerseite.
Wir haben außerdem die Einstellung „Beschriftung“ geändert, sodass der Schaltflächentext nun „Weitere Informationen“ lautet. Auf Ihrer eigenen Seite möchten Sie wahrscheinlich auch das Bild austauschen.
Sobald Sie Ihre Änderungen speichern, werden sie in Ihrem Browser angezeigt.
Anpassen weiterer Seitenelemente
Alle anderen Elemente lassen sich auf ähnliche Weise ändern. Suchen Sie einfach die entsprechende Konfigurationsdatei und passen Sie die Einstellungen und den Text Ihren Wünschen an.
Sie werden auch die Bilder austauschen wollen. Das Standardbild wird in der Konfigurationsdatei referenziert. Sie können das Originalbild leicht finden und sich die Abmessungen ansehen.
Die Bilder befinden sich im Verzeichnis „Static > Images“ mit Unterverzeichnissen für die verschiedenen Bereiche der Webseite. Favicons und Logos sollten Sie direkt im Verzeichnis „Static > Images“ ablegen.
Neue Blog-Inhalte hinzufügen
Bisher haben wir uns damit beschäftigt, vorhandene Inhalte zu verändern. Aber wie fügen wir einen neuen Blogbeitrag hinzu? Hugo verwendet ein Konzept namens „Archetypen“, um neue Inhalte zu erstellen. Wenn wir keinen Archetyp für unsere Blogbeiträge definieren, wird bei jeder Aufforderung zur Erstellung eines neuen Blogeintrags eine Standarddatei erstellt.
Das ist zwar akzeptabel, aber mit einem Archetyp können wir uns einigen Aufwand sparen und sicherstellen, dass die wichtigsten Frontend-Elemente im Voraus definiert werden.
In diesem Theme befinden sich die Blogeinträge unter content > english > blog. Wenn wir einen bestehenden Blogbeitrag in einem Editor öffnen, z.B. „simple-blog-post-1.md“, können wir die wichtigsten Einstellungen sehen.
Wir müssen diesen Abschnitt kopieren, die aktuellen Einträge anpassen, damit er als Archetypvorlage verwendet werden kann, und ihn dann im Ordner „archetypes“ speichern. Wenn wir ihn „blog.md“ nennen, wird er automatisch als Vorlage für neue Blogeinträge verwendet.
Mit Gedit gehen wir wie folgt vor:
gedit content/english/blog/simple-blog-post-1.md
Markieren Sie den oberen Abschnitt einschließlich der beiden gestrichelten Linien und kopieren Sie ihn mit Strg+C. Mit Strg+N starten Sie eine neue Datei und fügen dann den kopierten Inhalt mit Strg+V ein.
Nehmen Sie nun die folgenden Änderungen vor und fügen Sie in jeder Zeile nach dem Doppelpunkt (:) ein Leerzeichen ein:
Titel: Ändern Sie dies in „{{ replace .Name „-“ “ “ | title }}“ (einschließlich Anführungszeichen). Jeder neue Blogbeitrag erhält automatisch einen Titel. Er wird aus dem Dateinamen generiert, den Sie an den Befehl hugo new übergeben, wie wir noch sehen werden.
Datum: Ändern Sie dies in {{ .Date }}. Das Datum und die Uhrzeit der Erstellung des Blogs werden automatisch eingetragen.
Image_webp: Dies ist der Pfad zum Header-Bild des Blogs im WebP-Format. Falls das Theme kein Bild im WebP-Format findet, wird das Bild aus der nächsten Zeile verwendet.
image: Dies ist der Pfad zum Header-Bild des Blogs im JPEG-Format. Sie können diese auch auf die Standardbilder verweisen lassen. Dann haben alle Blogbeiträge ein Platzhalterbild, noch bevor Sie ein eigenes Bild finden, anpassen oder speichern. Sobald Sie das erledigt haben, können Sie den Dateinamen an Ihr benutzerdefiniertes Bild anpassen.
Autor: Ändern Sie dies in Ihren Namen.
Beschreibung: Hier geben Sie eine kurze Beschreibung zu jedem Beitrag ein. Wenn Sie dies in einen leeren String („“) ändern, können Sie für jeden neuen Blog eine Beschreibung eingeben, ohne den alten Text bearbeiten zu müssen.
Speichern Sie diese neue Datei als „archetypes/blog.md“ und schließen Sie Gedit. Hugo verwendet diesen neuen Archetyp nun immer, wenn Sie einen neuen Blogbeitrag erstellen möchten.
Beachten Sie, dass unsere Datei die Erweiterung „.md“ haben sollte, da wir Markdown zum Schreiben unseres Blogbeitrags verwenden:
hugo new blog/first-new-blog-post-on-this-site.md
Nun öffnen wir unseren neuen Blogbeitrag in einem Editor:
gedit content/english/blog/first-new-blog-post-on-this-site.md
Unser neuer Blogbeitrag wird in Gedit geöffnet.
Die folgenden Abschnitte des Frontmatters wurden automatisch hinzugefügt:
Titel: Dieser wurde aus dem Dateinamen abgeleitet. Sie können ihn hier bearbeiten, falls er optimiert werden muss.
Uhrzeit und Datum: Diese werden automatisch hinzugefügt.
Standardbild: Hier sollten Sie ein passendes, lizenzfreies Bild finden. Speichern Sie es unter Static > Images > Blog. Sie müssen hier den exakten Dateinamen des Bildes eingeben.
Autor: Ihr Name wird automatisch hinzugefügt.
Beschreibung: Diese wurde bereits bearbeitet.
Schreiben Sie den Blog mit Markdown, und verwenden Sie die übliche Auszeichnung für Überschriften, Fettdruck, Kursivschrift, Bilder, Links usw. Bei jeder Speicherung der Datei erstellt Hugo die Webseite neu und aktualisiert sie in Ihrem Browser.
Das folgende Bild zeigt, wie unser neuer Blogbeitrag auf der Startseite erscheint.
Das Bild unten zeigt, wie der neue Blogbeitrag auf einer eigenen Seite aussieht.
Nachdem Sie Ihren Blogbeitrag geschrieben haben, speichern Sie die Änderungen und schließen Sie den Editor. Sie können auch den Browser schließen, da wir den Hugo-Server gleich stoppen werden.
Drücken Sie im Terminalfenster, in dem der Hugo-Server läuft, Strg+C.
Die Webseite erstellen
Geben Sie im Stammverzeichnis Ihrer Webseite den folgenden Befehl ein, um die Webseite zu erstellen:
hugo
Hugo generiert die Webseite und listet die Anzahl der erstellten Seiten und anderer Komponenten auf. Die Erstellung unserer Seite hat 134 Millisekunden gedauert.
Hugo erstellt ein neues Verzeichnis namens „public“ im Stammverzeichnis Ihrer Webseite. Im Verzeichnis „public“ befinden sich alle Dateien, die Sie für den Upload auf Ihre Hosting-Plattform benötigen.
Beachten Sie, dass Sie die Dateien und Verzeichnisse im Verzeichnis „public“ auf Ihre Hosting-Plattform hochladen müssen, nicht das Verzeichnis „public“ selbst.
Jetzt kennen Sie die Grundlagen
Jedes Theme erfordert ein wenig Einarbeitung, um zu verstehen, wie man es an seine eigenen Bedürfnisse anpasst, aber genau das macht ja auch den Spaß aus! Da Hugo Änderungen sofort im Browserfenster darstellen kann, wird nichts zu lange dauern.
Wahrscheinlich werden Sie feststellen, dass das Schreiben Ihrer Texte und das Suchen und Anpassen von Bildern die zeitaufwändigsten Aufgaben sind.
Die Hugo-Dokumentationsseite ist ebenfalls sehr hilfreich, wenn auch sehr umfangreich. Wir hoffen, diese grundlegende Anleitung hilft Ihnen beim Einstieg.
Wenn Sie Git verwenden und Github, GitLab oder Bitbucket, gibt es auch Integrationen für diese Plattformen. Diese überwachen Ihr entferntes Hugo-Repository und erstellen Ihre Live-Seite neu, sobald Sie Änderungen per Push übertragen.