Statische Websites sind einfach zu erstellen und rasend schnell zu verwenden. Wenn Sie den Umgang mit Hugo lernen, können Sie themenbasierte statische Websites unter Linux erstellen. Webseiten erstellen macht wieder Spaß!
Inhaltsverzeichnis
Der Hugo Website-Generator
Eine statische Site ist eine Site, die Webseiten nicht im Handumdrehen erstellt oder ändert. Es gibt keine Hintergrunddatenbank, keine E-Commerce-Verarbeitung oder PHP. Alle Webseiten sind vollständig vorgefertigt und können den Besuchern sehr schnell bereitgestellt werden.
Aber das bedeutet nicht, dass eine statische Site langweilig sein muss. Sie können alles verwenden, was HTML bietet, plus Cascading Style Sheets (CSS) und JavaScript. Sie können auch problemlos Dinge wie Bildkarussells und Webseiten über Hintergrundbilder gleiten lassen.
Der Hugo-Site-Generator arbeitet mit einer Vorlage und allen Inhalten, die Sie erstellt haben, um eine fertige Website zu generieren. Sie können es dann auf einer Hosting-Plattform platzieren und haben sofort eine Live-Website.
Hugo verwendet Abschlag für die von Ihnen erstellten Seiten und Blogeinträge. Markdown ist so ziemlich die einfachste Markup-Sprache, die es gibt, was die Wartung Ihrer Website vereinfacht.
Die Konfigurationsdateien von Hugo sind in Toms offensichtliche, minimalistische Sprache (TOML) und YAML ist keine Markup-Sprache (YAML), die genauso einfach sind. Ein weiterer Bonus ist, dass Hugo unglaublich schnell ist – einige Websites werden in weniger als einer Sekunde geladen. Es gibt viele Vorlagen, aus denen Sie auswählen können, und es werden ständig weitere hinzugefügt, sodass der Einstieg ganz einfach ist. Wählen Sie einfach eine Vorlage aus und fügen Sie Inhalte hinzu, die Ihnen zu eigen sind.
Hugo fungiert auch als kleiner Webserver direkt auf Ihrem Computer. Sie können eine Live-Version Ihrer Website sehen, während Sie sie entwerfen und erstellen und wenn Sie einen neuen Beitrag hinzufügen. Es wird auch jedes Mal automatisch aktualisiert, wenn Sie im Editor „Speichern“ machen, sodass Sie die Auswirkungen Ihrer Änderungen sofort in Ihrem Browser sehen können.
Hosten Ihrer Site
Wenn es um das Hosten Ihrer statischen Website geht, haben Sie die Qual der Wahl. Die meisten Unternehmen kostenloses Hosting anbieten für den persönlichen oder Open-Source-Gebrauch. Natürlich können Sie auch ein normales Webhosting-Unternehmen wie eines der folgenden auswählen:
Kunstflug
Amazon S3
Azurblau
CloudFront
DreamHost
Feuerbasis
GitHub-Seiten
Los Papa
Google Cloud-Speicher
Heroku
GitLab-Seiten
Netlify
Rackspace
Anstieg
Hugo installieren
Zusammen mit Hugo muss Git installiert sein. Git war bereits auf Fedora 32 und Manjaro 20.0.1 installiert. Unter Ubuntu 20.04 (Focal Fossa) wurde es automatisch als abhängig von Hugo hinzugefügt.
Um Hugo unter Ubuntu zu installieren, verwenden Sie diesen Befehl:
sudo apt-get install hugo
Auf Fedora müssen Sie Folgendes eingeben:
sudo dnf install hugo
Der Befehl für Manjaro lautet:
sudo pacman -Syu hugo
Erstellen einer Website mit Hugo
Wenn wir Hugo bitten, eine neue Site zu erstellen, erstellt es eine Reihe von Verzeichnissen für uns. Diese enthalten die verschiedenen Elemente unserer Website. Dies ist jedoch nicht die endgültige Website, die auf Ihre Hosting-Plattform hochgeladen wird. Diese Verzeichnisse enthalten das Thema, die Konfigurationsdateien, den Inhalt und die Bilder, die Hugo als Eingabe verwendet, wenn wir es bitten, die eigentliche Website zu erstellen.
Es ist wie der Unterschied zwischen Quellcode und einem kompilierten Programm. Der Quellcode ist das Zeug, das der Compiler verwendet, um das Endprodukt zu generieren. Ebenso nimmt Hugo den Inhalt dieser Verzeichnisse und erstellt eine funktionierende Website.
Der Befehl, den wir ausführen werden, erstellt ein Verzeichnis mit demselben Namen wie die Site, die Sie erstellen möchten. Dieses Verzeichnis wird in dem Verzeichnis erstellt, in dem Sie den Befehl ausführen.
Wechseln Sie also in das Verzeichnis, in dem Ihre Website erstellt werden soll. Wir verwenden unser Home-Verzeichnis, also geben wir Folgendes ein:
hugo new site geek-demo
Dadurch wird ein „geek-demo“-Verzeichnis erstellt. Wir geben Folgendes ein, um in dieses Verzeichnis zu wechseln und ls auszuführen:
cd geek-demo/
ls
Wir sehen die Konfigurationsdatei „config.toml“ und die erstellten Verzeichnisse. Diese sind jedoch praktisch leer, da dies nur das Gerüst für die Website ist.
Initialisieren von Git und Hinzufügen eines Themes
Wir müssen ein Thema hinzufügen, damit Hugo weiß, wie die fertige Site aussehen soll. Dazu müssen wir Git initialisieren. Führen Sie im Stammordner Ihrer Site (der die Datei „config.toml“ enthält) diesen Befehl aus:
git init
Es gibt Hunderte von Themen Sie können aus wählen, und jeder hat eine Webseite, die ihn beschreibt. Sie können eine Demo eines Themas ausführen und herausfinden, wie der Befehl zum Herunterladen lautet. Wir verwenden einer namens Meghna.
Um dieses Thema in unsere Website zu integrieren, müssen wir in unseren Ordner „Themes“ wechseln und den Befehl git clone ausführen:
cd themes
git clone https://github.com/themefisher/meghna-hugo.git
Git zeigt im Verlauf einige Meldungen an. Wenn es fertig ist, verwenden wir ls, um das Verzeichnis anzuzeigen, das das Thema enthält:
ls
Zu den Hugo-Themen gehört eine funktionierende Beispiel-Website. Sie müssen diese Standard-Site in die Verzeichnisse Ihrer Website kopieren.
Kehren Sie zunächst zum Stammverzeichnis Ihrer Website zurück. Wir verwenden die Option -r (rekursiv) cp, um Unterverzeichnisse einzuschließen, und die Option -f (force), um alle vorhandenen Dateien zu überschreiben:
cd ..
cp themes/meghna-hugo/exampleSite/* -rf .
Lokales Starten Ihrer Site
Wir haben genug getan, um eine neue Website lokal zu starten. Es enthält weiterhin den Platzhaltertext und die Bilder, aber das sind nur kosmetische Änderungen. Lassen Sie uns zuerst überprüfen, ob die technischen Bits funktionieren.
Wir weisen Hugo an, seinen Webserver zu betreiben und die Option -D (Entwurf) zu verwenden, um sicherzustellen, dass alle Dateien, die möglicherweise mit „Entwurf“ gekennzeichnet sind, in die Website aufgenommen werden:
hugo server -D
Das Bild unten zeigt die Ausgabe unseres hugo-Befehls.
Uns wurde gesagt, dass Hugo die Site in 142 Millisekunden erstellt hat (wir sagten, es sei schnell, oder?). Es sagt uns auch, dass wir Strg+C drücken sollen, um den Server zu stoppen, ihn aber vorerst laufen zu lassen.
Öffnen Sie Ihren Browser und gehen Sie zu localhost:1313, um Ihre Website anzuzeigen.
Ändern des Standard-Site-Inhalts
Während es so läuft, bedient Hugo die Webseiten aus dem Gedächtnis. Es hat nicht die Website auf der Festplatte erstellt, sondern eine Arbeitskopie im RAM. Es überwacht jedoch die Dateien und Bilder auf der Festplatte. Wenn einer von ihnen geändert wird, aktualisiert es die Site in Ihrem Browser – Sie müssen nicht einmal Strg+F5 drücken.
Öffnen Sie ein weiteres Terminalfenster und navigieren Sie zum Stammverzeichnis Ihrer Website. Öffnen Sie die Datei „config.toml“ in einem Editor. Ändern Sie die „baseURL“ in die Domain, auf der Ihre Website gehostet wird, und ändern Sie den „Titel“ in den Namen Ihrer Website. Speichern Sie Ihre Änderungen, aber lassen Sie den Editor geöffnet.
Hugo erkennt, dass Änderungen an der Datei „config.toml“ vorgenommen wurden, liest diese, baut die Site neu auf und aktualisiert den Browser.
Sie sollten nun den Namen, den Sie für Ihre Site gewählt haben, im Browser-Tab sehen. Das sofortige visuelle Feedback zu gespeicherten Änderungen beschleunigt den Anpassungsprozess einer Website erheblich.
Alle Themen sind unterschiedlich, aber wir fanden, dass die, die wir früher hatten, recht einfach zu befolgen waren. Die verschiedenen Abschnitte der Website haben ebenso wie die Einstellungen in den einzelnen Abschnitten eindeutige Namen, sodass immer offensichtlich ist, was Sie ändern.
Und auch hier: Sobald Sie eine Änderung speichern, sehen Sie, was Sie in Ihrem Browser geändert haben. Wenn es Ihnen nicht gefällt, machen Sie die Änderung einfach rückgängig und speichern Sie es erneut.
Die verschiedenen Konfigurationsdateien, die die Website steuern, sind jeweils einem einzelnen Job gewidmet und sinnvoll beschriftet. Sie aufzuspüren ist nicht schwer, da es nicht allzu viele Orte im Verzeichnis gibt, an denen sie sich befinden können. Normalerweise 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 Sammlung von Einstellungen, die den Bannerbereich der Website regeln.
Wenn Sie die Einstellungen „Titel“ und „Inhalt“ ändern, ändern Sie den Text auf der Bannerseite.
Wir haben auch die Einstellung „Beschriftung“ geändert, sodass der Schaltflächentext „Weitere Informationen“ lautet. Für Ihre Site möchten Sie wahrscheinlich auch das Bild ändern.
Sobald Sie Ihre Änderungen speichern, werden sie in Ihrem Browser angezeigt.
Ändern anderer Elemente einer Website
Alle anderen Elemente können Sie auf ähnliche Weise ändern. Suchen Sie einfach die entsprechende Konfigurationsdatei aus und ändern Sie die Einstellungen und den Text nach Ihren Wünschen.
Sie möchten auch die Bilder ändern. Das Standardbild wird in der Konfigurationsdatei referenziert. Sie können das Originalbild leicht finden und ansehen, um seine Abmessungen zu sehen.
Bilder werden im Verzeichnis „Static > Images“ mit Unterverzeichnissen für die verschiedenen Bereiche der Website abgelegt. Platzieren Sie alle Favicons und Logos direkt im Verzeichnis „Static > Images“.
Hinzufügen neuer Blog-Inhalte
Bisher haben wir uns damit beschäftigt, das zu ändern, was bereits vorhanden ist. 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 Blogeinträge erstellen, wird jedes Mal eine Standarddatei für uns erstellt, wenn wir Hugo bitten, einen neuen Blogeintrag zu erstellen.
Das ist in Ordnung, aber mit einem Archetyp können wir uns einiges an Aufwand ersparen und dafür sorgen, dass so viel wie möglich von der Frontsache im Voraus für uns erfasst wird.
In diesem Thema befinden sich Blogeinträge unter Inhalt > Englisch > Blog. Wenn wir einen bestehenden Blogeintrag in einem Editor öffnen – wie „simple-blog-post-1.md“ – können wir die Hauptsache sehen.
Wir müssen diesen Abschnitt kopieren, die aktuellen Einträge bearbeiten, damit er als Archetypvorlage verwendet werden kann, und ihn dann im Ordner „Archetypen“ speichern. Wenn wir es „blog.md“ nennen, wird es automatisch als Vorlage für neue Blogeinträge verwendet.
In gedit können wir dies wie folgt tun:
gedit content/english/blog/simple-blog-post-1.md
Markieren Sie den oberen Abschnitt einschließlich der beiden gestrichelten Linien und drücken Sie dann Strg+C, um ihn zu kopieren. Drücken Sie Strg+N, um eine neue Datei zu starten, und dann Strg+V, um das kopierte einzufügen.
Nehmen Sie nun die folgenden Änderungen vor und lassen Sie in jeder Zeile nach dem Doppelpunkt (:) ein Leerzeichen:
Titel: Ändere dies in „{{ replace .Name „-“ “ ” | title }}“ (einschließlich Anführungszeichen). Für jeden neuen Blogbeitrag wird automatisch ein Titel eingefügt. Es wird aus dem Dateinamen gebildet, den Sie an den Befehl hugo new übergeben, wie wir sehen werden.
Datum: Ändern Sie dies in {{ .Datum }}. Datum und Uhrzeit der Erstellung des Blogs werden automatisch eingetragen.
Image_webp: Dies ist der Pfad zum Header-Image des Blogs im Webp-Format. Wenn das Thema keines findet, wird das Bild aus der nächsten Zeile verwendet.
image: Dies ist der Pfad zum Header-Image des Blogs im JPEG-Format. Sie können diese auch so belassen, dass sie auf die Standardbilder verweisen. Dann haben alle Blog-Posts ein Notbild, noch bevor Sie ein benutzerdefiniertes Bild finden, die Größe ändern oder speichern. Sobald Sie dies getan haben, können Sie den Dateinamen einfach bearbeiten, damit er dem Ihres benutzerdefinierten Bildes entspricht.
Autor: Ändern Sie dies in Ihren Namen.
Beschreibung: Sie geben hier eine kurze Beschreibung zu jedem Beitrag ein. Wenn Sie dies in eine leere Zeichenfolge („“) ä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 jetzt immer dann, wenn Sie einen neuen Blogeintrag erstellen möchten.
Beachten Sie, dass unsere Datei die Erweiterung „.md“ haben sollte, da wir Markdown verwenden, um unseren Blogeintrag zu schreiben:
hugo new blog/first-new-blog-post-on-this-site.md
Nun wollen wir unseren neuen Blogeintrag in einem Editor öffnen:
gedit content/english/blog/first-new-blog-post-on-this-site.md
Unser neuer Blogbeitrag öffnet sich in gedit.
Alle der folgenden Stücke der Titelseite wurden für uns hinzugefügt:
Titel: Dies wurde aus dem Dateinamen abgeleitet. Wenn es Optimierungsbedarf hat, können Sie es hier bearbeiten.
Uhrzeit und Datum: Diese werden automatisch hinzugefügt.
Standardbild: Sie möchten wahrscheinlich ein relevantes, lizenzfreies Bild finden. Legen Sie es unter Statisch > Bilder > Blog ab. Sie müssen hier den tatsächlichen Dateinamen des Bildes eingeben.
Autor: Ihr Name wird automatisch hinzugefügt.
Beschreibung: Dies wurde bearbeitet.
Schreiben Sie den Blog mit Markdown und verwenden Sie das Standard-Markup für Überschriften, Fettdruck, Kursivschrift, Bilder, Links usw. Jedes Mal, wenn Sie Ihre Datei speichern, baut Hugo die Website neu auf und aktualisiert sie in Ihrem Browser.
Das Bild unten zeigt, wie unser neuer Blog-Eintrag auf der Startseite erscheint.
Das Bild unten zeigt, wie der neue Blogeintrag auf einer eigenen Seite aussieht.
Nachdem Sie Ihren Blogbeitrag geschrieben haben, speichern Sie die Änderungen und schließen Sie dann den Editor. Sie können auch Ihren Browser schließen, da wir den Hugo-Server stoppen werden.
Drücken Sie im Terminalfenster, in dem der Hugo-Server läuft, Strg+C.
Aufbau der Website
Geben Sie im Stammverzeichnis Ihrer Website den folgenden Befehl ein, um Ihre Website zu erstellen:
hugo
Hugo erstellt die Website und listet die Anzahl der Seiten und anderer Komponenten auf, die er erstellt hat. Es dauerte 134 Millisekunden, um unsere zu erstellen.
Hugo erstellt im Stammverzeichnis Ihrer Website ein neues Verzeichnis namens „Public“. Im Verzeichnis „Public“ finden Sie alle Dateien, die Sie zum Übertragen auf Ihre Hosting-Plattform benötigen.
Beachten Sie, dass Sie die Dateien und Verzeichnisse im Verzeichnis „Öffentlich“ auf Ihre Hosting-Plattform hochladen müssen, nicht in das Verzeichnis „Öffentlich“.
Jetzt kennen Sie die Grundlagen
Jedes Thema erfordert ein wenig Erkundung, um herauszufinden, wie Sie es so aussehen lassen können, wie Sie es möchten, aber das ist der lustige Teil! Angesichts der Fähigkeit von Hugo, Änderungen sofort in einem Browserfenster zu rendern, dauert nichts zu lange.
Sie werden wahrscheinlich feststellen, dass das Schreiben Ihres Textes und das Suchen und Zuschneiden von Bildern die Teile des Prozesses sind, die am längsten dauern.
Der Hugo Dokumentationsseite ist auch hilfreich, aber umfangreich. Hoffentlich reicht diese grundlegende Anleitung für den Einstieg aus.
Wenn Sie Git verwenden und Github, GitLab, oder Bit Bucket, gibt es auch Integrationen für diese Plattformen. Sie überwachen Ihr entferntes Hugo-Repository und bauen Ihre Live-Site neu auf, wenn Sie Änderungen daran per Push übertragen.