Für einfache Webseiten setze ich gerne Kirby ein: das ist ein flat-file CMS, das in PHP geschrieben ist.
Was ist ein Flat-File Content Management System?
Bei einem Flat-File Content Management System werden die Textinhalte ausschließlich in Dateien gespeichert. Mehr dazu auf Wikipedia.
Um für die Entwicklung einen lokalen PHP-Server zu starten, setzt man in der Regel Programme wie XAMPP oder MAMP ein, da diese neben einem lokalen Webserver auch eine Datenbank (meist MySQL) mitbringen.
Da Kirby keine Datenbankanbindung benötigt (als Flat-File CMS benötigt es keine Datenbank), kann man es auch über den in PHP eingebauten Server laufen lassen, und ist so nicht auf XAMPP oder MAMP angewiesen:
Das hat bei mir bis jetzt immer einwandfrei funktioniert (dazu bitte die Hinweise auf der Kirby-Webseite beachten), allerdings hätte ich zum komfortablen Entwickeln gerne noch eine Live-Reload-Funktionalität.
Glücklicherweise lässt sich diese über den JavaScript-Packagemanager NPM relativ einfach nachrüsten, denn neben der Paketverwaltung bietet NPM noch eine weitere, praktische Funktion: Das einfache Ausführen von Scripts per npm run
.
Dazu ist zunächst eine package.json
Datei im Rootverzeichnis des Kirby-Projekts notwendig (falls noch nicht vorhanden kann sie per npm init
erstellt werden).
Danach sollten per npm install --save-dev browser-sync concurrently
die beiden Pakete browser-sync und concurrently installiert werden.
Als nächstes eine Datei namens browsersync.js
, im Rootverzeichnis des Projektes anlegen, mit folgendem Inhalt:
In dieser Datei wird der Browsersync Server gestartet, mit den in der package.json
definierten Optionen. Weitere Informationen zu den möglichen Optionen gibt es auf der Dokumentationsseite von Browsersync.
Bevor man den Server starten kann, müssen in der package.json
Datei noch ein paar Änderungen vorgenommen werden:
Die Einträge im einzelnen:
- Unter
scripts
: serve-php
Startet den in PHP eingebauten Webserver und unterdrückt alle200
Access logs (sind sehr viele)sync
Startet den BrowserSync Serverserve
Startetserve-php
undsync
gleichzeitig- Unter
browserSync
werden die Optionen für den Browsersync Server definiert: proxy
: Die Adresse des PHP Serverswatch
: Die Ordner, die BrowserSync beobachten soll. Falls sich darin eine Datei ändert, wird die Seite neu geladenignore
: Dateien, die keinen Reload auslösen sollen
Falls alles funktioniert hat, kann man jetzt per
npm run serve
das Projekt starten. Es sollte sich automatisch ein neues Browserfenster mit dem Projekt öffnen.
Wichtig dabei: BrowserSync funktioniert nur, wenn es in dem ausgelieferten HTML ein <body>
-Element gibt (weitere Informationen dazu hier).
Hinterlasse einen Kommentar
Auf der eigenen Website geantwortet? Sende eine Webmention!