Erste Schritte mit Hugo: So erstellen Sie eine einfache Website

Hugo ist ein Static Site Generator, mit dem Sie eine Website mit wenig bis gar keiner Programmiererfahrung erstellen können. Sie können vorgefertigte Themen als Grundlage für Ihr Website-Design verwenden. Dadurch können Sie sich mehr darauf konzentrieren, die Website mit Ihren Inhalten zu füllen.

Da Hugo hauptsächlich für statische Websites verwendet wird, eignet es sich perfekt zum Erstellen von Blogs, Portfolios oder Dokumentationsseiten.

Sie können ganz einfach eine Hugo-Website mit einem vorgefertigten Hugo-Design einrichten und erstellen. Mit nur wenigen Schritten können Sie dann mit Markdown Inhalte und Seiten zu Ihrer Website hinzufügen.

So installieren Sie Hugo

Sie müssen installieren der Hugo-Static-Site-Generator zum Erstellen, Ausführen und Testen einer Hugo-Website. Entsprechend der Hugo-Dokumentation, es gibt viele Möglichkeiten, wie Sie es installieren können. Nachfolgend sind einige der Optionen aufgeführt.

Mac

Sie können Hugo mit Homebrew installieren.

1. Öffnen Sie Ihr macOS-Terminal.
instagram viewer
2. Installieren Sie den Homebrew-Paketmanager.

   /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

3. Hugo installieren.

   brauen Installieren Hugo

Windows

Sie benötigen einen entsprechenden Paketmanager für Windows. Sie können zum Beispiel die verwenden Scoop-Paketmanager.

1. Öffnen Sie Windows PowerShell, das bereits Teil Ihres Windows-Betriebssystems sein sollte.
2. Wenn Sie Scoop zum ersten Mal installieren, müssen Sie möglicherweise Ihre Ausführungsrichtlinie festlegen.

   Satz-ExecutionPolicy RemoteSigned -Umfang Aktueller Benutzer

3. Scoop installieren:

   iex (Neu-object net.webclient).downloadstring('https://get.scoop.sh')
   

4. Hugo installieren:

   Scoop Installieren Hugo

So erstellen Sie ein Hugo-Projekt

Um ein neues Hugo-Projekt zu erstellen, müssen Sie das integrierte verwenden Hugo neue Seite Befehl.

1. Öffnen Sie Ihr Terminal oder Ihre Eingabeaufforderung. Navigieren Sie zu dem Ordner, in dem Sie Ihr Projekt erstellen möchten.
2. Führen Sie die aus Hugo neue Seite Befehl:

   Hugo Neu Seite? ˅ Neu-hugo-Website

3. Navigieren Sie in Ihrem Datei-Explorer zum Speicherort Ihres Hugo-Projekts.
4. Öffnen Sie den Projektordner. Sie werden sehen, dass Ihre neue Hugo-Website über die Datei- und Ordnerstruktur verfügt, die für das Funktionieren Ihrer Website erforderlich ist.

So fügen Sie ein Thema hinzu

Im Moment enthält Ihr Projekt nur die wichtigsten Basisordner für das Hugo-Projekt. Wenn Sie Ihre Website zu diesem Zeitpunkt lokal ausführen, wird nur ein leerer Bildschirm angezeigt. Da Sie noch keine HTML-, CSS- oder UI-Designs für Ihre Website eingerichtet haben, müssen Sie diese hinzufügen.

Hugo stellt bereits eine eingebaute Bibliothek zur Verfügung Hugo-Themen von Entwicklern erstellt.

1. Wählen Sie ein Thema aus, das Ihnen gefällt. Jedes Thema kann leicht unterschiedliche Einrichtungsanweisungen haben, die auf der jeweiligen Vorschauseite angezeigt werden. Dieses Tutorial verwendet die Märchenthema als Beispiel.
2. Navigieren Sie in einem Terminal oder einer Befehlszeile zum Stammordner Ihres Projekts.

   CD Neu-hugo-Website

3. Führen Sie den Befehl aus, um das Tale-Design hinzuzufügen. Sie können das Thema als Untermodul hinzufügen, wodurch ein neuer Ordner mit dem Namen erstellt wird Geschichte innerhalb der Thema Mappe.

   git init
   git-Submodul https hinzufügen://github.com/EmielH/tale-hugo.git themes/tale

   Alternativ können Sie das GitHub-Tale-Repository in den Themenordner Ihres Projekts klonen.

   git Klon https://github.com/EmielH/tale-hugo.git themes/tale

4. Navigieren Sie zu Ihrem Projektordner. Klick auf das Themen Ordner, um ihn zu öffnen. Unabhängig davon, welchen Befehl Sie verwendet haben, wird es einen neuen geben Geschichte Ordner, in dem das neu heruntergeladene Design gespeichert ist.
5. In dem config.toml -Datei, fügen Sie das Märchenthema als Teil der Konfiguration hinzu. Dadurch wird Hugo angewiesen, HTML, CSS und andere Stile zu verwenden, die das Tale-Design enthält.

   Thema = "Geschichte"

