Installieren und Verwenden von Hugo, einem statischen Site-Generator, unter Ubuntu 14.04

Einführung

Hugo ist ein schneller und einfach zu verwendender statischer Site-Generator, der in Go geschrieben und auf mehreren Plattformen verfügbar ist. Statische Site-Generatoren eignen sich hervorragend für Blogs und andere Inhalte, für die keine dynamischen Inhalte aus einer Datenbank abgerufen werden müssen. Mit Optionen wie Hugo können Sie Ihren Stapel vereinfachen, benutzerfreundliche Markierungen erstellen und Aktualisierungen und benutzerdefinierte Inhalte verwalten, ohne eine umfassende Content-Management-Lösung zu benötigen.

In diesem Handbuch erfahren Sie, wie Sie Hugo auf einem Ubuntu 14.04-Server installieren und verwenden. Auf diese Weise können wir eine statische Site konfigurieren, Inhalte erstellen und auf demselben Server veröffentlichen oder an einem Produktionsstandort bereitstellen.

Voraussetzungen

Um dieser Anleitung folgen zu können, benötigen Sie Zugriff auf einen Ubuntu 14.04-Server. Auf diesem Server muss ein Nicht-Root-Benutzer mitsudo-Berechtigungen konfiguriert sein, um Verwaltungsaufgaben ausführen zu können. Sie können herausfinden, wie Sie einensudo-Benutzer erstellen, indem Sie unserenUbuntu 14.04 initial server setup guide folgen.

Installieren der neuesten Version von Hugo

Hugo ist in Ubuntus Standard-Repositorys nicht verfügbar. Auf GitHub sind jedoch Pakete für verschiedene Architekturen und Distributionen verfügbar.

Finden Sie Ihre Systemarchitektur

Bevor wir beginnen, sollten wir die Architektur unserer Ubuntu-Maschine überprüfen, damit wir sicher sein können, das richtige Paket herunterzuladen. Geben Sie auf Ihrem Server Folgendes ein:

uname -i

Wenn Sie Folgendes sehen, führen Sie eine64-bit-Installation von Ubuntu aus:

Outputx86_64

Wenn Ihre Ausgabe stattdessen so aussieht, bedeutet dies, dass Sie mit der32-bit-Version von Ubuntu arbeiten:

Outputi686

Wir werden diese Informationen weiter unten verwenden.

Laden Sie das Hugo-Paket herunter und installieren Sie es

Besuchen Sie dieHugo releases page, um die neueste Version von Hugo zu finden (diejenige, die der Spitze am nächsten liegt). Wenn Sie über den Ankündigungstext der Funktion nach unten scrollen, sollten Sie einen Abschnitt mit dem Namen "Downloads" finden.

Als nächstes müssen wir den Link-Speicherort für das entsprechende Installationspaket kopieren. Das richtige Paket hängt von der oben gefundenen Serverarchitektur ab.

Wenn Sie sich in einem64-bit version of Ubuntubefinden, klicken Sie mit der rechten Maustaste auf den Link, der mitamd64.debendet, und kopieren Sie den Linkspeicherort.
Wenn Sie sich in einem32-bit version of Ubuntubefinden, klicken Sie mit der rechten Maustaste auf den Link, der miti386.debendet, und kopieren Sie den Linkspeicherort.

Wechseln Sie auf Ihrem Server, der als Benutzer mit den Berechtigungensudoangemeldet ist, in ein Verzeichnis, in das Sie Schreibberechtigung haben. Verwenden Sie den Befehlwget und fügen Sie den Linkspeicherort ein, den Sie zum Herunterladen von Hugo kopiert haben:

cd ~
wget https://github.com/spf13/hugo/releases/download/v0.14/hugo_0.14_amd64.deb

Jetzt können Sie das Paket mitdpkg installieren, indem Sie Folgendes eingeben:

sudo dpkg -i hugo*.deb

Testen Sie, ob die Installation erfolgreich war, indem Sie Hugo bitten, die Softwareversion auszudrucken:

hugo version

Hugo sollte seine aktuelle Softwareversion ausdrucken:

