Webseite, CMS und Hosting – kirby und uberspace

In diesem Blogeintrag möchte ich dem Werdegang meiner Webseite erklären und ein wenig über die hier verwendete Technik reden.

der Anfang

Meine erste Webseite habe ich komplett per Hand in purem HTML und CSS geschrieben. Ich wollte einfach ein paar meiner Fotos zeigen. Ich würde auch jedem, der mit dem “Programmieren” von Webseiten anfängt, dazu raten ohne CMS und Frameworks anzufangen. So lernt man recht gut was wie mit HTML und CSS funktioniert.
Das funktioniert aber nur bis zu einer gewissen Grenze. Vor allem, wenn die Webseite sich häufig verändert und einfach neue Inhalte wie Bilder hinzugefügt werden sollen, muss man sich relativ schnell Gedanken zu einem CMS oder einen Template-System machen. Ein weiterer Grund sind aber auch viele Seiten, die das selbe Design teilen sollen.
Es muss aber nicht immer ein (vollwertiges) CMS sein. Als Alternative sollte man sich auch mal einen static site generator wie hugo anschauen. Vor allem, wenn die Inhalte eh nicht dynamisch sind, sich als nicht zwischen den Aufrufen ändern, außer es wird ein neuer Text hochgeladen.

CMS

Ich habe nach meiner ersten Webseite recht lange mit der Suche nach dem “richtigen” CMS verbracht. Aber vielleicht erst einmal ein paar Worte zu Content Management Systemen an sich.

Ein CMS hat erst einmal eine grundlegende Aufgabe: Es trennt den prinzipiellen Aufbau einer Webseite, das sogenannte Template, von den Inhalten. Dafür reicht aber auch ein Static Site Generator.
Daher kommt bei vielen Systeme hinzu, dass es ein “Backend” gibt, als eine spezielle Seite, auf der man sich anmelden kann, um die Inhalte zu bearbeiten. Zum Teil gibt es dann auch noch verschiedene Benutzerrollen, damit z.B. nicht jeder Inhalte freischalten oder löschen kann. Das halte ich aber bei vielen Webseiten für unnötig, da häufig eh nur wenige Personen die Inhalte bearbeiten. Ausgenommen sind hier vielleicht große Firmen mit sehr komplexen Webseiten.

Dies führt mich schon zu meinem ersten Punkt: Die Komplexität von den bekannten Systemen, wie typo3, joomla und Wordpress, wird in den meisten Fällen nicht benötigt und führt dazu, dass die Bedienung des CMS sehr kompliziert wird.

kirby CMS

Meine Wahl ist letztendlich auf das kirby CMS gefallen, vor allem, da es eben kein System für die “automatische” Installation von Plugins und Themes bietet, sondern einfach nur die Basisfunktionen eines CMS bietet. Außerdem benötigt kirby keine Datenbank, sondern basiert vollkommen auf Textdateien. Das heißt vor allem, dass eine Webseite sehr einfach zu kopieren ist.
Als Nachteil kann man es sehen, dass ohne gewisse Grundkenntnisse von HTML und Programmierung an sich nicht einfach eine Webseite erstellt werden kann. Ich sehen es aber vor allem als Vorteil, dass im Gegensatz zu z.B. joomla eben kein Code automatisch in das Template eingefügt wird. Bei kirby wird nur das ausgeführt, was man auch selbst geschrieben hat. Dies macht die Programmierung meiner Meinung nach einfacher, da ich mit den Plugins von Wordpress und joomla viele Probleme mit der Kompatibilität hatte.

Diese Webseite

Wie schon erwähnt verwende ich das kirby CMS als Basis. Da ich meine Softwareprojekte eh immer mit dem Versionsverwaltungssystem git verwalte kommt es mir auch gelegen, dass kirby als git-Repository gepflegt wird und auf Github steht. So sind also viele Dependencies per git submodule in mein Repository für diese Webseite eingebunden. Dies macht das Update des CMS und von meinen Plugins (die auch als git-Repo auf Github stehen) sehr einfach, das es nur ein paar Kommandozeilenbefehle braucht.

In dieser neuen Version meine verwende ich nicht mehr das komplette Twitter Bootstrap, sondern nur noch die Teile, die ich wirklich brauche. Daher verwende ich erstmals auch Sass als CSS Präprozessor, um Bootstrap aus den Quelldaten einzubinden. (Ich verwende aktuell die Alpha-Version von Bootstrap v4.)
Um pro Seite noch weniger CSS zu laden, habe ich meine CSS-Regel in den Basisstil der gesamten Webseite aufgeteilt und entsprechend bei speziellen Templates verfeinert. Somit werden bei der Startseite nicht gleich auch alle Regeln für die Fotoseiten und das Blog mit geladen.
Außerdem wird das, was ich an javascript benötige auch nur eingebunden, wenn das Template es benötigt.

Alle meine Webseiten gestalte ich natürlich responsiv, das heißt, dass such die selbe Seite auf verschiedene Bildschirmgrößen anpasst.

