Deze website is altijd een beetje ondergeschoven geweest. Er stonden wel wat posts in maar ik heb er nooit veel naar gekeken. Het was een hele simpele Astro gebouwde static website omdat ik een keertje wou weten hoe een website (in zijn simpelste vorm) in elkaar zat.

Astro is een simpel framework om sites te schrijven en er was een hele goede start template te downloaden van Manuel Ernesto

Met deze template en mijn ict kennis had ik dus relatief snel een leuke portfolio online zonder veel werk. Gewoon wat markdown bestanden en de site op Azure static sites gooien.

Nu komt er een periode aan waar ik kennis moet hebben van het programma StoryBlok, een CMS (Content Managment System) voor een zogenaamde headless website.

Wat houdt dat in? Een headless website is een type website-architectuur waarbij de frontend (wat gebruikers zien en waarmee ze interacteren) losgekoppeld is van de backend (de server en database die de websitegegevens beheren). Bij traditionele websites, zoals WordPress-sites, is de frontend (de 'head') nauw verbonden met de backend, waardoor elke verandering aan de gebruikersinterface direct van invloed kan zijn op de backendfunctionaliteit.

In het geval van een headless website worden de frontend en backend losgekoppeld door middel van API's (Application Programming Interfaces). Dit betekent dat wat je hier leest niet van hier komt. Deze site staat (nu) bij Vercel maar de inhoud haalt hij op bij Storyblok, behalve de CV die haalt hij weer op bij een andere plek.

Ging zoals gewoonlijk niet zoals gepland. Astro is wat jonger als de grote frameworks zoals React. Maar ik zet mijzelf altijd een beetje tegen de grootheden af, en zie in Astro ook een mooier (lees beter) platform. Maar dat is mijn eigen mening. Het nadeel van een jonger platform is geen hulp en weinig documentenatie.

Ook was er net de 'grote' Astro 4.0 release en een major version verhoging geeft altijd wel een beetje remoer. Dus ik had de Astro.Build site er bij gepakt

En dacht het relatief makkelijk te kunnen ombouwen omdat er geweldig staat 'Official CMS Partner'. Dus de integratie tutorial doorlopen en dat ging best wel vlot, ik had al snel de Teaser, Grid, en Features staan en werkend onder een sudo 'project' ter test.

Maar ik ben zoals gewoonlijk erg koppig, en ja een Headless website werkt het fijnste als alles headless aangestuurd wordt door de cms maar dat wou ik niet, ik wou de deels geforceerde structuur die er al was wel behouden, En daar ging het fout. De kop van elk artikel (tot de streep) wordt dus anders gerenderd maar haalt wel de data uit de story die geschreven wordt.

Gezien het extraheren van data uit de api niet ruim gedocumenteerd is ben ik gewoon gaan prikken. Door api calls uit te voeren en te checken hoe de data aankwam is uiteindelijk het systeem nou werkend gekregen zoals ik het zelf wou hebben. de kop en de rest van de website haalt dus de apicalls voor de snelkoppelingen met voorbeeldafbeeldingen en kleine extra teksten zonder dat te bouwen als een cms pagina, de mappen Projecten en Blog als inhoud worden gemaakt in het CMS en de rest wordt programatisch opgebouwd.

Storyblok is daarmee nou werkend, alle tekten zijn overgekopieerd en nou kunnen makkelijk artikelen geschreven worden waarbij de stijl en functionaliteit door de site beheerd worden.

En het was heel even wennen hoe StoryBlok werkt maar ik zie zeker de charme in dit systeem, het is heel pragmatisch in opbouw en maakt de schifting van 'schrijver/content maker' en website tech heel duidelijk. de Vibe van elke pagina wordt duidelijk gestuurd vanuit de branding hoe de website het wilt en de content kan super simpel gemaakt worden.

Natuurlijk komt er altijd de 'o dit is leuk' bij dit soort ongekaderde persoonlijke projecten om de hoek.

De site zat op Azure, dit omdat veel ict/tech/devops wat ik heb daar op draait. En een static site daar is gratis en super simpel, de cloud van Azure is vertrouwensgroot.

Maar een static site moet gebouwd worden elke keer als die veranderd is, iets wat niet heel fijn is met een CMS. Tuurlijk schrijf ik altijd met de localhost server aan dus voelt het net zo soepel als een groote spa site. Maar dat gaat niet op als zo'n systeem door anderen gebruikt zou gaan worden.

Dus daarom zat ik te kijken naar SSR (Server Side Rendering) dat houdt in dat de site nog steeds statisch en dus super snel is, maar ook erg snel automatisch opnieuw gebouwd wordt.

En daar kwam de 2de grootte sponsor van Astro, ook met een hele ruime, voor mij voldoende freetier van Vercel. Vercel ondersteund wel SSR, dus laten we dat ombouwen. En dat heeft effe geduurd, Astro werkt van de kern af aan anders als het server sided render is. Dus elk component in de site dat iets deed met data moest aangepast worden. Veel meer werk dan verwacht.

Maar nu draait de site op Vercel, wat zelfs 'serverless on the edge' is. Een hele fancy marketing verwoording dat je niet meer rekening hoeft te houden met servers, dat doet Vercel voor je. Maar wel op een hele speciale manier.

het 'on the edge' betekend dat de site op heel veel plekken, waarschijnlijk bij je in de buurt (ook aan de andere kant van de wereld) klaar ligt dus je hoeft nooit de site van ver te benaderen wat de site traag zou maken.

En het serverless betekend dat er geen vaste server voor is. de site is omgezet naar een klein script die klaar ligt maar geen actieve server is. Als er echter iemand naar de site toe gaat zal een server het script draaien en daarmee een paar seconde processortijd geven om een antwoord te geven, dat antwoord is de site. Dus in de plaats van de server altijd aan (en kostelijk) te houden zal het alleen wakker worden wanneer er daardwerkelijk naar gevraagd wordt.

Het was een leuke paar dagen om dit te proberen en uit te zoeken. De interesse voor dit soort ontwikkeling is zekers weer aangewakkerd, de kleine 'tags' zoals hierboven met 'WebDev' zijn al leuke extra experimentjes.

Ik verwacht dus wat meer te spelen aan deze site om er meer bekwaam mee te worden. Ook wil ik een 2de connectie maken met een database, het CV gedeelte is al gedupliceerd naar een database dus die kan verbonden worden en dat zal waarschijnlijk binnenkort gebeuren.