For simple websites I like to use Kirby: a flat-file CMS written in PHP.
What is a Flat-File Content Management System?
With a flat-file content management system, text content is stored exclusively in files. More about this on CmsCritic.
To start a local PHP server for the development, you usually use programs like XAMPP or MAMP, because they bring along a local web server and a database (mostly MySQL).
Since Kirby doesn't need a database connection (as a flat-file CMS it doesn't need a database), you can also run it on the PHP built-in server, so you don't need XAMPP or MAMP:
This has worked fine for me so far but please have a look at the notes on the Kirby website regarding this topic.
For a nicer development experience, I prefer to have a live reload server running that refreshes the page on file change.
Fortunately, this is functionality can be added relatively easy using the JavaScript package manager NPM. In addition to package management, it also offers another useful functionality: The simple execution of scripts via npm run
.
To get started, add a package.json
file in the root directory of the Kirby project (it can be generated with npm init
).
After that install the packages browser-sync and concurrently with npm install --save-dev browser-sync concurrently
.
Next, create a file called browsersync.js
, in the root directory of the project, with the following content:
In this file the browser sync server is started, with the options defined in the package.json
. More information about the possible options can be found on the documentation page of Browsersync.
Before you can start the server, some changes have to be made in the `package.json' file:
The entries in detail:
scripts
:serve-php
Starts the build-in PHP webserver and supresses all200
messages (the console output is very verbose)sync
Starts the BrowserSync serverserve
Startsserve-php
andsync
simultaneously- Under 'browserSync' the options for the browser sync server are defined:
proxy
: The address of the PHP serverwatch
: The folders that BrowserSync should watch. If a file in them changes, the page is reloadedignore
: Files that should not trigger a reload
If everything has worked, you can now use
npm run serve
to start the project. A new browser window with the project should open automatically.
Important note: BrowserSync only works if there is a <body>
element in the delivered HTML (more information here).
Leave a comment
Replied on your own website? Send a Webmention!