So fügen Sie Seiten zu Ihrer Website hinzu

Sie können Ihre Inhalte in jedem Format schreiben, das Hugo akzeptiert. Hugo konvertiert Ihre Dateien dann automatisch in HTML-Dateien, wenn sie dem Benutzer bereitgestellt werden. Dadurch lässt es sich schnell erstellen und bereitstellen. Dieses Beispiel verwendet Markdown, eine einfache Klartextsprache, als Format für Ihre Inhalte.

Sie können Markdown größtenteils in einfachem Englisch mit einigen hinzugefügten Symbolen schreiben, um eine beliebige Formatierung anzugeben. Dazu gehört das Hinzufügen von Symbolen zur Darstellung von Überschriften, welche Wörter fett gedruckt sind, oder jede andere grundlegende Formatierung, die Sie möglicherweise benötigen.

Um eine neue Unterseite oder einen neuen Beitrag zu Ihrer Website hinzuzufügen, müssen Sie eine neue Markdown-Datei in die hinzufügen Inhalt Mappe. Jedem Beitrag oder jeder Seite ist eine eigene Markdown-Datei zugeordnet.

1. Öffne das Inhalt Ordner in Ihrem Hugo-Projekt. Erstellen Sie eine neue Markdown-Datei mit dem Namen meinErsterPost.md.
2. Öffnen Sie die Datei in einem beliebigen Texteditor wie Notepad++ oder Visual Studio Code.
3. Fügen Sie oben in der Datei einige Metadaten hinzu. Darin enthalten sind wichtige Informationen zum Beitrag. Das von Ihnen verwendete Thema formatiert diese Informationen auf eine bestimmte Weise auf der Seite.

   
   Autor: "Dein Name"
   Titel: "Mein erster Beitrag"
   Datum: "2022-05-17"
   

4. Nachdem Sie die Metadaten hinzugefügt haben, können Sie mit dem Hinzufügen Ihrer Inhalte mit Markdown beginnen.

   Das ist mein allererster Beitrag auf meiner Hugo-Website!
   Das Hugo-Thema wird verwendet zumdiese Website heißt Tale.
   Es ist sehr einfach zu installieren und konfigurieren.
   # Unterüberschrift
   Das ist einige Inhalte.
   # Noch eine Unterüberschrift
   Das ist mehr Inhalt.

5. Fühlen Sie sich frei, weitere Markdown-Dateien hinzuzufügen, um Ihrer Website weitere Seiten hinzuzufügen.

So führen und testen Sie Ihre Hugo-Website lokal

Verwenden Sie zum Ausführen Ihrer Website die Hugo servieren Befehl.

1. Öffnen Sie ein Terminal oder eine Befehlszeile.
2. Navigieren Sie zum Stammordner Ihres Hugo-Projekts.
3. Führen Sie die aus Hugo servieren Befehl:

   Hugo servieren

4. Warten Sie, bis die Website den Startvorgang abgeschlossen hat. Sobald dies abgeschlossen ist, druckt das Terminal eine Nachricht aus, die besagt, von welcher lokalen Adresse aus Sie auf die Website zugreifen können. Normalerweise ist dies der Fall http://localhost: 1313/.
5. Öffnen Sie einen Webbrowser und geben Sie ein http://localhost: 1313/, oder die Adresse, die Ihnen das Terminal gegeben hat. Sie sehen die Hauptseite Ihrer Hugo-Website.
6. Auf der Seite wird eine Liste mit Posts für jede Markdown-Datei angezeigt, die Sie haben. In diesem Fall gibt es zwei mit Inhalt gefüllte Markdown-Dateien. Dazu gehört die Seite myFirstPost.md, die Sie zuvor erstellt haben. Es enthält auch einen neuen Beitrag namens bananaCakeRecipe.md.
7. Klicken Sie in einer der Vorschauen auf den Überschriftenlink. Es bringt Sie zur ganzen Seite für diesen bestimmten Beitrag.

Hosting Ihrer Hugo-Website

Mit Hugo ist es einfach und schnell, eine statische Website zum Laufen zu bringen. Sie können vorgefertigte Designs verwenden und konfigurieren und Ihre Hugo-Website zum Testen lokal ausführen. Sie können Ihrer Website auch Inhaltsseiten mit Markdown hinzufügen.

Sobald Sie Ihre Hugo-Website erstellt haben, können Sie mehr darüber erfahren, wie Sie sie hosten. Es gibt viele kostenlose Website-Hosting-Optionen, aus denen Sie wählen können, z. B. Dropbox, Google Drive oder OneDrive.

So erhalten Sie kostenloses Website-Hosting mit Dropbox, Google Drive oder OneDrive

Lesen Sie weiter