Erfahrungsbericht: WordPress 2 Grav

WordPress nervt, oder?

Aber eigentlich nerven die vielen Hacker-Angriffe und die ständigen Updates. Denn es gibt für WordPress nicht nur sehr viele Plug-Ins sondern dadurch auch potentiell sehr viele Schwachstellen und entsprechende Updates.

Also habe ich nach Alternativen gesucht:

Ich habe mich dann für GRAV entschieden:

  • führendes "open source flat-file CMS"
  • Seiten in Markdown und twig-Templates fürs Layout und PHP sagen mir zu
  • Die Demo passt zu meinen Anforderungen: blog Demo
  • Die Doku hat einen guten Eindruck gemacht: Doku
  • Die testweise Installation gelang ohne Hürden: Installation
  • Es gibt, bzw. gab, einen WordPress-Export für grav.

Und ich habe mir zugetraut, das Layout der Test-Installation (antimatter-Template) mit wenigen CSS-Änderungen an meine Vorstellungen anzupassen. Das sollte nicht zu aufwändig werden! Es existieren zwar noch weitere Themes, die habe ich aber nicht geprüft. Ich bin bei antimatter geblieben und mit dem Ergebnis sehr zufrieden.

In der grav-Doku und im Internet habe ich zwar alle benötigten Informationen für den Umstieg auf grav gefunden, aber manchmal hat es etwas gedauert. Daher habe ich mich entschlossen, meine Erfahrungen mit grav hier für alle aufzuschreiben, die auch auf grav umsteigen wollen, um ...

  • grav besser einschätzen zu können,
  • den Aufwand besser einschätzen zu können,
  • Fallstricke leichter überwinden zu können.

Ich hoffe also, ihr findet hier hilfreiche Tipps und seid am Ende auch mit eurem Ergebnis zufrieden.

Hinweis: Hier gibt's nur Tipps, als Ergänzung zur offiziellen Doku. Ihr kommt um das Lesen der Doku nicht herum, wenn ihr auch auf grav umsteigen wollt..

Aber Fallstricke gibt es schließlich in jedem CMS. Also los geht's ...

Schritt für Schritt

Ich bin weiter wie folgt vorgegangen:

1. WordPress-Export

Das wp2grav-WordPress-Plugin ist leider nicht mehr verfügbar, aber das GitHub-Repository https://github.com/SiteBeez/wordpress-wp2grav-markdown-exporter existiert noch. Damit konnte ich meine WordPress-Inhalte einigermaßen exportieren. Die Markdown-Dateien landen unter /wp-content/uploads/wp2grav/export und können von dort in die grav-Verzeichnisstruktur kopiert werden.

Einschränkungen, die ich festgestellt habe:

  • Kategorien und Tags erfordern Nacharbeiten
  • Bilder werden mit der alten, absoluten WordPress-URL eingebunden und müssen manuell ins jeweilige pages-Verzeichnis oder user/pages/images kopiert und dann in den Seiten relativ verlinkt werden.
  • Manche Links, auch zwischen Seiten, verwenden absolute URLs, verweisen auf die alten WordPress-Seiten und müssen manuell korrigiert werden.
  • Der "Weiterlesen"-Marker muss manuell in die Grav-Pages eingefügt werden: Summary Size and Separator.
  • … und weitere Anpassungen (siehe unten)

Das Grundgerüst der Seiten konnte ich also gut aus WordPress exportieren, aber Nacharbeit ist nötig ...
Ich habe die Nacharbeit auch genutzt, um die Seiten aufzuräumen, externe Links zu korrieren, überflüssiges zu entfernen usw. Das war sowieso nötig.

Alternativ könnt ihr auch nach anderen WordPress-To-Markdown-Exportern suchen, z.B. für andere CMS, die auch Markdown für die Texte verwenden.

2. CSS-Anpassungen

Die Theme-Styles können in user\themes\antimatter\css\custom.css ergänzt und überschrieben werden: Custom CSS. Empfohlen wird allerdings die Ableitung eines Kind-Templates: Theme Inheritance. Das ist einfach und man kommt auch nicht drum herum, wie ich später festgestellt habe: Die Änderung der rechten Spalte (sidebar) oder des Footers erfordert eine Vererbung oder Änderung des Templates.

Hinweis: Aus mir unerfindlichen Gründen wurden meine Custom-CSS-Änderungen erst dann vom Browser berücksichtigt, als ich eine "leere" CSS-Anweisung davor gesetzt habe, "to activate", z.B.

#body img {
    // to activate img
}
#body img.right {
  margin: 0 0 20px 20px;
  max-width: 47%;
}

Mit der Anpassung von Custom SCSS/LESS habe ich mich nicht beschäftigt.

3. Blog-Grund-Einstellungen

