Hallo Hugo

Hallo Hugo

Dieses Blöglein wurde mit HUGO , einem Static- Site- Generator erstellt. Damit erstellt man ratz- fatz im Handumdrehen statische HTML Web- Seiten, oder einen Blog.

Es gibt mehrere solcher Generatoren…

  • Jekyll
  • Pelican
  • Hexo
  • Octopress

Und und und….

Zuvor hatte ich mit Hexo diese Blöglein generieren lassen.

Das coole an diesen Static-Site Generatoren ist, das man sich im Prinzip voll und ganz auf das Schreiben konzentrieren kann, so man sich zuvor für das richtige Template entschieden hat. Der Content, also das was man schreibt, landet als reines Text-file in einer *.md Datei.

Die Erweiterung sagt, das es sich hier um Markdown handelt. Markdown ist eine Text- Auszeichnungssprache,

Die Markdown-Konvertierungssoftware wandelt Text in gültiges und W3C-konformes XHTML um. Was will man mehr. Markdown ist selbst für den ungeübtesten Anfänger kinderleicht zu erlernen.

Eine Überschrift sieht so aus :

## Überschrift

Fettschrift würde so aussehen :

**Fettschrift**

Oder wenn man z.B. ein Bildchen in den Text einfügt, dann schreibt man :

![bildbeschreibung](pfad/zum/bild/deinfoto.png) 

Im schlimmsten Fall schreibt man eben nur einfachen Text. Dann halt ohne die Möglichkeit Grafiken einzubinden. Aber immerhin, es geht. Ich möchte jetzt nicht zu Tief ins Detail eingehen. Hier gibt es eine übersicht der gängigsten Markdown Formatierungen.

Da, wie ich bereits schon erwähnt habe, der Content in lauter kleine Markdown Dateien verpackt ist - jedes Posting existiert in einer separaten *.md Datei - hat man es hinterher um so leichter, den eigenen Blog mit einem anderen Statsichen- Seiten- Generator weiterzuführen. Z.B. mit jekyll.

Ich habe mich von HEXO getrennt, weil fast alle verfügbaren Hexo- Templates zu sehr mit unnötigen Java-Script schnick-schnack völlig überladen sind.

Wenn man jetzt noch selbigen Blog im Onion Gelände publiziert, sollte Java-Script ein Tabu sein. Man kann von einem Tor Benutzer nicht wirklich verlangen, das er gefälligst Java-Script in seinem Browser erlauben soll. hust !!

Hinzu kommt noch der Umstand das Node.js, respektive also auch NPM, benötigt wird um Hexo, plus diverse Plugin’s ans laufen zu bekommen.

Beides liegt für mein O.s. nur in Asbach - Uralt Versionen vor. Ich möchte mein System nicht unnötig mit Fremdquellen zu- Müllen.

Die Hugo Installation :

Die Hugo Installation unter Ubuntu/Mint gestaltet sich als extrem schwierig einfach. Man lädt sich das aktuelle Archiv von Github herunter, entpackt es und verschiebt abschließend den Inhalt (unter root) nach /usr/local/bin/

wget https://github.com/gohugoio/hugo/releases/download/v0.37/hugo_0.37_Linux-64bit.tar.gz
tar -xf hugo_0.37_Linux-64bit.tar.gz
sudo mv hugo /usr/local/bin/hugo

Das war’s auch schon.

Die ersten Schritte :

Erste Schritte nach der Installation

Wir checken im terminal zuerst mal welche Version wir intalliert haben.

hugo version


Hugo Static Site Generator v0.37 linux/amd64 BuildDate: 2018-02-27T09:15:25Z

Okay, dies scheint die neueste Version zu sein. Nämlich die vom 27.02.2018

Jetzt erstellen wir einen Ordner in dem Hugo seinen Projekt-Dateien ablegen kann.

mkdir ~/sites

Jetzt wechselt man im Terminal in den neu erstellten ordner

cd sites

In diesem Ordner erstellen wir ein neues HTML Projekt mit dem Namen quickstart

hugo new site quickstart

Ausgabe im Terminal :

