Blog eingerichtet

Vorgehensweise zur Erstellung meines Blogs.

Martin Schlüter

4 Minuten

Ich überlegte mir erst einmal welche Kriterien mir beim neuen Blog wichtig sind. Der Blog sollte natürlich betreffend HTML, CSS und Bildformate auf einen aktuellen Stand der Technik sein und er sollte zusätzlich auch Wartungsarm und die Contentpflege simpel sein. So entschied ich mich für HUGO als Content Management System zur Erstellung von statischen HTML Seiten in Kombination mit git, GitBucket und Jenkins zur Veröffentlichung auf dem Webserver.

statische HTML Seiten

Ich habe mich für eine Lösung mit statischen HTML Seiten aus zwei Gründen entschieden: Geschwindigkeit und Sicherheit.

Ein Webserver braucht für die Auslieferung einer dynamischen, über PHP generierten, HTML Seite mindestens ein paar Millisekunden, wenn einige komplexe Datenbankabfragen dazukommen können es auch ein paar hundert Millisekunden werden. Statische HTML Seiten können in unter 1 Millisekunde ausgeliefert werden. Zigtausend statische HTML Seiten pro Sekunde ausliefern stellt kein Problem dar, während so manches Worpress dermaßen in die Knie geht wenn es mal zu 100 Anfragen pro Sekunde kommt.

Eine Webseite aus statischen HTML Seiten besteht kann nicht angegriffen werden, es gibt keine Scripte auf dem Server, die Sicherheitslücken haben können über die man Zugriff auf den Server bekommt. Wer ein Blog mit Wordpress betreibt muss regelmäßig, teilweise im Tagesabstand, Updates einspielen und kann dann auch nur hoffen dass es keine weiteren Sicherheitslücken mehr gibt.

Gut, einen Nachteil hat meine Lösung mit rein statischen HTML Seiten aber doch, die Beiträge können nicht kommentiert werden. Naja, aber so habe ich keine weitere Arbeit mit Prüfen und Freischalten von Kommentaren.

Template/Design

Für das Design der Seite verwende ich das Template Hugo Future Imperfect , habe hier aber diverse Änderungen vorgenommen:

  • CSS Fehler beseitigt
  • zu einem echten Gridlayout geändert
  • Mobile Menus rein über CSS umgebaut
  • nicht genutzte Javascript, CSS und Font Dateien aus dem Quellcode entfernt
  • externe Javascript, CSS und Font Dateien lokal abgelegt, soweit möglich
  • Javascript und CSS Dateien werden automatisch jeweils zu einer Datei zusammengefügt und verkleinert
  • Template eingedeutscht
  • Bilder werden jetzt automatisch in verschiedene Größen, jeweils als jpeg und webp, umgewandelt
  • Beitragsbild als og:image verwenden
  • die Darstellung von Kategorie und Stichwort Übersichten verschönert
  • Möglichkeit von zusätzlichen Informationen zu Kategorien und Stichworten integriert
  • Anzeige relevanter Beiträge eingebaut
  • Cookiehinweis integriert

War eine gute Übung um tiefer in HUGO einzutauchen. :)

HUGO & git

Auf meinem PC habe ich HUGO und git installiert, so kann ich ohne Internetzugang an der Seite arbeiten, neue Inhalte hinzufügen und mir das Ergebnis auch direkt im Browser ansehen. Erst wenn alle Änderungen fertig sind brauche ich einen Internetzugang um diese auf einen selbstgehosteten GitBucket Server hochzuladen, von dort aus sorgt dann Jenkins dafür dass die statischen HTML Seiten generiert werden und auf dem Webserver landen und so von den Usern weltweit aufgerufen werden können.

Durch diese Vorgehensweise ist es auch simpel möglich das Gerät zu wechseln, also einen Tag am PC zu arbeiten, die Änderungen hochzuladen und dann am nächsten Tag den Laptop zu nehmen, mir dort von GitBucket die letzten Änderungen runterzuladen und dann am Laptop neue Beiträge erstellen und hochladen. Und zudem habe ich jederzeit eine Kopie aller Dateien auf dem GitBucket Server im Internet.

Als Editor nutze ich den Atom , der kann auch mit git umgehen und so die Änderungen unkompliziert zu GitBucket hochladen.

GitBucket & Jenkins

Sobald ich eine Änderung auf Gitbucket hochgeladen habe, bekommt Jenkis von GitBucket eine Meldung darüber. Jenkins holt sich dann diese Änderungen, startet selber HUGO um die statischen HTML Seiten zu generieren und diese dann auf dem Webserver hochzuladen. Jenkins kennt alle üblichen Methoden um die HTML Seiten zum Webserver zu übertragen, vom reinen kopieren wenn es auf dem selben Server läuft, über ftp, scp, rsync bis hin zur Erstellung von Docker Images um diese in eine Container Umgebung auszuspielen.

So kann Jenkins zeitgesteuert die Seite auch täglich neu generieren um vordatierte Beiträge zu veröffentlichen.

Nach und nach werde ich alle Webseiten über GitBucket und Jenkins laufen lassen, und bei den Projekten mit PHP werden dann auch noch diverse Tests integriert, alles erst in einer Testumgebung ausgespielt und erst nach einer Kontrolle und Freigabe dann auch in die Produktiv Umgebung ausgespielt.

Inhalte

Ich werde hier einerseits über IT, Internet und Programmierung schreiben, andererseits aber auch vor Politik oder gesellschaftlichen Themen nicht zurückschrecken, ich werde meine Meinung kundtun. Auch Privates/Persönliches wird hier zu lesen sein, so weit es auch für die Öffentlichkeit tauglich ist.

(714 Wörter | 4856 Zeichen)

Martins Meinung

Hier blogge ich über verschiedene Themen.