So geht's: Blog ohne PHP

|
HTML5

TYPO3, WordPress und Shopware sind mächtige Tools, um Websites zu kreieren. Was sie alle gemeinsam haben? Sie basieren auf PHP. Daher muss beim Aufrufen einer Site zusätzlich zum Webserver noch ein PHP Interpreter ausgeführt werden. Dieser liest den PHP Code ein und führt ihn aus. Sowohl Latenzen als auch die Last des Servers werden dadurch erhöht. Außerdem stellt es bei nicht regelmäßig erfolgten Updates ein erhebliches Sicherheitsrisiko dar. Daher möchte ich euch heute eine Alternative zeigen, mit der ihr ohne PHP auskommt.

Static Site Generatoren

Static Site Generatoren (SSG) generieren, wie ihr Name beschreibt, statische Websites. Am Ende fallen dabei nur HTML und CSS Dateien raus, die vom Webserver ohne rechenintensive Interpretation von PHP Skripten ausgeliefert werden können. Dadurch erhöhen sich die Geschwindigkeit und die Sicherheit der Website. Denn außer des Webservers in Form von Apache, nginx oder Ähnlichem wird serverseitig kein weiterer Code ausgeführt, der eventuell Sicherheitslücken enthalten könnte.

Der Nachteil: eine reduzierte Interaktivität mit der Website. Zwar lässt sich Javascript weiterhin einbinden, aber ohne Code auf der Serverseite lassen sich die Benutzereingaben nicht einfach verwerten. Dennoch erleichtert das Tool-Set der SSG das Hinzufügen neuer Inhalte, bspw. eines Blogartikels.

Hugo betritt den Ring

Hugo ist ein in Golang geschriebener SSG und hatte 2013 seinen ersten öffentlichen Release. Das Projekt beschreibt sich selbst als optimiert auf Geschwindigkeit, Einfachheit und Konfigurierbarkeit und ist für jegliche Arten von Websites konzipiert. Unterstützt werden die meisten gängigen Betriebssysteme wie Windows, Linux und Mac – wobei die generierten HTML-Dateien sich von jedem Webserver auf beliebiger Plattform ausliefern lassen.

Auszeichnungssprache Markdown

Die Inhalte für Hugo werden in der Auszeichnungssprache Markdown verfasst. Dies mag sich zuerst komplex anhören, ist aber ganz einfach. So gehts:

---

title: "Bloggen Ohne PHP"

date: 2020-09-15T11:03:25+02:00

draft: true

---

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur rutrum odio a quam aliquet vehicula. In hac habitasse platea dictumst. Praesent iaculis erat ut justo eleifend egestas. Sed aliquam tristique mauris.

 

## Cras imperdiet arcu tincidunt ipsum tincidunt

 

Maecenas sollicitudin nibh nec orci rutrum, at sodales libero commodo. Morbi vel ultricies justo, eget varius lorem. Curabitur sagittis sit amet lacus sagittis ullamcorper. In eget facilisis lectus. Fusce vitae diam varius, ultrices ligula sed, rhoncus felis.

MIt Static Site Generatoren kann man auch ohne PHP einen Blog erstellen.

Metadaten

Am Anfang müsst ihr einige Metadaten für Hugo definieren: 'title' und 'date' erklären sich selbst. Das 'draft' Metadatum definiert, ob der Artikel nur ein Entwurf ist und deswegen nicht beim Erstellen der Webseite mit publiziert werden soll. Ist der Artikel fertiggestellt, setzt ihr dort 'false'. Danach folgt der eigentliche Text. Zwischenüberschriften markiert ihr durch '##'. Weitere Möglichkeiten der Textformatierung findet ihr in der offiziellen Spezifikation von Markdown.

Hugo-Website mit Git verwalten

Der Vorteil von Auszeichnungssprachen wie Markdown ist eine simple Möglichkeit der Versionierung, wie zum Beispiel mit der beliebten Versionsverwaltung Git. Hierauf aufbauend lässt sich mit Kollaborationssoftware wie Gitlab oder Github auch die Zusammenarbeit mit Redakteuren oder anderen Autoren vereinfachen. Außerdem könnt ihr ein Continuous Deployment Prozess mit beliebigen CI/CD Tools erstellen.

Eine per Hugo erstelle Website mit Gitlab Pages zu hosten, ließe sich zum Beispiel mit folgender gitlab-ci.yml umsetzen.

image:

  name: klakegg/hugo

  entrypoint: [""]

 

variables:

GIT_SUBMODULE_STRATEGY: recursive

 

pages:

  script:

  - hugo

  artifacts:

    paths:

    - public

  only:

  - master

