background-shape
feature-image

TLDR;

Wir zeigen wie man mit hugo eine statische Webseite erstellt, ohne ein klassisches CMS System (z.B.: WordPress, Joomla..) zu verwenden. Hierbei greifen wir etablierte Methoden und Tools aus der Softwareentwicklung auf wie z.B.:

  • GIT (Versionierung)
  • GitLab (CI/CD)
  • Markdown (Inhalte und Seiten)
  • hugo (Framework für statische Webseiten)

Zudem integrieren wir das Bearbeiten der Webseite in den alltäglichen Entwicklungsprozess und veröffentlichen die Webseite, mit Hilfe einer CI/CD Pipeline, automatisch auf einem Webserver.

Einleitung

Um ehrlich zu sein, die eigene Firmenwebseite war für uns als Startup eine der größten Herausforderungen. Jetzt denken Sie sich vielleicht, aber Ihr seid doch Softwareentwickler, warum programmiert ihr sie nicht einfach selber?

Diese Frage lässt sich schnell beantworten, denn zum Zeitpunkt der Gründung waren wir nur 2 Personen und eine Webseite von Grund auf selbst zu entwickeln und zu optimieren ist mit viel Aufwand verbunden. Daher hatten wir unsere Prioritäten auf andere Themen gelegt und so keine Zeit das Rad neu zu erfinden.

Für unsere Webseite hatten wir daher folgende Anforderungen definiert:

  • Schnelle Inbetriebnahme
  • Einfache Bereitstellung von neuen Inhalten
  • Ansprechende Optik

Rückblick

Wie üblich haben wir uns zuerst auf dem Markt nach verfügbaren Lösungen zur Erstellung einer statischen Webseite umgeschaut. Bei der Suche sind wir dann zwangsläufig auf die üblichen Verdächtigen aus dem Content-Management Bereich gestoßen.

Wir hatten uns dann sehr schnell für WordPress entschieden, da es auf den ersten Blick alle Anforderungen erfüllte.

Die Vorteile:

  • Es gibt Hoster, die eine fullmanaged WordPress Instanz bereitstellen
  • WordPress verfügt über ein umfangreiches Ökosystem mit vielen AddOns und Themes, um die Website an die eigenen Bedürfnisse anzupassen
  • WordPress ist ein Content Management System, somit sollte das Bereitstellen von Inhalten keine Probleme machen

In der Praxis haben sich dann aber sehr schnell die Schattenseiten gezeigt.

  • AddOns sind oft veraltet und werden nicht mehr weiterentwickelt.
  • Kostenpflichtige Themes sehen zwar optisch sehr gut aus, sind aber oft schlecht programmiert und quasi unmöglich anzupassen.
  • Die WYSIWYG (What You See Is What You Get) Editoren der Themes machen das Bearbeiten der Webseite zu einer Tortur
  • Schlechte Seitenperformance

WordPress und vor allem die kostenpflichtigen Themes mit den Content Editoren haben uns enttäuscht. Es wird oft mit einer ansprechenden Optik und einer einfachen und freien Gestaltung der Website geworben. Doch die Definition von “einfach” scheint dahingehend sehr dehnbar zu sein.

- keep it simple stupid

WordPress hatte uns gezeigt, dass wir mehr Fokus darauf legen müssen, wie wir das System bedienen bzw. mit Inhalt füllen wollen. Wir ergänzten unsere Anforderungen daher um folgenden Punkt:

  • das Bearbeiten der Webseite soll sich in unseren alltäglichen Arbeitsprozess eingliedern

Als Softwareentwickler hat man sich an seinen Entwicklungsflow gewöhnt:

  • Projekte bestehen aus Ordner
  • Alle Dateien in einem Projekt Ordner werden über ein Git-Repository versioniert
  • Dateien werden zuerst lokal auf dem PC geändert und später mit “Pull Request” in das Remote Repository aufgenommen
  • “Pull Request” können von beteiligten Personen angeschaut und überprüft werden
  • Wenn alle Beteiligten mit den Änderungen zufrieden sind, wird der “Pull Request” akzeptiert und landet in der nächsten Version
  • Die neue Version wird erstellt und ausgerollt