Die Grundeinstellungen werden in system/config/system.yaml System Configuration und system/config/site.yaml Site Configuration vorgenommen und sind gut dokumentiert.
Nur über die Sprach-Einstellungen bin ich gestolpert. Damit meine Seiten in deutsch dargestellt werden, z.B. "weiterlesen" statt "continue reading", waren die folgenden Anpassungen nötig:

  • system\config\site.yaml: default_lang: de
  • system\config\system.yaml unter languages:
    • supported: [de]
    • include_default_lang: false

4. Bilder

Das antimatter-Theme zeigt das erste Bild im Page-Ordner automatisch als Header-Bild an. Dies kann mit header_image: false in der .md-Datei der Seite abgeschaltet werden.
Alternativ können Bilder z.B. unter user/pages/images oder user/images abgelegt werden, statt im Page-Ordner.

Die Bilder erscheinen nach dem WordPress-Export im "Fließtext" und können über CSS-Klassen positioniert werden. Die Bild-Anzeige wird über URL-Parameter gesteuert.
Hier ein paar Beispiele:

Vortrag Ralf Lütke
Demo-Bild mit Beschreibung

  • Bild rechtsbündig, Text links umfließend:
  • Bild rechtsbündig mit Beschriftung und Plugin image-captions
  • Bild mit Lightbox und Plugin featherlight
  • Bild rechtsbündig mit Lightbox und Beschriftung
  • Bild rechtsbündig mit Lightbox, mit Titel, ohne Beschriftung

Und hier die zugehörigen Markdown-Befehle:

![Vortrag Ralf Lütke](../../images/wmfra-vortrag.jpg?classes=right)
![Vortrag Ralf Lütke](../../images/wmfra-vortrag.jpg?classes=caption,figure-right "Webmontag Frankfurt")
![Vortrag Ralf Lütke](../../images/wmfra-vortrag.jpg?lightbox=800&resize=200)
![Vortrag Ralf Lütke](../../images/wmfra-vortrag.jpg?lightbox=800&resize=200&classes=caption,figure-right "Webmontag Frankfurt")
![Vortrag Ralf Lütke](../../images/wmfra-vortrag.jpg?lightbox=800&resize=200&classes=right "Webmontag Frankfurt")

Es sind also grav-Plugins nötig, um Bilder so anzeigen zu können. Die oben genannten Plugins habe ich - auch im Zusammenspiel - erfolgreich getestet. Infos über Einschränkungen und Erweiterungsmöglichkeiten findet ihr auf den verlinkten Plugin-Seiten.

Hinweis: Manchmal musste ich Bilder unter anderem Namen neu abspeichern, damit sie in der richtigen resize-Größe angezeigt wurden. Vermutlich hat hier das eigentlich intelligente Caching von grav dazwischen gefunkt. Manchmal hilft es auch, die Cache-Verzeichnisse zu löschen: Clearing Grav Cache

  • /images
  • /cache
  • /user/data

Hinweis: Die caches können auch über die Kommandozeile oder das Admin-Dashboard gelöscht werden.

5. Plugins

Zusätzlich habe ich die folgenden Plugins installiert:

Weitere Plugins findet ihr unter https://getgrav.org/downloads/plugins.

6. Mehr als Markdown

In den Markdown-Dateien ist übrigens mehr möglich:

7. Server-Probleme

Die offizielle Doku gibt viele Hinweise, auch ein extra Kapitel Troubleshooting bei Server-Problemen.
Ich hatte z.B. fehlende Schreibrechte auf dem Live-Server und bei mir hat dann der folgende Befehl geholfen:

chmod g+w assets/ backup/ cache/ images/ logs/ tmp/ user/data/

Daraufhin wurde das "Prüfergebnis" des Plugins problems angezeigt und ich konnte die Seiten auch live ans Laufen kriegen. (Dieses Plugin und weitere waren bei mir von Anfang an installiert.)

8. Admin-Tool nur in Entwicklung

Zusätzlich gibt es noch das komfortable Administration Panel, über das z.B. Plugins aktualisiert oder Seiten erstellt und bearbeitet werden können.

Wer auf dem Live-System eine andere Konfiguration haben möchte als auf der Entwicklungssystem, der kann abweichende Environment Configuration einrichten. Ich habe z.B. das Admin-Panel generell abgeschaltet und es nur lokal eingeschaltet:

  • user\plugins\admin\admin.yaml mit enable: false
  • user\localhost\config\plugins\admin.yaml mit enable: true

9. Kommentarfunktion

Das gibt es in einem flat-file-CMS leider nicht und man muss auf "externe" Lösungen ausweichen. Aber diese Thema habe ich für mich auf später verschoben … grav-comments-plugin, Disqus-Alternativen, Alternatives For Disqus?.

Schlussbemerkung

Hmm, es war doch mehr Arbeit, als ich dachte. Aber alles hat für meine Anforderungen eines einfachen Blogs ohne große Umwege geklappt. Und mit diesen Tipps wäre es noch schneller gegangen.

Rückmeldung übers Kontaktformular Ich hoffe, meine Erfahrungen sind hilfreich
und für Rückmeldungen bin ich dankbar!

Vorheriger Beitrag