OutputHugo Static Site Generator v0.14 BuildDate: 2015-05-25T21:29:16-04:00

Installieren der unterstützenden Hugo-Software

Die Hauptanwendung von Hugo sollte nun installiert sein. Es gibt jedoch einige zusätzliche Softwareteile, die wir installieren sollten, um den Betrieb zu erleichtern.

Installieren Sie die Hugo-Themes

Das Hauptpaket von Hugo enthält keine Themen. Hugo-Themen definieren, wie der eigentliche Website-Inhalt für Benutzer gerendert wird. Der einfachste Weg, um Hugo-Themen abzurufen, besteht darin, das Repository von Hugo-Themengitzu klonen, das viele vorkonfigurierte Themen enthält. Für diesen Prozess müssen wirgit installieren.

Wir könnengit in den Standard-Repositorys von Ubuntu finden. Aktualisieren Sie den lokalen Paketindex und installieren Siegit, indem Sie Folgendes eingeben:

sudo apt-get update
sudo apt-get install git

Als nächstes können wir das Hugo-Themes-Repository klonen. Das Repository auf GitHub ist so organisiert, dass jedes einzelne Thema als Submodul enthalten ist.

Da Submodule die Versionskontrolle für den eigentlichen Inhalt unserer Site erheblich erschweren würden, werden wir die Themes nur in unser Home-Verzeichnis klonen. Wir können dann einen symbolischen Link zu den Themen in unserem Site-Verzeichnis erstellen. Auf diese Weise können wir auch das Themenverzeichnis problemlos freigeben, wenn wir über mehrere Websites verfügen.

Klonen Sie das Themes-Repository in Ihr Home-Verzeichnis, indem Sie Folgendes eingeben:

git clone --recursive https://github.com/spf13/hugoThemes ~/themes

Installieren Sie den Pygments Syntax Highlighter

Wir werden auch eine Python-Software namens Pygments installieren. Dadurch wird eine serverseitige Syntaxhervorhebungslogik für alle Codeblöcke bereitgestellt, die auf unseren gerenderten Seiten enthalten wären. Mitpip, dem Paketmanager von Python, können wir Pylements problemlos installieren.

Wir könnenpip aus den Standard-Repositorys abrufen, indem wir Folgendes eingeben:

sudo apt-get install python-pip

Sobaldapt beendet ist, können wirpip verwenden, umPygments zu installieren, indem wir Folgendes eingeben:

sudo pip install Pygments

Auf diese Weise können wir syntaktisch hervorgehobene Codeblöcke, die mehr als 300 Sprachen unterstützen, in unseren Beitragsinhalt aufnehmen, wenn wir dies wünschen. Weitere Informationen zuproject’s pagefinden Sie hier.

Aktiviere die automatische Vervollständigung von Hugo Bash

Eine letzte Sache, die wir tun werden, bevor wir mit der Arbeit an unserer ersten Site beginnen, ist die Generierung der Autocomplete-Funktionen von Hugobash. Wir können dies tun, indem wir Folgendes eingeben:

sudo hugo gen autocomplete

Anschließend können wir die systemweite Vervollständigungskonfiguration bereitstellen, sodass unsere aktuelle Shell die Auto-Vervollständigungsfunktionen verwenden kann, ohne sich abzumelden und wieder anzumelden:

. /etc/bash_completion

Wenn Sie nunhugo eingeben und anschließend ein paar Mal auf die TAB-Taste tippen, werden die Befehle angezeigt, die Hugo kennt:

hugo [TAB][TAB][TAB]

Outputbenchmark        config           gen  help             new              undraft
check            convert          gendoc           list             server           version

Erstellen Sie Ihre erste Site

Jetzt, da wir alle eingerichtet sind, können wir unsere erste Hugo-Site erstellen. Hugo verfügt über einen Generator, mit dem ein Gerüst der Dateien und Verzeichnisse erstellt werden kann, die für die Funktion benötigt werden.

Wir können eine neue Site in Ihrem Home-Verzeichnis erstellen, indem wir Folgendes eingeben:

hugo new site ~/my-website

Wechseln Sie zu Ihrer neuen Hugo-Site und sehen Sie sich um:

