Blog

Terug

Case study: Corneel goes JAMstack met een nieuwe website

hoofdafbeelding van het artikel
  • Corneel
  • JAMstack
  • Development
Leestijd 0 min

Eind 2020 is de nieuwe website van Corneel Online gelanceerd. In het voorafgaande jaar was ik al erg geïnteresseerd geraakt in JAMstack en had besloten dat ik voornamelijk met deze ontwikkelmethode aan de slag wil voor nieuwe projecten. Mijn eigen website was na 5 jaar ook hoognodig aan vernieuwing toe, dus dat was meteen een mooie gelegenheid om JAMstack in de praktijk te brengen en de voordelen te ervaren van deze werkwijze. In dit artikel zal ik ingaan op mijn keuze voor JAMstack, de tools en technieken die ik heb gebruikt en op het uiteindelijke resultaat.

Projectdoelen

Voor de herbouw van mijn website had ik een aantal doelen vastgesteld die ik met de bouw van de website wilde behalen:

Nieuwe focus: Met deze nieuwe website sla ik met mijn dienstverlening een nieuwe richting in. Het accent ligt voornamelijk op JAMstack ontwikkeling en daarom was het nodig de inhoud van mijn website eens goed onder handen te nemen. De omschrijving van mijn diensten is veranderd. Om die reden zijn er blogartikelen verwijderd die mijn diensten niet meer ondersteunen. In plaats daarvan heb ik veel nieuwe blogartikelen geschreven. Mijn blog zet ik dan ook meer in als informatievoorziening over de verschillende aspecten van JAMstack en web development en heeft niet meer het voorkomen van een traditioneel "journal".

Opfrissen huisstijl: Ik ben erg blij met de huisstijl die Kirsten Fabels voor mij heeft gemaakt. Na 5 jaar vond ik het wel nodig om de boel op te frissen en ik heb Kirsten gevraagd om een nieuw website ontwerp te maken. Dit nieuwe ontwerp moest ook mijn nieuwe focus goed ondersteunen en ik kan niet anders zeggen dan dat ik erg tevreden ben over het resultaat.

Vue.js en Gridsome: Al mijn vorige websites maakten gebruik van een CMS dat gebaseerd was op de programmeertaal PHP. Voor mijn nieuwe website heb ik gekozen voor Gridsome, een static site generator op basis van Vue.js. De werkwijze met Gridsome is erg prettig en ik vind Vue.js een fantastisch veelzijdig framework waarmee ik nog veel opdrachten hoop uit te voeren.

Een goede oplossing voor klanten: De bouw van de nieuwe website moest een setup opleveren waarmee ook toekomstige klanten mee aan de slag kunnen. Kortom, een goed alternatief voor WordPress waarmee website eigenaren op een eenvoudige manier hun website kunnen beheren.

Content in Markdown: In Gridsome (en ook enkele andere static site generators) is het mogelijk om alle content als markdown bestanden te schrijven. Markdown is een eenvoudige syntax voor het opmaken van tekst. Tijdens het generatieproces worden deze bestanden omgezet in HTML. Het voordeel van deze werkwijze is dat inhoud gewoon in een teksteditor kan worden geschreven, maar dat je er ook een geavanceerd CMS aan kan koppelen.

Een razendsnelle website: Mijn vorige website was in WordPress gebouwd en door goede caching toe te passen presteerde deze best snel. Wat ik echt wilde (en waar JAMstack om bekend staat) is dat pagina's bijna instant laden.

Weinig tot geen onderhoud: Tot slot wilde ik af van de wekelijkse updates die een WordPress met zich meebrengt.

Het bouwproces

Nadat ik het nieuwe website ontwerp had ontvangen kon ik beginnen met de bouw. Wat direct opviel is dat alle automatismen die ik in de loop der jaren had opgebouwd met WordPress niet meer bruikbaar waren. Dat vond ik trouwens positief: ik moest weer een nadenken over features die ik anders met een plugin op zou lossen.

Een ander aspect dat mij erg goed beviel is dat je veel meer in componenten gaat denken en werken. In Vue.js (en gelijkwaardige frameworks) worden website onderdelen veel meer als losstaande componenten ontwikkeld. Zo'n component bevat de markup (HTML template), functionaliteit (Javascript) en styling (CSS).

Al met al heb ik met heel veel plezier gewerkt aan de website en er veel van geleerd. Deze werkwijze biedt een hele fijne developer experience.

Al met al heb ik met heel veel plezier gewerkt aan de website en er veel van geleerd. Deze werkwijze biedt een hele fijne developer experience.

Toch een headless CMS: Sanity

De opzet was om alle content als markdown bestanden op te maken. Tijdens ontwikkeling liep ik echter vast bij het tonen van gerelateerde content. In mijn blog wilde ik de mogelijkheid hebben om bij een artikel ook gerelateerde artikelen te tonen. Dat is een belangrijke feature en ik wilde dat op een eenvoudige manier in het CMS kunnen toepassen.

Ik kreeg dat in Forestry, een Git-based CMS dat ik gebruikte niet aan de praat. Het was wel mogelijk om een koppeling te maken met andere artikelen, maar het lukte mij niet om van die artikelen de inhoud op te halen met behulp van GraphQL. Dat was jammer, want Forestry is verder een heel prettig CMS dat werken met markdown bestanden perfect ondersteund.

Als oplossing heb ik gekozen voor Sanity als headless CMS. Sanity is voor kleinere projecten zoals deze gratis te gebruiken. Het vereist wel wat werk om alles in te richten, maar als het eenmaal draait is het een heel prettig CMS en het ziet er nog goed uit ook.

Hosting bij Netlify

Deze website is een zogenaamde statische website. De hosting heb ik ondergebracht bij Netlify, een van de populairste platvormen in de JAMstack wereld.

Het resultaat

Aan het einde van de bouw kon ik de balans opmaken. Ik had er veel zin in en ik ben blij verrast met het resultaat. De doelen die ik vooraf heb gesteld zijn behalve de markdown content allemaal behaald. En dankzij het gedoe met markdown heb ik een fantastisch nieuw CMS leren kennen.

De website is lekker snel dankzij alle optimalisaties die Gridsome toepast tijdens het generatieproces.

Al met al heb ik een website waar ik weer jaren mee vooruit kan.

Is jouw website aan vervanging toe?

Misschien is deze JAMstack oplossing ook wel heel geschikt voor jouw organisatie. In een persoonlijk gesprek kan ik je verder informeren.

Neem contact op

Wat houdt je bezig?

Heb jij een interessant project?
En wil je erover praten?

Of je nou een starter bent of een doorgewinterd bedrijf, ik hoor het graag als je een leuke uitdaging voor me hebt.

Marco Verheul
T. 06 2846 1106
E. marco@corneelonline.nl