Website zonder database bouwen met flat-file CMS
Wil je een eenvoudige website of blog opzetten, dan is een volledig CMS met database soms wat overdadig. Een zogeheten flat-file CMS werkt met platte bestanden, wat opvallend veel voordelen met zich meebrengt. Wil je een website zonder database bouwen? In dit artikel leggen we uit hoe dat werkt.
Een contentbeheersysteem, ofwel CMS, werkt meestal in combinatie met een database. In veel gevallen is dat MySQL of het compatibele MariaDB, maar ook bijvoorbeeld SQLite en PostgreSQL kom je tegen. Dit brengt enkele nadelen met zich mee. Niet iedereen heeft om te beginnen de kennis om een database te maken, beheren en beveiligen. Een CMS zoals WordPress neemt weliswaar veel werk uit handen, maar niet de beheertaken. Daardoor kan bijvoorbeeld het verhuizen van je blog een flinke uitdaging zijn.
Tegenwoordig bestaan er talloze op platte bestanden gebaseerde CMS’en die zonder database werken. We noemen ze ook wel flat-file CMS. Zeker voor een eenvoudige website bieden ze meer dan voldoende mogelijkheden, naast het extra gemak en veel hogere prestaties. Om laatstgenoemde reden ligt een flat-file CMS steeds vaker ook aan de basis van zeer drukbezochte websites. In deze masterclass leggen we uit wat de voor- en nadelen zijn, bespreken we de bekendste systemen en laten we zien hoe snel en makkelijk je ermee aan de slag kunt.
Voor- en nadelen
Eerlijk is eerlijk: aan een CMS met database ontkom je in sommige gevallen niet. Zo kun je er bij een heel uitgebreide website niet omheen. Dat geldt ook voor bijvoorbeeld blogs met verschillende auteurs of een webshop met veel producten. Tegelijkertijd is juist voor een eenvoudige website met één of enkele pagina’s, een niet te complexe blog of een online portfolio een CMS zoals WordPress vaak weer overdadig. Een CMS die met platte bestanden werkt, geeft je meer dan genoeg mogelijkheden en is veel makkelijker te gebruiken en te beheren. Bovendien werkt de uiteindelijke website vaak vele malen sneller. Ook op een licht systeem als een Raspberry Pi kun je dit hosten. Je bespaart dus vaak kostbare servercapaciteit.
Een simpele webserver kan enorme bezoekersaantallen verwerken. Het verschil met bijvoorbeeld WordPress is enorm. Een CMS met database zal namelijk elke pagina dynamisch genereren, waarbij op de achtergrond veel verzoeken aan de database worden gedaan. Hoewel caches dat kunnen versnellen, vraagt dat weer om extra geheugencapaciteit. Je merkt zeker een vertraagde paginaopbouw ten opzichte van een flat-file CMS. Nog een voordeel is dat je alle content relatief eenvoudig kunt bewaren in een versiebeheersysteem zoals Git – al dan niet in combinatie met GitHub – waar we in het volgende nummer van PCM in zullen duiken. Je hele website bestaat immers uit platte bestanden. Het merendeel van deze oplossingen is tot slot ook nog opensource.
©PXimport
Welke systemen?
Bij CMS’en met een database die je zelf kunt hosten, voeren WordPress, Joomla en Drupal al jaren de boventoon. In de wereld van flat-file CMS’en is het echter een komen en gaan van oplossingen. Bekende voorbeelden zijn Grav, Jekyll, Kirby, Bludit, Statamic, Typemill, Pico en Automad. Een voordeel van dit soort oplossingen is dat er veel minder beheertaken zijn. Je hoeft niet, zoals bij WordPress, steeds te zorgen dat alle software en plug-ins up-to-date zijn. Uiteraard is het wel belangrijk om de achterliggende toepassingen up-to-date te houden, omdat er kwetsbaarheden in kunnen zitten.
Dat geldt weer niet of nauwelijks voor systemen die van je content simpelweg statische html-pagina’s maken, die vervolgens in de www-map van de webserver worden gezet. Dat gaat met één simpel commando via een opdrachtregel. Dat is bijvoorbeeld hoe Jekyll werkt. De systemen die we hier bekijken, maken gebruik van php als hulpje, maar werken uiteraard met platte bestanden en zonder database. Met behulp van Git of een pakketbeheerder Composer zijn ze relatief eenvoudig te installeren en ook up-to-date te houden. Een webserver is niet nodig, omdat we de ingebouwde server van php gebruiken, maar je kunt natuurlijk ook Apache of Nginx gebruiken.
©PXimport
Wat te kiezen?
Je kunt de genoemde systemen relatief eenvoudig uitproberen. Ze zijn over het algemeen heel goed gedocumenteerd. Het zal je zeker helpen een goede keuze te maken. Het systeem dat we wat uitgebreider behandelen is Typemill, dat vooral is gericht op schrijvers en ‘micro-uitgevers’. Hiermee kun je eenvoudig een handleiding, kennisbank, e-book of documentatie maken. Wil je een normale, standaard website bouwen, een eenvoudige blog of een website van één enkele pagina, die in no-time online staat, dan is Bludit een goede optie. Wil je het nog simpeler houden, dan kun je Pico CMS overwegen. Je hebt daarin geen zogeheten front-end (zoals een controlepaneel) voor het beheer van je content. Je wordt dus meer overgelaten aan een structuur van mappen en platte bestanden.
Voor commerciële bedrijfswebsites kun je denken aan wat geavanceerdere oplossingen als Statamic, Kirby en Grav. Die laatste richt zich wel meer op ontwikkelaars en is voor niet-techneuten wat complexer. In deze masterclass komt Typemill zoals gezegd wat uitgebreider aan bod, maar laten we ook zien hoe makkelijk je van start gaat met Pico CMS, Grav en Bludit. Wat ze allemaal gemeen hebben, is dat ze php als basis gebruiken.
©PXimport
Basissysteem
Als uitgangspunt voor deze masterclass nemen we een eenvoudige Linux-server op basis van Ubuntu 20.04. We loggen daarop in met een normaal gebruikersaccount met sudo-rechten. Zorg dat het systeem up-to-date is met:
sudo apt-update
sudo apt-upgrade
Corrigeer indien nodig de tijdzone met de opdracht:
sudo dpkg-reconfigure tzdata
Voor de genoemde systemen is php nodig. Er is meestal een sterke voorkeur voor php 7.x vanwege de flink hogere prestaties. Deze versie is tegenwoordig heel gangbaar en staat ook in de standaardpakketbronnen van recente edities van Ubuntu. Om te controleren welke versie van php voor jouw systeem beschikbaar is, voer je deze opdracht uit:
sudo apt-cache policy php
Op ons systeem is dat php 7.4.x, dat we samen met enkele aanvullende pakketten installeren met de opdracht:
sudo apt install php php-cli curl git unzip
Afhankelijk van het CMS dat je gaat gebruiken, kunnen er extra php-modules nodig zijn. De modules die nodig zijn voor de in deze masterclass besproken CMS’en voegen we in één handeling toe met:
sudo apt-install php-mbstring php-xml php-curl php-zip php-gd
Webserver testen
Hoewel je een webserver als Apache of Nginx kunt gebruiken, wat in een productieomgeving ook valt aan te raden, kun je voor demonstratiedoeleinden uitstekend de ingebouwde server van php gebruiken. Om de werking te demonstreren, maken we in de thuismap een mapje, waar we vervolgens naartoe navigeren, met de opdrachten:
mkdir ~/cms
cd ~/cms
We maken met de opdracht nano info.php een bestand met de volgende regels:
<?php
phpinfo();
?>
Bewaar het bestand met Ctrl+O en verlaat de editor met Ctrl+X. We starten nu de interne webserver van php met:
php -S 0.0.0.0:8000
Het adres 0.0.0.0 zorgt dat de webserver vanaf elke browser in het netwerk toegankelijk is, dus niet alleen vanaf het systeem zelf (localhost). Je kunt met de webserver php-bestanden aanbieden, maar ook gewone bestanden zoals html-documenten. In ons voorbeeld, waarbij de server het ip-adres 10.0.10.25 heeft, kunnen we de pagina info.php bereiken via http://10.0.10.25:8080/info.php. Deze pagina geeft informatie over php en de geïnstalleerde modules. In de console zie je een log met alle http-verzoeken. Je kunt hierin de uitvoering stoppen met Ctrl+C om weer de controle over de console te krijgen.
©PXimport
Composer installeren
Composer is een heel praktische tool. Deze bekende pakketbeheerder voor php gaan we gebruiken bij de installatie van Typemill. Om Composer te installeren, gaan we naar onze homedirectory met cd ~ en halen vervolgens het installatiescript voor Composer op met:
curl -sS https://getcomposer.org/installer -o composer-setup.php
Vervolgens installeren we het met:
sudo php composer-setup.php --install-dir=/usr/local/bin --filename=composer
Na de installatie kun jij (en elke andere gebruiker) de tool vanaf elke locatie starten met simpelweg de opdracht composer gevolgd door de gewenste parameters.
©PXimport
Documentatiesite
Als eerste voorbeeld gebruiken we Typemill om documentatie te genereren. Deze mogelijkheid is vooral voor tekstschrijvers en gebruikers bedoeld die bijvoorbeeld handleidingen, jaarboeken en gebruikershandleidingen willen maken. Typemill is ook heel sterk in de combinatie van web- en printpublicaties. We maken eerst een map aan waarin we Typemill en straks ook de andere systemen gaan installeren (elk in een eigen map), waar we vervolgens naartoe navigeren, met de opdrachten:
mkdir -p ~/cms
cd ~/cms
Installeer vervolgens Typemill vanaf Git met:
git clone "https://github.com/typemill/typemill.git"
Er wordt een mapje Typemill gemaakt, waar je naartoe gaat met:
cd typemill
De volgende stap is het installeren van de vereiste bibliotheken via Composer. Deze zijn al opgenomen in het bestand composer.json. Met deze opdracht worden ze automatisch geïnstalleerd en/of bijgewerkt:
composer update
Start daarna de webserver met:
php -S 0.0.0.0:8000
Als je het adres in de browser bezoekt (in ons voorbeeld http://10.0.10.25:8000) kom je op een setuppagina waar je direct een beheeraccount kunt maken. Hierna zie je een landingspagina waar je via een knop de instellingenpagina binnen de beheeromgeving voor de website kunt openen.
©PXimport
Instellingen
Voor onze demowebsite veranderen we onder Instellingen / Systeem alleen de titel en auteur. Bewaar de wijziging en ga rechtsboven naar Site bekijken. Zoals je ziet, is er de nodige voorbeeldcontent waar we mee gaan werken, een soort grondige uitleg van het systeem. We raden je aan deze voorbeelden door te lezen. Zo vind je bijvoorbeeld handige syntaxvoorbeelden voor Markdown, de opmaaktaal die door Typemill wordt gebruikt en door veel andere flat-file CMS’en,. Ook op GitHub en Reddit kom je deze taal tegen. Ben je nog niet zo bedreven in Markdown, dan kun je overigens ook gewoon de visuele editor van Typemill gebruiken.
We gaan terug naar de beheeromgeving, die bereik je door /tm/login achter het adres te zetten. Volg dan de link naar Inhoud. Links zie je een overzicht met de verschillende pagina’s van je website en hoe deze zijn gestructureerd via mappen en bestanden. Je kunt het vergelijken met de hoofdstukken en pagina’s van een boek. De volgorde kun je naar voorkeur veranderen door items te verslepen. Rechts zie je verdeeld over twee tabbladen de inhoud van de gekozen pagina en metagegevens. Op het tabblad meta kun je bijvoorbeeld metagegevens voor Google instellen of met een vinkje voorkomen dat de pagina in het navigatiemenu wordt getoond.
©PXimport
Inhoud bewerken
Als voorbeeld voegen we via Item toevoegen een bestand toe dat we de naam contactgegevens geven. Klik erop om deze pagina te bewerken. Er zijn al een titel en paragraaf ingevuld, die je kunt bewerken door erop te klikken. Wat je hier ziet, is de standaard visuele editor. Via knoppen kun je eenvoudig extra paragrafen, headers van klein tot groot (binnen html beter bekend als h1, h2 en h3), lijsten, code, tabellen, lijsten, quotes, afbeeldingen of links toevoegen.
Op de achtergrond werkt Typemill zoals gezegd met Markdown. De opmaak kun je zien als je via de knop onbewerkte modus omschakelt. Meestal zal de visuele editor de voorkeur krijgen. Tabellen zijn bijvoorbeeld erg lastig te maken in Markdown, terwijl je ze met de visuele editor in een handomdraai hebt gemaakt. Datzelfde valt te zeggen voor afbeeldingen, die je met de visuele editor gewoon kunt uploaden vanaf je pc of selecteren in de mediabibliotheek.
Elke pagina kan ook zijn eigen inhoudsopgave hebben. Je kunt bovenaan zo’n inhoudsopgave toevoegen (Table of Contents), die vervolgens de verwijzingen naar alle headers in je artikel laat zien op het betreffende niveau (zoals h1, h2 of h3). Ook binnen langere pagina’s kun je zodoende een goede structuur aanbrengen.
©PXimport
Publiceren
Als je klaar bent met het bewerken van een pagina, kies je Publiceren. Je ziet dat in je paginaoverzicht het blokje voor de paginatitel nu groen wordt in plaats van rood. Als het blokje oranje is betekent het dat je een pagina hebt bewerkt, maar de wijzigingen nog niet hebt opgeslagen. Het kán natuurlijk dat je met Typemill geen boek wilt maken, maar bijvoorbeeld een site met nieuwtjes of een blog met allerlei berichten. In dat geval kun je op een map klikken en dan bij de metagegevens instellen dat deze map geen pagina’s maar aparte posts bevat. Deze worden dan op datum gesorteerd in het overzicht, in plaats van een handmatig te kiezen volgorde.
Thema’s en plug-ins
Als je naar Instellingen / Themes gaat, kun je een thema kiezen en enkele instellingen voor het thema veranderen. Je kunt ook een van de andere thema’s downloaden. Verder voeg je onder Plug-ins extra features toe. Voor een overzicht van plug-ins bezoek je de store bezoeken op https://plugins.typemill.net. Het meest interessant is de plug-in die van je website (of geselecteerde onderdelen) een pdf- of epub-document kan maken. Daarbij kun je bovendien uit verschillende lay-outs kiezen.
Het installeren van plug-ins wordt niet heel duidelijk uitgelegd, maar is niet moeilijk. Als voorbeeld voegen we de plug-in toe voor het maken van e-books. Hiervoor gaan we met naar de hoofdmap van Typemill:
cd ~/cms/typemill
En maken we een mapje voor plug-ins met:
mkdir plugins
Blader achtereenvolgens naar die map en download het zip-bestand van de plug-in naar ebooks.zip met:
cd plugins
wget -O ebooks.zip https://plugins.typemill.net/download?plugins=ebooks
Vervolgens pakken we het zip-bestand uit met:
unzip ebooks.zip
Als je naar de instellingenpagina gaat, kun je deze activeren en instellingen aanpassen. Onder General Settings zetten we beide vinkjes aan, zodat we extra verwijzingen krijgen voor het genereren van e-books. In de volgende paragraaf laten we zien hoe dat in zijn werk gaat.
©PXimport
E-book genereren
Op de instellingenpagina vind je een nieuw onderdeel Ebooks. Hiermee maak je van je website een pdf- en/of epub-document. Let erop dat deze tool alleen onder Google Chrome en andere op Chromium gebaseerde browsers werkt. Als eerste kies je de gewenste lay-out. Afhankelijk van de gekozen lay-out kunnen er extra instellingen zijn. De twee bestaande lay-outs zijn vooral aanwezig om de mogelijkheden van de plug-in te demonstreren. Je kunt er namelijk ook voor kiezen om een eigen lay-out te maken.
Als voorbeeld kiezen we typemill. In de volgende stap bij settings kun je onder andere een titel, auteursnaam en enkele omschrijvingen invullen en een coverafbeelding kiezen. Je kunt een automatisch gegenereerde inhoudsopgave toevoegen, en de kleuren instellen. In de sectie content kies je welke pagina’s in je e-book moeten worden opgenomen. Standaard zullen alle pagina’s worden gebruikt. Hierna vind je onder epub nog enkele velden specifiek voor epub-bestanden.
Ten slotte kun je een pdf-preview bekijken. Controleer of alles naar wens is. In Chrome kun je de preview als pdf-bestand bewaren via het Menu (met de drie puntjes) en Afdrukken (Ctrl+P) en de optie Opslaan als pdf. Zorg dat bij Marges de optie Geen is geselecteerd en dat er een vinkje staat bij Achtergrondafbeeldingen.
©PXimport
Alternatieven
We zullen ten slotte nog kort de installatie van enkele alternatieven behandelen, in dit geval Bludit, Grav en Pico. Deze zijn net zo eenvoudig te installeren als Typemill. Bludit kun je als eenvoudig alternatief voor WordPress zien. Grav en Pico werken met bestanden in het Markdown-formaat. Grav is wat complexer, maar heel flexibel uit te breiden. Bovendien kun je alles optioneel via een controlepaneel beheren. Pico biedt dat niet, en kijkt simpelweg naar bestanden en mappen in een specifieke contentmap. In dat geval gebruik je dus je favoriete teksteditor om je content te schrijven.
Terwijl Bludit gewone php-tags gebruikt voor dynamische inhoud, werken Grav en Pico met het uitgebreidere templatesysteem Twig. Je kent dit misschien van enkele geavanceerdere CMS’en zoals Craft, Bolt en October. Het is zeker de moeite waard om deze templatetaal te leren als je je eigen templates wilt maken of om je bestaande html-templates aan te passen, zodat je deze kunt gebruiken binnen één van de genoemde CMS’en.
Alternatieven installeren
Om Bludit te installeren, gebruiken we Git om de zogeheten repository van dit CMS te klonen. Hiervoor gaan we met cd ~/cms naar de map die we voor al onze toepassingen hadden gemaakt en geven dan de volgende opdracht:
git clone https://github.com/bludit/bludit.git
Bludit is hiermee in een onderliggend mapje gezet dat je benadert met cd bludit. Vervolgens kun je de ingebouwde webserver van php starten met:
php -S 0.0.0.0:8000
Bezoek met je browser het websiteadres om bij een installatiepagina van Bludit te komen. Hier selecteer je eerst een taal en stel je vervolgens een wachtwoord in voor de admin-gebruiker. De beheeromgeving van Bludit bereik je vervolgens door /admin achter de url te zetten. Je ziet een heel eenvoudige omgeving waarin je content kunt beheren. Dit spreekt grotendeels voor zich. Om de uitstraling van je website te veranderen, vind je op https://blthemes.pp.ua diverse gratis thema’s. Je kunt ze uiteraard ook zelf maken.
©PXimport
Grav en Pico
Om Grav te installeren, gaan we met cd ~/cms eerst weer naar de basismap en geven vervolgens de opdracht:
composer create-project getgrav/grav grav
Ga dan naar deze map met en start de ingebouwde webserver starten met:
cd ~/cms/grav
bin/grav server
Bij Grav stel je alles in via configuratiebestanden en beheer je de content beheren in de vorm van losse bestanden met Markdown-opmaak. Optioneel installeer je via een plug-in een geavanceerd controlepaneel.
Pico werkt volledig zonder zo’n front-end voor het beheer van je site. Om dit CMS te installeren ga je weer met cd ~/cms naar de basismap en geef je de opdracht:
composer create-project picocms/pico-composer pico
Blader naar de nieuw aangemaakte map met cd pico en start de webserver van php met:
php -S 0.0.0.0:8000
Als je het adres bezoekt met je browser, zie je een informatiepagina van pico. Zodra je zelf een bestand index.md in de map content aanmaakt, zal Pico die pagina laten zien.
©PXimport