cd ~/my-website
ls -F

Sie sehen die Verzeichnisstruktur und die primäre Konfigurationsdatei, die zum Erstellen der Hugo-Site verwendet wurden:

Outputarchetypes/  config.toml  content/  data/  layouts/  public/  static/

Lassen Sie uns fortfahren und das~/themes-Verzeichnis verknüpfen, das wir in unsere neue Site geklont haben. Um diesen Link für eine mögliche Bereitstellung flexibler zu gestalten, erstellen wir einen relativen symbolischen Link. Wenn Sie Ihr Hugo-Repository auf einem Remote-Server bereitstellen, müssen Sie nur sicherstellen, dass Sie das Themes-Verzeichnis erneut in das übergeordnete Hugo-Verzeichnis klonen:

ln -s ../themes .
ls -l

Outputtotal 28
drwxrwxr-x  2 demouser demouser 4096 Nov  5 11:25 archetypes
-rw-rw-r--  1 demouser demouser  210 Nov  5 11:55 config.toml
drwxrwxr-x  3 demouser demouser 4096 Nov  5 11:38 content
drwxrwxr-x  2 demouser demouser 4096 Nov  5 11:25 data
drwxrwxr-x  2 demouser demouser 4096 Nov  5 11:25 layouts
drwxrwxr-x 13 demouser demouser 4096 Nov  5 11:25 public
drwxrwxr-x  2 demouser demouser 4096 Nov  5 11:25 static
lrwxrwxrwx  1 demouser demouser    9 Nov  5 14:21 themes -> ../themes

Wie Sie oben sehen können, ist das Themes-Verzeichnis in unserem aktuellen Verzeichnis nur ein Link zu dem Themes-Repository, das wir in unser Home-Verzeichnis geklont haben.

Festschreiben Ihrer Site zur Quellcodeverwaltung

Bevor wir unsere Einstellungen konfigurieren und Inhalte erstellen, sollten wir unsere neue Site in ein Git-Repository umwandeln.

Stellen Sie sicher, dass Sie sich in Ihrem Site-Verzeichnis befinden, und initialisieren Sie das Repository eines neuenget, indem Sie Folgendes eingeben:

cd ~/my-website
git init

OutputInitialized empty Git repository in /home/demouser/my-website/.git/

Richten Sie als Nächstes die grundlegenden Konfigurationselemente vongitein, die zum Festschreiben von Code in ein Repository erforderlich sind. Der einfachste Weg, dies zu tun, ist mit dem Befehlgit config --global. Wir müssen unseren Namen und unsere E-Mail-Adresse festlegen, damitgit unsere Informationen als Committer korrekt aufzeichnen kann:

git config --global user.name "Your Name"
git config --global user.email "[email protected]"

Standardmäßig schreibtgit keine leeren Verzeichnisse in das Repository. Hugo verlangt manchmal, dass diese Verzeichnisse vorhanden sind, auch wenn sie keinen Inhalt enthalten. Um dies zu umgehen, können wir in jedes dieser leeren Verzeichnisse eine versteckte.gitkeep-Datei aufnehmen. Dies reicht aus, damitgit das Verzeichnis festschreibt, ohne die tatsächliche Funktionalität von Hugo zu beeinträchtigen.

Wir können jedem unserer Verzeichnisse der obersten Ebene (außer dem tatsächlichen versteckten Verzeichnis von.git) eine versteckte.gitkeep-Datei hinzufügen, indem wir Folgendes eingeben:

for DIR in `ls -p | grep /`; do touch ${DIR}.gitkeep; done

Wir können sehen, dass eine versteckte.gitkeep-Datei zu allen unseren Verzeichnissen der obersten Ebene hinzugefügt wurde, indem wir Folgendes eingeben:

find . -name .gitkeep

Output./data/.gitkeep
./layouts/.gitkeep
./archetypes/.gitkeep
./static/.gitkeep
./content/.gitkeep