Your new Hugo site is created in /home/benutzer/sites/quickstart.

Hugo hat nun einige Ordner, welche zum projekt quickstart gehören, erstellt.

.
└── quickstart
    ├── archetypes
    │   └── default.md
    ├── config.toml
    ├── content
    ├── data
    ├── layouts
    ├── static
    └── themes

Bevor wir mit dem erstellen eigener Artikel, postings usw. beginnen können, müssen wir uns zuerst ein passendes Hugo-theme herunterladen. Eine Übersicht findet man bei https://themes.gohugo.io

Ich habe mich für ein responsive taugliches Theme namens “Ananke” enstchieden. Responsive deshalb, weil man später den Blog auch auf einem WischoPhone gut zu Gesicht bekommt.

Nach dem herunterladen (wer möchte, kann dies natürlich auch per git machen) entpackt man gohugo-theme-ananke-master.zip in den dafür veorgesehenen thems Ordner.

└── quickstart
    ├── archetypes
    │   └── default.md
    ├── config.toml
    ├── content
    ├── data
    ├── layouts
    ├── static
    └── themes
        └── gohugo-theme-ananke-master

Damit Hugo weiß, mit welchem Theme der Blog künftig generiert werden soll, muss man diese Information in der Blog - Konfigurationsdatei config.toml hinterlegen.

Diese Datei befindet sich im Ordner ~/sites/quickstart/ und kann mit jedem X-beliebigen Texteditor bearbeitet werden. Da ich am Desktop -Rechner sitze, benutze ich einen Editor mit GUI und verzichte auf nerdlastige tools wie emacs, vim, nano und co. und benutze statt dessen mousepad, leafpad oder pluma.

mousepad ~/sites/quickstart/config.toml

Nun fügt man eine Zeile mit demenstrechenden Eintrag hinzu.

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

Jetzt beginnen wir mit dem erstellen des ersten Blog - Posts. Dazu führen wir im Ordner ~/sites/quickstart folgendes im Terminal aus.

hugo new posts/my-first-post.md

Hugo hat jetzt im Ordner ~/sites/quickstart/content/posts/ einen neuen Markdown Eintrag erstellt my-first-post.md, welchen man ebenfalls mit jedem x-belieben Texteditor öffnen kann und unterhalb der

- - - 

mit eigenem content befüllt werden möchte.

---
title: "My First Post"
date: 2018-03-04T15:22:04+01:00
draft: true
---
## Hallo Welt

Franz jagt im komplett verwahrlosten Taxi quer durch ganz Bayern

Nach dem Speichern der Markdown - Datei lassen wir hugo unseren Blog im Browser Anzeigen und führen im ordner ~/sites/quickstart

hugo server -D

aus.

Ausgabe im Terminal :

Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

So dann liefert uns Hugo die Seite im Webbrowser unter http://localhost:1313/ aus.

Neue Blog -Posts erstellt Hugo per Default immer als Entwurf (draft) ! Die Option -D bewirkt, das Draft’s ebenfalls angezeigt werden.

Nun ist es an der Zeit, den Blog zu veröffentlichen. Dazu muß Hugo zuerst alle statischen Seiten generieren, welche im Ordner “public” landen.

Dazu führt man im Ordner ~/sites/quickstart einfach nur den Befehl

hugo

….aus.

.
└── quickstart
    ├── archetypes
    │   └── default.md
    ├── config.toml
    ├── content
    │   └── posts
    │       └── my-first-post.md
    ├── data
    ├── layouts
    ├── public
    │   ├── 404.html
    │   ├── categories
    │   │   ├── index.html
    │   │   └── index.xml

Zu guter letzte muss nur noch der Inhalt des Ordners public per rsync oder ftp ins docroot auf den Webspace transferiert werden.

Eddy Kotschinski avatar
About Eddy Kotschinski
Eddy's true identity is unknown. Maybe he is a successful blogger or writer. Nobody knows it. -- > Eddys wahre Identität ist unbekannt. Vielleicht ist er ein erfolgreicher Blogger oder Schriftsteller. Niemand weiß es <--.