Statische Webseite mit HUGO - Erste Schritte

Installieren und Inhalt erzeugen

Sie wünschen ein Blog zu machen und Sie suchen ein Tool leicht um zu benutzen ? Das HUGO Open-Source Framework kann Sie interessieren.
Das benutze ich um mein Blog zu machen. Hier ist das Howto für mein Windows 7 Computer.

Installieren unter Windows 7

Sehen Sie die HUGO Dokumentation auch.

Dateistruktur

Wir erstellen eine sehr einfache Dateistruktur mit einem Teil für die .exe Datei und einem anderen für die Daten.

c:
cd \
mkdir hugo
mkdir hugo\bin
mkdir hugo\sites

Download

Wir laden die ZIP Datei für Windows 7 herunter (hugo_0.37_Windows-64bit.zip für mich).

Entpacken

Jetzt, wir entpacken die ZIP Datei (hugo.exe) nach dem Verzeichnis C:\hugo\bin. Und mehr braucht man für HUGO auch nicht.

Konfiguration

Beispiel mit regedit oder cmd.exe, im Feld der PATH Variable, hängt man den Pfad einfach nach einem Semikolon hinten dran, also ;C:\hugo\bin.

Test

c:
cd hugo\bin
hugo version

Wenn alles gut geht, kann man lesen das folgende Ding

Hugo Static Site Generator v0.37.1 windows/amd64 BuildDate: 2018-03-07T17:56:57Z

Neues Projekt

Um ein neues Projekt zu erstellen, nutzt man den folgenden Befehl in dem früher Ordner

c:
cd hugo\sites
hugo new site blog

Wenn alles gut geht, kann man lesen das folgende Ding

Congratulations! Your new Hugo site is created in C:\hugo\sites\blog.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>\<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

Hier ist die Ordnerstruktur

C:\hugo\sites\blog>dir

09/03/2018  16:18    <REP>          .
09/03/2018  16:18    <REP>          ..
09/03/2018  16:14    <REP>          archetypes
09/03/2018  16:21               105 config.toml
09/03/2018  16:21    <REP>          content
09/03/2018  16:14    <REP>          data
09/03/2018  16:14    <REP>          layouts
09/03/2018  16:18    <REP>          public
09/03/2018  16:14    <REP>          static
09/03/2018  16:14    <REP>          themes

Ein Theme installieren

Theme wählen

Eine Auswahl an Themes findet man auf der Hugo-Seite.
Man wählt das BeautifulHugo-Theme.
Man kann Git oder Herunterladung Befehl nutzen.

Download

Man lädt das beautifulhugo herunter.

Install

Das entpackt man nach dem Ordner C:\hugo\sites\blog\themes.

C:\hugo\sites\blog>dir themes
07/03/2018  16:11    <REP>          .
07/03/2018  16:11    <REP>          ..
07/03/2018  16:11    <REP>          beautifulhugo

HUGO Konfiguration Datei ändern

Damit das Theme von Hugo erkannt wird, muss man es noch in die Konfigurations-Datei config.toml C:\hugo\blog\config.toml eintragen.

baseURL = "http://example.org/"
languageCode = "en-us"
title = "My New Hugo Site"
theme = "beautifulhugo"

Theme testen

Man wechselt in der Konsole in den Projektordner und startet von dort aus den Server Um zu Draft-Posts sehen kann man “-D” dem Befehl hinzufügen.

C:\hugo\sites\blog>hugo server
←[K25lBuilding sites . ←[?25h
                   | EN
+------------------+----+
  Pages            |  7
  Paginator pages  |  0
  Non-page files   |  0
  Static files     | 33
  Processed images |  0
  Aliases          |  1
  Sitemaps         |  1
  Cleaned          |  0

Total in 234 ms
Watching for changes in C:\hugo\sites\blog{content,data,layouts,static,themes}
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disable
astRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Anschließend kann man die Seite besuchen cms hugo hello theme

Inhalt editieren

Man erzeugt eine neue Markdown-Datei

C:\hugo\sites\blog>hugo new post/mypost.md

Der neue Artikel

C:\hugo\sites\blog\content\post\mypost.md created

Der Inhalt von mypost.md Datei ist
Die mypost.md Datei ist Entwurfsmodus

---
title: "Mypost"
date: 2018-03-12T00:09:49+01:00
draft: true
---

Man editiert die Inhalte. Die Inhalte der Markdown-Datei sehen etwa wie folgt aus

---
title: "Mypost"
date: 2018-03-12T00:09:49+01:00
draft: false
---
# Hello World !

Man kann die Seite besuchen cms hugo hello world

Bilanz

Wir haben HUGO, ein Theme installiert und unseren ersten Artikel geschrieben.
Es ist einfach um zu installieren und man kann Inhalte bereits erzeugen.

cms  hugo  static  install  tuto 
comments powered by Disqus