Wir möchten auch sicherstellen, dass unser gerenderter Site-Inhaltnot ist, die der Quellcodeverwaltung hinzugefügt wurden. Die tatsächlichen HTML-, JavaScript- und CSS-Elemente sollten bei jeder Bereitstellung neu generiert werden und nicht in der Quellcodeverwaltung selbst gespeichert werden. Wir könnengit anweisen, das Verzeichnispublic zu ignorieren, in dem generierter Inhalt gespeichert wird, indem dieser Speicherort einer.gitignore-Datei hinzugefügt wird:

echo "public" >> .gitignore

Jetzt können wir unser sauberes Site-Skelett in das Repository übertragen, indem wir den gesamten Inhalt im aktuellen Verzeichnis hinzufügen und dann Folgendes festlegen:

git add .
git commit -m 'Initial commit, pre-configuration.'

Anpassen der Erstkonfiguration für Ihre Site

Passen wir die Hauptkonfigurationsdatei von Hugo an, um festzulegen, wie Hugo unsere Site erstellen soll.

Öffnen Sie die Dateiconfig.tomlin Ihrem Editor:

nano config.toml

Im Inneren finden Sie einige Elemente, die angepasst werden müssen:

~/my-website/config.toml

baseurl = "http://replace-this-with-your-hugo-site.com/"
languageCode = "en-us"
title = "My New Hugo Site"

Wie das Dateisuffix angibt, wird diese Datei mitTOML language geschrieben. Dies ist eine einfache Konfigurationssprache, die hauptsächlich Schlüssel, Werte und Abschnitte verwendet.

Das erste Element, das wir ändern sollten, ist das Elementbaseurl. Dies wird verwendet, um URLs zu erstellen, wenn die Site erstellt wird. Ändern Sie dies, um auf den Domainnamen oder die öffentliche IP-Adresse Ihres Servers zu verweisen. Sie sollten auch den Wert bearbeiten, dertitle zugewiesen ist. Dies wird zum Festlegen des Registerkarten- oder Fenstertitels für Ihre Site verwendet und auf der Seite für bestimmte Themen verwendet:

~/my-website/config.toml

baseurl = "http://your_domain_or_IP/"
languageCode = "en-us"
title = "Your Site Name"

Es gibt ein paar zusätzliche Einstellungen, die wir dieser Datei hinzufügen sollten. Zuerst können wir unseren bevorzugten Texteditor einstellen. Auf diese Weise wird beim Generieren neuer Seiten die Seitenvorlage in unserem Editor geöffnet und ist einsatzbereit.

Wir sollten auch ein Standardthema festlegen. Wir werden ein Thema namens "nofancy" verwenden, um loszulegen. Sie können dies später in der Befehlszeile außer Kraft setzen, um Alternativen zu testen und die Konfigurationsdatei dann zu bearbeiten, wenn Sie eine finden, die zu Ihnen passt. Wir werden auch unser bevorzugtes Codeblock-Styling festlegen:

~/my-website/config.toml

baseurl = "http://your_domain_or_IP/"
languageCode = "en-us"
title = "Your Site Name"
newContentEditor = "nano"
theme = "nofancy"
pygmentsStyle = "native"

Weitere Informationen zu den verfügbaren Einstellungen finden Sie unterthis page. Speichern und schließen Sie vorerst die Datei.

Lassen Sie uns unsere Konfigurationsänderungen festschreiben, bevor Sie fortfahren:

git add .
git commit -m 'Initial configuration complete'

Neue Seiten für Ihre Site erstellen

Jetzt können wir mit der Erstellung von Websiteinhalten beginnen. Inhalte in Hugo werden in benutzerfreundlichen Auszeichnungssprachen geschrieben. Die Seitenmetadaten werden in einem speziellen Abschnitt auf jeder Seite mit der Bezeichnung „Frontmaterie“ bereitgestellt. Dabei werden dieselben Konfigurationssyntaxen verwendet, die für die Hauptkonfigurationsdatei verfügbar sind.

Mit Hugo können wir neue Inhalte generieren, indem wir den Befehlhugo new verwenden, gefolgt vom Pfad zu den Inhalten, die wir produzieren möchten. Standardmäßig werden Hugo-Inhalte in Markdown geschrieben. Damit Hugo HTML korrekt von unseren Markdown-Seiten generieren kann, müssen wir Dateien erstellen, die mit der Erweiterung.mdenden.

