Updaten van een statische site
Hoe update je een statisch gegenereerde website?
Last updated
Hoe update je een statisch gegenereerde website?
Last updated
Normaliter host je een website natuurlijk ergens. Als tech lead van het team heb ik gekozen om dit bij Vercel te doen. Een andere gedadigde hier was Netlify, echter, persoonlijk heb ik meer ervaring met Vercel.
Daarnaast werkt de integratie met serverless functions bij Vercel net even wat soepeler dan bij Netlify. Anyway, wanneer je een statische websites host bij één van die platformen kies je vaak een GitHub repo om eraan te koppelen.
De GitHub integratie komt vaak standaard als je een account aanmaakt bij één van de platformen. Wanneer je dan naar de master branch pusht wordt er automatisch een nieuwe versie van de website live gezet, dit was in eerste instantie dan ook bij ons de enige manier hoe we de website konden updaten.
Hoewel dit natuurlijk heel mooi is voor de development workflow is dit verre van ideaal voor onze eindgebruiker omdat die niet even een stukje code kan pushen naar de master branch, daarom moesten we dus komen met een betere oplossing (zie onderstaand).
Again, tech lead, dus 't was mijn verantwoordelijkheid om met oplossingen te komen voor dit soort issues. Een beter alternatief voor het updaten van de website is het gebruik van webhooks. Webhooks zijn als het ware een soort 'haken' waar je aan kan trekken om een bepaalde actie op een ander platform uit te voeren, in dit geval het 'builden' van een nieuwe versie van de website.
Het mooie aan deze oplossing is dat we het vanuit elke plek kunnen triggeren. Ik heb er dus voor gekozen om dit in het CMS te integreren omdat dat de plek is waar één groep users van ons ook het meest aan de website werkt.
Allereerst heb ik gekeken of er binnen het CMS al een bestaande oplossing was voor het gebruik van webhooks, gelukkig was er al een Tasks plugin gebouwd waarmee je webhooks kan triggeren vanuit knopjes in het CMS:
Nadat ik die plugin had geïnstalleerd heb ik deploy hooks moeten aanmaken bij Vercel om van afstand een nieuwe 'build' te kunnen triggeren vanuit een externe locatie:
Hoewel deze oplossing al een hele verbetering was bleek het voor Mattijs nog onduidelijk waarom dit dan nodig was als je een website wilt updaten, vanuit Wordpress staan de wijzigingen immers direct live.
Echter, dit is meer een issue met de hele infrastructuur van de website en persoonlijk ben ik nog steeds van mening dat we qua infrastructuur een goede keuze hebben gemaakt. Het is dus zaak om dingen in het CMS beter te labelen en alles op en top duidelijk te hebben voor iemand als Mattijs, iets wat Deanna later heeft opgepakt.
Uiteindelijk kwam ik er tijdens het bouwen van een solide oplossing voor de preview omgeving erachter dat je die webhooks ook gewoon kan fetchen vanuit JavaScript, waarna er een nieuwe build getriggerd wordt. Daarover lees je meer in het volgende hoofdstuk en zal ik nu niet teveel over uitweiden.
