Komm zur dunklen Seite der Macht, wir verwenden Cookies! Alles zum Datenschutz findest du hier: Datenschutz.

Hallo Welt

Hallo Welt! Hier ist er nun mein Blog. In meinem ersten Artikel schreibe ich darüber wie diese Seite eigentlich entstanden ist.

Die meißten werden jetzt denken: WordPress auf einem Webserver installiert, Theme heruntergeladen und los geht`s. Was ist schon so besonderes daran?

Eigentlich gar nichts, nur das ich mich gegen WordPress entschieden habe. Dieser Blog basiert auf einem Static Site Prozessor. Das bedeutet dass hier kein PHP Framework mit Datenbank und tausenden Zeilen Quellcode hinter arbeitet.

Alle Inhalte sind in reinem HTML geschrieben.

Warum? Ganz einfach!

  • Weil es geht. :)
  • Ich schreibe HTML und CSS mit verbundenen Augen.
  • Reines HTML und CSS ist extrem wartungsarm. Ich muss mich hier also nicht um Updates oder Patches kümmern.
  • Geschwindigkeit! Die Inhalte werden von deinem Browser angefordert und sofort komprimiert ausgeliefert. Sie müssen also nicht erst aus einer Datenbank geladen, umgewandelt, formatiert, sortiert und ausgegeben werden.

Damit der Arbeitsaufwand trotzdem einigermaßen überschaubar bleibt, verwende ich Jekyll als Static Site Prozessor und Bootstrap von Twitter als HTML Framework. Letzteres kümmert sich vor allem um die korrekt Darstellung auf verschiedenen Endgeräten. Also Desktop, Tablet und Smartphone.

Mit Jekyll kann ich, wie mit einem modernen Templatesystem auch, Templates definieren die dann zu einer vollständigen Seite verarbeitet werden. Jekyll stellt während der Entwicklung einen Webserver zur Verfügung. Bei jedem Speichern einer Datei generiert Jekyll die HTML Seiten direkt neu und ich kann sie mir unter http://localhost:4000/ anschauen.

Jekyll kann weiterhin über Plugins erweitert werden. Für die Darstellung von Quellcode verwende ich “pygments”. Das sieht dann zum Beispiel für PHP so aus:

<?php
function hello(){
    echo "Hallo Welt";
}

hello();
?>

Ein weiteres Plugin “jekyll-minifier” komprimiert die HTML Ausgabe und arbeitet wie ein klassischer Minifier:

<html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width initial-scale=1"> <meta http-equiv="Cache-control" content="public"> <title>Webchef - Web & App Entwicklung</title></head><body></body></html>

Mein Foto oben links wird von http://Gravatar.com und die Icons, wie zum Beispiel das und im Footer, von http://fortawesome.github.io/Font-Awesome/ bereitgestellt.

Natürlich möchte ich nicht darauf verzichten dass mir meine Besucher Kommentare hinterlassen können. Dazu habe ich den Dienst http://disqus.com integriert. Voraussetzung zum Kommentieren ist also nur ein Account bei disqus.

Das war es erstmal für meinen ersten Artikel!