Erstellen Sie eine About-Seite

Die Seiten, auf die von der Homepage aus verwiesen wird, und die relativen Pfade, die Ihre Seiten benötigen, werden weitgehend von Ihrem Thema bestimmt. Sehen Sie sich die Seite des Themas auf GitHub an, um mehr darüber zu erfahren, was es erwartet. Unser Thema "nofancy" enthält einen Link für eine "about" -Seite. Beginnen wir mit der Erstellung dieser Seite:

hugo new about.md

Im Verzeichniscontent wird eine neue Seite mit dem Namenabout.md erstellt. Da wir die OptionnewContentEditor in unserer Konfigurationsdatei festgelegt haben, sollte die Datei automatisch mit Ihrem bevorzugten Editor geöffnet werden. Es sollte so aussehen, um zu beginnen:

~/my-website/content/about.md

+++
categories = ["misc"]
date = "2015-11-05T16:58:58-05:00"
title = "about"

+++

Die Einstellungen und Metadaten für die Seite werden in der „Titelseite“ der Seite konfiguriert, wobei der Abschnitt auf beiden Seiten durch die Zeilen „+“ gekennzeichnet ist. Die vordere Angelegenheit, die standardmäßig enthalten ist, wird häufig durch das von Ihnen verwendete Thema definiert.

Unser aktuelles Thema umfasst drei Elemente im Vordergrund der generierten Seiten. Sie können diese anpassen oder zusätzliche Elemente hinzufügen, wie Sie möchten. Die allgemeinen Variablen, die Hugo zur Verfügung stehen, sindhere. Ihr gewähltes Thema könnte auch seine eigenen Variablen für die vordere Materie verwenden. Überprüfen Sie die README-Datei Ihres Themas inHugo theme repository, um Einzelheiten zu Ihrem Thema zu erfahren.

Einige wichtige allgemeine Themen sind:

date: Das Datum, an dem Ihre Inhalte sortiert werden sollen
description: Eine Beschreibung des Seiteninhalts
draft: Markiert die Seite als nicht zur Veröffentlichung bereit, wenn sie auf true gesetzt ist
slug: Legen Sie dies fest, wenn Sie einen alternativen URL-Namen für den Inhalt angeben möchten
publishdate: Dies kann auf ein zukünftiges Datum festgelegt werden, wenn Sie die Seite erst nach einem bestimmten Datum erstellen möchten
title: Der Titel Ihrer Seite

Lassen Sie uns vorerst nur den Titel unserer "Info" -Seite bearbeiten:

~/my-website/content/about.md

+++
categories = ["misc"]
date = "2015-11-05T16:58:58-05:00"
title = "About Me"

+++

Jetzt können wir Markdown-Text unter dem unteren "+" hinzufügen. Dies wird in den HTML-Text des Körpers übersetzt. Wir werden einige Absätze, eine Überschrift und ein Bild hinzufügen, das unterCreative Commonslizenziert ist und vonEva Hejda zur Verfügung gestellt wird, die uns gefallen haben:

~/my-website/content/about.md

+++
categories = ["misc"]
date = "2015-11-05T16:58:58-05:00"
title = "About Me"

+++

Hello and welcome to my site!

## A Bit About Me

I like alpacas and I'm a fan of static sites.