Um diesen Arbeitsprozess auch auf unsere Webseite anzuwenden, mussten wir ein System finden, welches sich ausschließlich über Text Dateien (html, css, js, markdown usw.) verwalten lässt. Die üblichen CMS Systeme fielen aus der Auswahl heraus, da diese ihre Inhalte und Einstellungen in einer Datenbank verwalten.

Die Umsetzung

Nach längerer Recherche stießen wir auf das Open Source Framework hugo1.

Vorteile

  • hugo wird ausschließlich über Dateien verwaltet
  • Kommt ohne Datenbank aus
  • Keine backend Runtime nötig (z.B.: PHP, node.js)
  • Lässt sich perfekt in den beschriebenen Arbeitsprozess einbinden
  • Themes2 erleichtern den Einstieg
  • Die gesamte Webseite lässt sich problemlos mit Hilfe von HTML, CSS und JS anpassen
  • Shortcodes ermöglichen Funktionserweiterungen
  • Live-Preview der Webseite über CLI

1) hugo

  • hugo herunterladen und installieren
  • Neues hugo Projekt anlegen
  • Gewünschtes Theme herunterladen & installieren
  • Beispielinhalte einfügen
  • Eigene Inhalte hinzufügen

2) Gitlab

  • Umgebungsvariablen definieren
    • FTP_HOST - z.B.: sftp://ssh.strato.de
    • FTP_PASSWORD
    • FTP_USERNAME
    • HUGO_BASE_URL - z.B.: https://buildline.de

3) CI/CD Pipeline

variables:
  # hugo Ausgabeordner für statische Dateien
  DIR_PUBLISH: "public"         

stages:
  - build
  - deploy

# erzeugen der statischen Webseite
build:
  stage: build
  # docker image mit hugo
  image: klakegg/hugo:alpine-ci
  script:
    # erzeugt statische Webseite mit url
    - hugo -b $HUGO_BASE_URL 		

  # generierte Dateien werden als Artefakt gespeichert
  artifacts:						        
    paths:
      - $DIR_PUBLISH
    expire_in: 1h
  only:
    - tags

# kopieren statische Dateien auf Webserver/Webspace
deploy:
  stage: deploy
  image: alpine:latest
  script:
    # installation lftp, openssh 
    - apk --no-cache add ca-certificates lftp openssh 
    - lftp -e "set sftp:auto-confirm yes; mirror -R --reverse --verbose --delete $DIR_PUBLISH/ /; bye" -u $FTP_USERNAME,$FTP_PASSWORD $FTP_HOST 
  only:
    - tags

Fazit

Uns hat die Umsetzung des Projekt’s sehr viel Spaß gemacht. Im Vergleich zu WordPress, sind wir bei der Gestaltung der Webseite deutlich schneller in Fahrt gekommen. Wir haben es geschafft unsere “alte” WordPress Firmenwebseite mit Hilfe von hugo zu relaunchen. Zudem haben wir die Bearbeitung der Webseite in unseren alltäglichen Arbeitsprozess aufgenommen, so können neue Inhalte und Änderungen schneller und einfacher veröffentlicht werden. Mit Hilfe einer Gitlab CI/CD Pipeline werden unsere Änderungen automatisch auf den Webserver kopiert.

Dennoch ist hugo sicherlich nichts für jedermann.

Ein Grundverständnis in HTML, CSS und JS ist zwingend erforderlich. Zudem muss man sich mit dem hugo Framwework auseinandersetzen. Wir sehen es aber gerade deshalb als eine gute Alternative für Leute, die ihre Webseite lieber in einem Texteditor schreiben, als in einen WYSIWYG Editor im Browser.