Ich wollte das Flat-File-CMS Grav für meine neue Website verwenden. Es wurde mir empfohlen, und da es mit PHP läuft, kann ich es auch auf meinem gemieteten Webspace verwenden.

Installation des Grundsystems

Auf meinem lokalen Rechner habe ich ein Projekt-Directory angelegt. Dorthin wurde mithilfe von unzip das Paket "Grav core", Version 1.6.11 entpackt:

unzip ~/Downloads/grav-admin-v1.6.11.zip

Ich verwende die Variante mit dem Admin-Panel, da ich die Website später vielleicht auch ohne Zugriff auf meinen PC administrieren können möchte.

Der Inhalt des Archivs ist ein Ordner grav-admin. Dieser stellt den eigentlichen Webroot dar. Die Dateien habe ich deshalb eine Ebene nach oben bewegt:

mv grav-admin/* .
rm -d grav-admin

Ich benutze bis auf weiteres XAMPP 7.3.7-1, daher richtete ich Apache in /opt/lampp/etc/httpd.conf so ein:

DocumentRoot "<pfad>/afuchs_de"
<Directory "<pfad>/afuchs_de">
    Options Indexes FollowSymLinks ExecCGI Includes
    AllowOverride All
    Require all granted
</Directory>

Zusätzlich habe ich Apache so konfiguriert, dass er unter meinem eigenen User läuft, damit ich die Website in meinem Home haben kann. Dafür ist es nötig, auf Port 8080 umzusteigen, aber das ist ein eher kleiner Tradeoff.

Unter http://localhost:8080/ ist jetzt zunächst ein Formular zur Erstellung eines neues Accounts sichtbar. Nachdem dieses ausgefüllt war, konnte ich das Admin-Panel sehen. Es meldete, dass schon Updates verfügbar seien, die ich als erstes einspielte. Auf der "Normalen" (Nicht-Admin-) Website war im Moment übrigens die Testseite "Say Hello to Grav!" zu sehen.

Die Testseite

Konfiguration

Ich stellte zunächst in meinem eigenen Profil die Sprache auf Deutsch. Wenn nämlich die Hauptsprache der Website später auf Deutsch gestellt ist und die Sprache des Admin-Profils Englisch, dann führt das zu einem seltsamen Mischmasch im Admin-Panel. Die nächste Einstellung, die ich getätigt habe, war dann auch, die Unterstützten Sprachen auf "de, en" und Default "de" zu stellen. Ich stellte den etwas verwirrend benannten Schalter "Standardsprache hinzufügen" auf "Nein". Dieser bezieht sich darauf, ob ich dann .../de/... in der URL stehen haben möchte. Außerdem setze ich die Option "Sprache vom Browser übernehmen". Ich habe relativ schnell festgestellt, dass das gefährlich sein kann, denn mein Browser war mit den Sprachen "de-de, en-us, en" konfiguriert. Das führte dazu, dass ich immer nur die englische Seite angeziegt bekam - "de-de" war ja nicht konfiguriert. Aber ich hoffe einfach, dass andere Nutzer nicht all diese Probleme mit Firefox haben.

Unter "System/Sitzung" wurde der Name der Session auf "afuchsde-site" gesetzt. Den Primärschlüssel setze ich auf den zufälligen Salt. Dieser ist unter user/config/security.yaml gespeichert und wird tatsächlich beim ersten Start von Grav zufällig erzeugt.

Im Reiter "Site" gibt es Informationen einzugeben. Die ersten sind eigentlich selbsterklärend, der "Website Titel" ist der Text, der im HTML-Title-Tag nach der Pipe kommt. Die Tag-Typen (taxonomies) behalte ich mal auf category, tag, vielleicht möchte ich später noch project hinzufügen. Mangels Kreativität setze ich die Beschreibung in den Metadaten auf "afuchs.de Website, Blog, etc..."

Weitere interessante Einstellungen:

  • Unter "System/Caching" gibt es "Gzip-Komprimierung", was die Ladezeit senken könnte.
  • Unter "System/Twig Templates" gibt es "Twig debuggen", was man ausstellen könnte.
  • Man könnte eine CSS oder JS-Pipeline nutzen.
  • Unter "System/Fehlerbehandlung" gibt es die Option "Fehler anzeigen", die die Fehlerausgabe an den Nutzer beschränken kann.

Plugins

Als nächstes will ich die Plugins konfigurieren. Im Moment sind installiert:

Admin Panel v1.9.7

Ich setze den Pfad für den Administrator-Login auf einen anderen als "/admin", damit er nicht so offensichtlich zu finden ist.

Email v3.0.2

Hier stelle ich die Mail-Engine auf "SMTP", da ich kein sendmail installiert habe, und konfiguriere das E-Mail-Konto meines Webservers. Als nächstes sende ich mit /opt/lampp/bin/php bin/plugin email test-email eine Test-Mail. Dabei stelle ich fest, dass es Sinn macht, den "Content type" auf "HTML" zu stellen, denn die Mails werden so oder so mit HTML verschickt. Im Mailclient sieht man im Zweifel halt den HTML-Code.

Error v1.6.2

Dieses Plugin zeigt die 404-Fehlerseite an, wenn dieser Fehler auftritt. Im Moment zeigt sie fett "Fehler 404" mit dem Text "Uuups. Sieht aus als ob diese Seite nicht existiert." Der erinnert mich viel zu sehr an den auf der Uni-Webseite. Ich find den einfach nicht witzig, vor allem weil man da viel zu oft drauf kommt. (Inzwischen wurde die Website der Uni überarbeitet und auch die Fehlerseite geändert.) Vielleicht ändere ich also später noch den Text. Das Problem ist, dass eben dieses störende Element vom Theme beretgestellt wird, und nicht vom eigentlichen Benutzer geschrieben werden kann.

Form v3.0.2

Form ermöglicht es, Formulare im Markdown-File zu definieren. Ich aktiviere als zusätzliche "Safety"-Maßnahme die refresh prevention. "Inline errors" ist auch noch ein interessanter Knopf, den muss ich mir später mal ansehen. Außerdem aktiviere ich bei Dateiuploads "Überschreiben verhindern", das bei Uploads ein zufälliges Prefix anhängt. Ich glaube zwar, dass ich niemals Dateiupload anbieten werde, aber Vorbeugen ist besser als auf die Schuhe kotzen!

Für ReCaptcha habe ich mir schon einen v3-API-Key geholt, den trage ich jetzt ein. Eigentlich soll ja die Website ein dunkles Farbschema haben, "Theme" lasse ich aber auf "Light", denn beim Ausprobieren führte das dunkle Farbschema nur dazu, dass die Anzeige des ReCaptcha-v3-Badge auf dem Tablet glitcht.

Login v3.0.3

Den Login benutze ich eigentlich nur für das Admin-Panel, denn ich bin ja vorerst der Einzige, der hier veröffentlicht und will keine öffentliche Kommentarfunktion bereit stellen.

Markdown Notices v1.0.1

Da bin ich mir nicht sicher, für was die sind. Toasts, also dynamische Nachrichten der Website an den Nutzer, werden im Default-Thema nämlich anders formatiert. Aber ich behalte das Pluin, vielleicht will ich ja mal so etwas wie eine Bedienungsanleitung schreiben.

Vor Reinigen des Schneidemessers Netzstecker ziehen.

Da ich schon weiß, was auf mich zu kommt stelle ich das eingebaute CSS ab, das werde ich nämlich über mein modifiziertes Thema bereitstellen.

Problems v2.0.3

Hier weiß ich auch nicht genau, was es tut. Ich glaube, Problems stellt eine Fehlerseite dar, wenn mit dem Webserver etwas im Argen ist.

Installation weiterer Plugins

Bei einigen weiteren Plugins weiß ich jetzt schon, dass ich sie benötigen werde.

Feed v1.7.1

Dient zur Bereitstellung eines RSS-Feeds auf der Blog-Seite. Die Sprache stelle ich auf de-de.

Highlight v1.4.0

Zeigt Quellcode mit Syntax-Highlighting an, wenn eine Sprache angegeben ist. Das Theme stelle ich auf "Pojoaque", da ich im Test fand, dass es gut zur Gestaltung der Website passt.

SimpleSearch v1.14.2

Stellt eine Suchfunktion im Blog bereit. Komischerweise meldet Grav nach der Installation "Plugin erfolgreich erneut installiert", obwohl es noch nicht installiert war. Für bessere Performance stelle ich ein, dass die rohen Markdown-Daten anstatt des gecachten HTML durchsucht werden sollen. Außerdem deaktiviere ich das eingebaute CSS, da dieses später von meinem Theme bereitgestellt wird.

Taxonomylist v1.33

Damit kann man eine Liste von Tags im Randbereich der Blog-Seite anzeigen lassen. Der Blog wird unter /b sein, das muss man hier einstellen.

Pagination v1.4.2

Pagination stellt die Funktion bereit, lange Listen (wie z.B. den Blog) auf mehrere Seiten aufzuteilen. Auch hier benutze ich mein eigenes CSS, das etwas dezentere Rahmen um die Knöpfe zeichnet.

Das Thema

Das vorinstallierte Thema ist "Quark", hier in der Version 2.0.1. Es hat eine schöne Einteilung der Seite und schöne Vorlagen für z.B. den Blog. Allerdings möchte ich ein dunkles Farbschema. Leider lassen sich die Farben des Themas nicht konfigurieren, es gibt eine Option, ein zweites, eigenes Stylesheet mit laden zu lassen, das den Standard überreitet.

Das ist mir aber zu kompliziert, außerdem will ich die kleineren, mit Sass generierten Stylesheets nutzen. Deshalb habe ich Quark auf Github geklont. Quark basiert auf spectre.css. Das ist im Prinzip eine gute Idee, doch schon spectre.css ist so sehr auf "Dunkler Text auf hellem Hintergrund" ausgerichtet, dass es richtig schwer wird. Ich habe erst mal sechs Arbeitsstunden damit verbracht, die als magische Zahlen eingearbeiteten Farben zu finden und ihnen Variablennamen zu geben. Das Farbschema einzuarbeiten ging dann schnell: Sass stellt wirklich tolle Funktionen bereit, um mit Farben zu rechnen.

Mein neues Theme "installiere" ich mit:

cd user/themes
mkdir quark-custom
cd quark-custom
for x in $p/web/grav-theme-quark/{assets,blueprints*,css*,fonts,images,js,languages.yaml,quark-custom.*,templates,*.jpg} 
    ln -s $x
end

(Ich benutze die fish Shell). Mit einem weiteren Klick im Admin-Panel aktiviere ich das Thema, und schon ist meine Website Schwarz-Orange. In der Einstellungsseite des Themas stelle ich noch die Blog-Seite auf /b.

Das neue Thema, auf einem Handy.

Task Scheduling

Auch noch etwas, das später wichtig werden wird: Unter "Werkzeuge/Scheduler" muss man einen cronjob konfigurieren, so dass der Cache täglich erneuert wird. Das geht auf meinem Webserver leider nicht. Ich überlege, ob ich einfach ein Skript schreibe, das sich ab und zu auf den Webserver verbindet und den Scheduler ausführt. Aber ich bin mir nicht sicher, wie viel die eingebauten Scheduled Tasks überhaupt bringen... Jeden Tag den Cache zu löschen muss vielleicht nicht unbedingt sein, wenn sich die Seite sowieso viel seltener ändert.

Previous Post Next Post