Der 'public' Ordner enthält nach dem Aufruf von 'hugo' die fertig erstellte Website. Anstatt ebendiesen Ordner den Gitlab Pages zu überlassen, kann er von der Gitlab CI auch per SSH oder FTP auf einen Webspace hochgeladen werden. Dadurch wird die Site live geschaltet, sobald Änderungen auf dem Master Branch des Git Repositories landen.

Die erste eigene Hugo Website

Damit ihr mit Hugo starten könnt, müsst ihr das Programm auf der eigenen Arbeitsmaschine installieren. Wie? Das ist in der offiziellen Hugo Installationsanleitung beschrieben. Eine neue Website könnt ihr wie folgt anlegen:

> hugo new site meinblog

Damit legt ihr einen neuen Ordner mit der benötigten Struktur an.

> cd meinblog/ && ls

archetypes/ config.toml  content/  data/ layouts/  static/  themes/

In der Datei `config.toml` wird die `baseURL` auf die Domain gesetzt, unter der die Website aufrufbar sein soll. Außerdem müsst ihr den `languageCode` auf den Code der Sprache setzen, die verwendet werden soll. Für Deutsch ist dies `de-de`. Danach solltet ihr die Standardsprache mithilfe des Parameters `DefaultContentLanguage` einstellen. Erst dann werden die Standardtexte von Hugo auch deutschsprachig generiert. Hier reicht für Deutsch `de`. Um das zu verwendende Theme zu definieren, fügt ihr 'theme = ananke' hinzu.

Die fertige 'config.tom' sieht so aus:

baseURL = "http://example.org/" # mit eigener Domain ersetzen

languageCode = "de-de"

title = "My New Hugo Site" # mit eigenem Titel ersetzen

theme = "ananke"

DefaultContentLanguage = "de"

Das Ananke Theme wird nicht zusammen mit Hugo ausgeliefert. Daher müsst ihr dies extra installieren:

> git init

> git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke

Nun könnt ihr mit 'hugo new artikel/neuer-artikel.md' auch schon den ersten Artikel hinzufügen. Um sich das Ergebnis anzuschauen, bringt Hugo einen Webserver mit, den ihr mit 'hugo server' startet. Sollen Entwürfe mit angezeigt werden? Dann fügt folgenden Parameter hinzu: 'hugo server -D'. 

Startet nun den Server. Schon ist die Site über die URL http://localhost:1313/ aufrufbar.

Fazit

Dank Hugo lassen sich einfache, statische Websites simpel und schnell erstellen, ohne sich erst in die Komplexität eines CMS einarbeiten zu müssen. Auch die Konfiguration eines PHP Interpreters oder einer Datenbank wie MySQL entfällt. Die Möglichkeit, seine Website im Git zu verwalten, schafft neue Wege der Kooperation und Automatisierung. Für interaktive Elemente wie einen Warenkorb müssen jedoch externe Dienste eingebunden werden.

Hoffentlich konnte euch dieser Artikel einen guten ersten Einblick in die Welt der Static Site Generatoren geben. Falls ihr mehr wissen wollt, findet ihr in der offiziellen Dokumentation viele weitere Ressourcen zur Website-Erstellung mit Hugo. ;-) Ich wünsche euch viel Erfolg bei der Erstellung!

Ähnliche Artikel:

Webentwicklung

TOP 20 der TYPO3 10 Extensions

Mit TYPO3 10.4.x sind schon viele Extensions kompatibel. Welche die beliebtesten Erweiterungen unserer Hosting-Kunden sind, erfährst du hier.

Hosting

Rasend schnelle Leistungen zum Abheben – das steckt hinter der Top-Performance bei Mittwald

Was steckt eigentlich hinter der Top-Performance unserer neuen Hosting-Tarife? Das haben wir Tobi, stellv. Leiter des Bereichs Infrastruktur, gefragt.

Webentwicklung

Ein optimiertes Frontend für noch mehr Performance: Lazy Loading in TYPO3 10 LTS – Teil 1

Mit Lazy Loading machst du deine Website in TYPO3 10 LTS um einiges schneller. Wie? Erfahre es hier von unserem TYPO3 Experten Hannes.

Menschen legen Puzzle, welches das WordPress Logo zeigt, zusammen
Webentwicklung

Was ist WordPress? – Mittwald erklärt

WordPress: der Alleskönner unter den CMS. Was WordPress genau ist, wie es sich entwickelt hat und wie du deine Website damit gestaltest, erklärt dir Viktor.

Webentwicklung

Feature-Preview: Automatische Updates für Themes und Plugins in WordPress

Für WordPress 5.5 werden automatische Updates für Plugins und Themes in den Core übernommen. Im Blog erhältst du von Lukas ein Feature-Preview.