![Great alpaca picture](https://upload.wikimedia.org/wikipedia/commons/c/c4/Alpaka_33444.jpg)

Wenn Sie fertig sind, speichern und schließen Sie die Datei.

Erstelle deinen ersten Beitrag

Wir haben die Seiteabout.mdim Stammverzeichnis unseres Inhaltsverzeichnisses erstellt, da unser Thema dies erwartet. Die meisten unserer Beiträge werden jedoch am besten im Unterverzeichnispostgespeichert (einige Themen suchen stattdessen nach Beiträgen im Unterverzeichnisposts).

Erstellen wir einen ersten Beitrag im "posts" -Verzeichnis. Hugo erstellt automatisch alle führenden Verzeichnisse, die es zum Generieren von Seiten benötigt:

hugo new post/My-First-Post.md

Wenn wir im Markdown-Dateinamen Bindestriche verwenden, werden diese in Leerzeichen für den automatisch ausgefüllten Titel umgewandelt:

~/my-website/content/post/My-First-Post.md

+++
categories = ["misc"]
date = "2015-11-05T17:52:41-05:00"
title = "My First Post"

+++

Füllen Sie alle fehlenden Metadaten aus und fügen Sie der Seite eine Markierung hinzu. Wir werden hier ein Codebeispiel hinzufügen, damit Sie den Code sehen können, der durch das Pygments-Tool hervorgehoben wird. Zu diesem Zweck platzieren wir den Code zwischen zwei Hervorhebungs-Tags, die wie folgt aussehen:

{{< highlight language >}}

code_goes_here

{{< /highlight >}}

Dadurch wird das Pygement-Styling auf den Code in angewendet. Beachten Sie, dass bestimmte Themen CSS-Dateien enthalten, die die Auswahl des Pygement-Stils überschreiben. Auf das<pre>-Tag wird häufig ein zusätzliches Styling angewendet, das die Hintergrundfarbe für das Pygement-Thema überschreiben kann. Unser spezielles Thema leidet jedoch nicht unter diesem Problem.

Auf unserer Seite sieht der fertige Inhalt folgendermaßen aus:

~/my-website/content/post/My-First-Post.md

+++
categories = ["misc"]
date = "2015-11-05T17:52:41-05:00"
title = "My First Post"

+++

This is my first post on the site.  I hope that you like it!

## Welcome Function

Here is a little Python function to welcome you:

{{< highlight python >}}
def hello_world():
    print "Hello there!"
{{< /highlight >}}

Speichern und schließen Sie die Datei, wenn Sie fertig sind. Wenn Sie diese Seiten später bearbeiten müssen, finden Sie sie im VerzeichniscontentIhrer Hugo-Site.

Übertragen wir unsere neuen Seiten in das Repository vongit:

git add .
git commit -m 'First pages of our site'

Aufbau und Betreuung der Site

Hugo kann Ihre Markdown-Dateien übernehmen, die in Ihrer Konfiguration und Ihrem Design definierten Einstellungen anwenden und die tatsächlichen HTML-Seiten rendern, die den Besuchern angezeigt werden.

Um Ihre Site zu erstellen, können Sie einfach Folgendes eingeben:

hugo

Dadurch werden Ihre Seiten generiert und der gesamte gerenderte Inhalt im Verzeichnispublicauf Ihrem Server abgelegt. Wenn Sie möchten, können Sie den Inhalt dieses Verzeichnisses auf Ihren Webserver übertragen, um ihn bereitzustellen und bereitzustellen.

Note

[.note] # Hugo bereinigt das Ausgabeverzeichnis nicht nach jedem Build. Dies bedeutet, dass möglicherweise veralteter Inhalt aus einem früheren Build im Verzeichnispublicverbleibt. Die Hugo-Entwickler empfehlen, dass Sie das Verzeichnispublicnach jedem Build löschen (insbesondere vor dem Übergang zur Produktion), damit der gesamte Inhalt neu erstellt werden kann.
#

Hugo hat auch einen eigenen Webserver. Möglicherweise möchten Sie es nicht für Ihren Produktionsdatenverkehr verwenden, aber es ist eine hervorragende Möglichkeit, um Ihre Arbeitskopien anzuzeigen und das Rendering vor dem Bereitstellen Ihrer Seiten zu testen.

Verwenden Sie den Befehlhugo server, um Ihre Seiten auf Ihrem Hugo-Server verfügbar zu machen. Dadurch werden Ihre Seiten gerendert (es ist nicht erforderlich, den Befehlhugovorher auszuführen) und anschließend der Webserver gestartet.

Wir werden die Option--bind verwenden, um anzugeben, dass wir die Site auf allen Schnittstellen verfügbar machen möchten (wenn Sie Hugo lokal installiert haben, können Sie diese entfernen). Wir müssen auch die Option--bindUrleinbeziehen. Wir haben dies in unserer Konfigurationsdatei festgelegt, aber es wird in der aktuellen Version von Hugo nicht vom Server übernommen. Stellen Sie hier den Domainnamen oder die IP-Adresse Ihrer Website ein:

rm -r public
hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/

Wenn Siedraft = true auf einer Ihrer Seiten oderdate auf einen zukünftigen Zeitpunkt in einigen Ihrer Inhalte festlegen, können Sie diese Seiten erstellen und in der Vorschau anzeigen, indem Sie-D und-F Flags jeweils:

rm -r public
hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/ -D -F

Wenn Sie nun den Domainnamen oder die IP-Adresse Ihres Servers in Ihrem Webbrowser besuchen und die Portspezifikation von:1313an das Ende anhängen, wird Ihre gerenderte Site angezeigt:

http://your_domain_or_IP:1313

Hugo test site

Wir können auf unseren ersten Beitrag klicken, um unseren gerenderten Markdown anzusehen. Unser Pygments-Stil wurde auf den Codeblock angewendet:

Hugo first page

Wenn wir auf den Link "Über" klicken, werden wir zu unserer Seite "Über mich" weitergeleitet:

Hugo about page

Wie Sie sehen, ist unser Thema ziemlich einfach, aber es funktioniert genau so, wie wir es erwartet hatten.

Wenn Sie alternative Themen ausprobieren möchten, können Sie die Option--theme=am Ende Ihrer Serverzeile hinzufügen:

rm -r public
hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/ --theme=redlounge

Beachten Sie, dass jedes Thema seine eigenen Erwartungen an die Verzeichnisstruktur und die Konfigurationseinstellungen hat. Möglicherweise müssen Sie einige Einstellungen anpassen, damit jedes neue Thema ordnungsgemäß funktioniert.

Wenn Sie Hugo verwenden möchten, um Inhalte auf Port 80 wie einen herkömmlichen Webserver bereitzustellen, müssen Sie Ihrer Befehlszeile die Option--porthinzufügen. Sie müssen dem Befehl auchsudo voranstellen, da Ports unter 1024 für normale Benutzer eingeschränkt sind:

rm -r public
sudo hugo server --bind=0.0.0.0 --baseUrl=http://your_domain_or_IP/ --theme=redlounge --port=80

Sie sollten nun in der Lage sein, Ihre Site in einem Browserfenster ohne die angehängte Portnummer zu besuchen.

Nachdem Sie den Hugo-Server mitsudo ausgeführt haben, müssen Sie dem Befehlrm auchsudo voranstellen:

sudo rm -r public

Fazit

Hugo ist eine großartige Möglichkeit, eine Website schnell und einfach in Betrieb zu nehmen. Statische Sites bieten eine weniger ressourcenintensive Alternative zu den herkömmlichen CMS-Sites. Die Mehrheit der Benutzer benötigt keine datenbankgesteuerten Inhalte und verwendet nicht die zusätzlichen Funktionen, die Content-Management-Systeme bieten. Mit Hugo können Sie Ihre Energie auf die Erstellung von Inhalten konzentrieren, anstatt ein komplexes System zu verwalten.

Unserenext guide werden dieses Setup noch einen Schritt weiter führen und erläutern, wie eine Hugo-Site mithilfe von Git Hooks bereitgestellt wird.

TOC

Installieren und Verwenden von Hugo, einem statischen Site-Generator, unter Ubuntu 14.04

Einführung

Voraussetzungen

Installieren der neuesten Version von Hugo

Finden Sie Ihre Systemarchitektur

Laden Sie das Hugo-Paket herunter und installieren Sie es

Installieren der unterstützenden Hugo-Software

Installieren Sie die Hugo-Themes

Installieren Sie den Pygments Syntax Highlighter

Aktiviere die automatische Vervollständigung von Hugo Bash

Erstellen Sie Ihre erste Site

Festschreiben Ihrer Site zur Quellcodeverwaltung

Anpassen der Erstkonfiguration für Ihre Site

Neue Seiten für Ihre Site erstellen

Erstellen Sie eine About-Seite

Erstelle deinen ersten Beitrag

Aufbau und Betreuung der Site

Fazit

Related