Foto-Gallerien

Auf meinen Foto-Seiten verwende ich oben das “Carousel” vom Bootstrap. Dort sind maximal 10 Bilder zu sehen.
Für Bildergallerien mit vielen Bildern verwende ich masonry. Dies lässt die Bilder passend zusammenrücken. Außerdem wird beim Klicken auf ein Bild eine Lightbox geöffnet — ein Overlay, das das Bild Bildschirmfüllend anzeigt. Hier verwende ich die swipebox. Ich setze nicht mehr auf “fancybox”, da “swipebox” da diese Lightbox auch gut per Touch bedienbar ist und mit das Lizenzmodell besser gefällt.

Videos

Erst einmal ist klar, dass Flash für das Abspielen von Videos schon seit ein paar Jahren nicht mehr nötig ist. Mittlerweile können alle Browser nativ mit dem HTML5-Video-Tag Videos abspielen und das meist deutlich energiesparender als mit Flash. Spätestens seitdem Youtube Anfang 2015 nun auch endlich HTML5-Videos standardmäßig ausliefert und spätestens seitdem auch Adobe seit Januar 2016 ihre Flash Programme eingestellt und auf HTML5-Animationen umgestellt hat steht fest — Flash ist tot.
Zuerst wollte ich nun alle Videos selbst hosten, das heißt alles in drei Versionen, h.264/ mp4, webm und HTTP-Live-Streaming (HLS) hochladen. Bei HLS dann auch noch in verschiedenen Auflösungen. Daher ist es dann manchmal doch einfach der Youtube-Upload geworden.
Als Player habe ich jetzt nichts besonderes festgelegt, das ist dann einfach der Player, den Dein Browser eingebaut hat.

SSL

Meine Seite ist standardmäßig per HTTPS, also einer TLS-verschlüsselten Verbindung erreichbar. Dafür setze ich ein kostenfreies Zertifikat von letsencrypt.org ein. Ich bin der Meinung, dass eine verschlüsselte Verbindung Standard sein sollte und nicht optional und mit letsencrypt ist das auch noch nicht einmal mehr ein großer Aufwand.
Jetzt muss nur noch der Webhoster mitspielen und kostenfreie Zertifikate von letsencrypt unterstützen oder direkt per Mausklick anbieten.

Hosting

Wenn man eine Website haben möchte, braucht man auch jemanden, der einen Server betreibt. Im Internet kann man da viele Anbieter finden, die einem mehr oder weniger viel Leistungen anbieten. Aber was braucht man überhaupt?
Eigentlich nur ein bisschen Speicherplatz. Eine Domain kann man meist auch günstiger bei einem anderen Anbieter bekommen. Dann ist man auch flexibler beim Umzug zu einem neuen Hoster.
Wenn jedoch ein CMS, wie kirby eingesetzt wird, muss auch PHP (teils dynamische Seiten genannt) angeboten werden. Zusätzlich kann man mit seiner eigenen Domain natürlich auch E-Mails verschicken. Ein entsprechender Mailserver ist eigentlich immer bei den Webhosting-Paketen dabei.

Hoster gibt es mittlerweile wie Sand am Meer, ich habe mich letztendlich für uberspace entschieden, da sie “eine Plattform von Technikern für Techniker und alle, die es werden wollen” sind. Dessen muss man sich aber auch bewusst sein, da es nur für sehr wenige Funktionen ein Webinterface gibt. Die meisten Einstellungen muss man per Kommandozeile machen, indem man sich per ssh mit dem Server verbindet. Ich finde das toll.
Ich möchte nicht mehr zu einem Hoster wechseln, der mit keinen ssh-Zugang und git bietet, da das die Verwaltung meiner Webseiten deutlich einfacher macht. Ich muss nicht mehr Dateien mit FTP-Programmen verschieben, sondern kann alles bequem von der Kommandozeile aus tun.
Außerdem kann ich bei uberspace meine eigenen Domains zu TLS-Zertifikate verwenden, da uberspace dies auch gar nicht anbietet und dadurch damit auch kein zusätzliches Geld verdienen möchte, dass sie ihre eigenen Zertifikate anbieten.

Ich bin bei uberspace sehr zufrieden, kann es aber trotzdem nicht uneingeschränkt empfehlen, da für die Bedienung eines Webhostings dort schon ein wenig mehr technisches Verständnis oder Interesse am Erlernen dessen vorhanden sein muss.

uberspace hosting kirby

neue Webseite und Blog

Es war mal wieder so weit – mir gefiel meine alte Webseite nicht mehr und daher musste eine neue her. Das Problem ist, das meine Webseite versucht meine vielen Interessen irgendwie in einen … »

May1Reboot

meine Fotoausrüstung

Falls es Dich interessiert, was ich so an Ausrüstung benutze, ist hier eine kleine Zusammenstellung. Ich finde es aber vor allem wichtig, dass man beim Kauf darauf achtet, dass das Produkt einem … »

foto