Statische website generatoren voor JAMstack

In de loop der jaren werd het mammoetvolume aan inhoud in een statische website een punt van zorg voor veel ontwikkelaars, omdat het onderhouden ervan nogal een pijnlijk proces bleek te zijn. Om dit tegen te gaan, begonnen ze het JAMstack-framework te omarmen. Het aannemen ervan hielp hen niet alleen om websites gemakkelijk te bouwen en bij te werken, maar de gebouwde site bleek ook razendsnel te zijn. En de reden voor deze hoge prestaties werd toegeschreven aan een belangrijk onderdeel ervan - de Statische Site Generator.

In deze post wordt in detail besproken wat een statische sitegenerator is en hoe deze voordelig is voor jouw websites. Daarnaast gaan we enkele van de beste statische sitegeneratoren bespreken die perfect zijn voor jouw JAMstack-sites. De markt wordt al overspoeld met een grote verscheidenheid aan statische sitegeneratoren en iedereen heeft keuzes te over. Tegelijkertijd is het ook van essentieel belang om de juiste te kiezen op basis van jouw behoeften en we dachten eraan om je daarbij te helpen.

Development
5 juni 2020
Martijn van der Put

Wat is een statische sitegenerator? 

Een statische sitegenerator is een tool die ontwikkelaars helpt om inhoud en gegevens toe te voegen aan een vooraf gemaakte sjabloon en deze vervolgens te serveren als een statische pagina. Bijvoorbeeld, als je verbonden bent met een headless CMS, kan de inhoud daarvandaan worden opgehaald en gecombineerd worden met een vooraf gemaakte sjabloon om de statische pagina's te produceren.


Een statische sitegenerator is behoorlijk handig omdat, in tegenstelling tot de traditionele webapplicatiestapel, een statische sitegenerator niet wacht tot een pagina wordt opgevraagd door de client. In plaats daarvan genereert het de pagina's ruim van tevoren om ervoor te zorgen dat de weergave klaar is om aan de client te worden geserveerd. Er is hier geen opbouw van pagina's op basis van vraag.

Typisch maken statische sitegeneratoren websites die niet afhankelijk zijn van databases of servers. In plaats daarvan gebruiken ze CDNs als medium om de website aan de client te serveren. Dit is de voornaamste reden waarom JAMstack-sites met verbazingwekkende snelheden laden.

Nu we de basisbeginselen van statische sitegeneratoren begrijpen, laten we eens kijken naar de top 5 statische sitegeneratoren die beschikbaar zijn, samen met hun voor- en nadelen.

Top statische site generators

1. JEKYLL


De eerste statische sitegenerator in onze lijst is Jekyll, gebouwd op Ruby. De meesten van jullie zullen Ruby herkennen van het Ruby on Rails-framework. Net als Ruby is Jekyll er al een tijdje, waardoor het een beproefde statische sitegenerator is. Een interessant detail over Jekyll is dat het de Markdown-bestanden of de inhoud combineert met een sjabloonsysteem genaamd Liquid. De Liquid-sjabloonengine staat bekend om zijn gebruiksgemak bij het maken en beheren van sjablonen.

De kiemen van Jekyll werden geplant in 2009 en al snel werd het de belangrijkste engine achter de GitHub Pages waar de meesten van jullie waarschijnlijk van op de hoogte zijn, vooral als je een ontwikkelaar bent. Voor wie het niet weet, GitHub Pages zijn openbare webpagina's voor individuen en organisaties. In 2019 werd Jekyll 4 officieel uitgebracht met snellere builds, verbeterde cache-optimalisaties, volledig geladen inhoudstransformaties om er maar een paar te noemen. Laten we eens kijken naar de voor- en nadelen van het gebruik van Jekyll als statische sitegenerator:


Voordelen:

  • Als je werkt met GitHub Pages, dan zul je Jekyll geweldig vinden, omdat ze allebei perfect bij elkaar passen. 
  • Het is niet alleen vrij eenvoudig op te zetten en te configureren, maar het is ook vrij eenvoudig te leren, zelfs voor beginners. 
  • Het wordt ondersteund door een enorme en bloeiende gemeenschap. Als je op enig moment vragen hebt, zul je niet onbeantwoord blijven. 
  • Er zijn tal van plugins beschikbaar om je site nog verder aan te passen.

 

Nadelen:

  • Om met Jekyll te kunnen werken, moet je eerst een Ruby-omgeving opzetten. Aangezien Ruby een nogal verouderde taal is, zijn veel ontwikkelaars mogelijk niet bereid om deze vandaag de dag te leren. 
  • Het gemak van beschikbare plugins kan ertoe leiden dat je steeds meer plugins aan je website toevoegt. Dit heeft een aanzienlijke invloed op de bouwtijd.


 

2. HUGO



Hugo is een toonaangevende statische sitegenerator met enorme beoordelingen op GitHub. Het is gebaseerd op de programmeertaal Go, die vrij eenvoudig is op te zetten en te beheren. Hugo is zonder twijfel de snelste statische sitegenerator in deze lijst en waarschijnlijk ter wereld. Afgezien van zijn naadloze werking, wordt het geleverd met een solide verzameling thema's die je helpen om in korte tijd een website te bouwen.

Hugo staat bekend om zijn op gegevens gebaseerde contentfuncties die ontwikkelaars helpen HTML te maken op basis van JSON/CSV-feeds. Daarnaast kun je ook je eigen shortcodes schrijven en de bestaande sjablonen gebruiken voor een extra laag aan aanpassingen. Dit maakt het mogelijk om SEO, opmerkingen, analyses en diverse andere functies moeiteloos in te stellen.

Probeer je jouw product aan een internationaal publiek te presenteren of ben je van plan je website te lokaliseren? Dan is Hugo de juiste keuze vanwege zijn volledige i18n-ondersteuning voor meertalige sites. Daarnaast profiteer je van een afhankelijkheidsbeheerder in Hugo Modules die helpt bij het ophalen van een afhankelijkheid van een externe bron zoals GitHub of BitBucket. Een van de recente functies, genaamd Render Hooks, helpt je bij het overschrijven van de standaard rendering van Markdown-afbeeldingen en links, wat bijdraagt aan de uitgebreide reeks bestaande functies.


Voordelen:

  • Waarschijnlijk een van de snelste statische sitegeneratoren die momenteel beschikbaar zijn. 
  • Er zijn tal van thema's en sjablonen beschikbaar die de tijd die je besteedt aan het bouwen van de site aanzienlijk verminderen. 
  • Er is veel ondersteuning voor verschillende inhoudstypen, waardoor Hugo een vrij flexibel framework is.

Nadelen:

  • Het enige belangrijke nadeel van Hugo dat je zou kunnen hinderen, is dat je goed thuis moet zijn in de programmeertaal Go, die niet erg populair is onder ontwikkelaars.

 

3. NUXT.JS

Als je hebt gehoord van Next.js, dan weet je waarschijnlijk ook dat het de inspiratie was voor een statische sitegenerator genaamd Nuxt.js. Beide ondersteunen efficiënt server rendering en ook statisch gegenereerde inhoud. En als je al Vue.js gebruikt voor je site, dan moet Nuxt.js zeker worden overwogen als je statische sitegenerator. Dit komt omdat Nuxt.js is gebouwd op Vue.js. De competente modulaire architectuur van Nuxt.js geeft je de mogelijkheid om een module te kiezen uit meer dan 50 modules om je ontwikkeling te ondersteunen. Je wordt ook bijgestaan door een bundelanalyzer en tal van mogelijkheden om je een duwtje in de rug te geven bij het finetunen van een applicatie of je website. Nuxt.js bundelt Vue-meta, Vue Server Renderer, Vuex, Vue Router en Vue 2. Nuxt.js wordt ook geleverd met een implementatieoptie genaamd Nuxt generate die je helpt bij het bouwen van statisch gegenereerde Vue.js applicaties.

Voordelen: 

  • Het is gebaseerd op het Vue.js-framework, dat wordt beschouwd als een van de lichtste en meest flexibele JavaScript-frameworks die beschikbaar zijn. 
  • Net als Vue.js is Nuxt.js zeer eenvoudig te leren. 
  • De flexibiliteit is hier onbeperkt, omdat je meerdere bouwopties hebt om uit te kiezen. 
  • Er is ook geïntegreerd state management genaamd Vuex.

Nadelen:

  • Een van de grootste nadelen van Vue.js is de voorkeur voor de Chinese taal, iets wat ook aanwezig is in Nuxt.js. 
  • Er zijn ook niet veel plugins beschikbaar in Nuxt.


4. GATSBY



Als Hugo de snelste in de lijst is, dan zal de gemakkelijkste statische site-generator om te gebruiken Gatsby zijn. Gatsby is puur gebaseerd op het React JavaScript-framework en ook op GraphQL, waarmee je naadloos gegevens kunt ophalen uit meerdere bronnen zoals WordPress. Gatsby is voordelig omdat de sites die ermee zijn gebouwd, zijn geoptimaliseerd voor snelheid. Dit komt voornamelijk doordat het alleen de delen van je site laadt die op dat moment nodig zijn. De bronnen worden ook voorgehaald voor andere pagina's om nog meer tijd te besparen. Als je ooit een website hebt gebruikt die is gebouwd met Gatsby, zul je de verbazingwekkende snelheid van navigatie tussen de pagina's voelen.

Er is ook een groot plug-insysteem dat bij Gatsby wordt geleverd, wat je een extra voordeel geeft bij het bouwen van de website. Je kunt eenvoudig een plug-in gebruiken om een sitemap te maken of een afbeelding te manipuleren. Zelfs het ophalen van gegevens uit WordPress kan worden bereikt met een plug-in. Het is zo simpel.

Voordelen:

  • Het bestaande plug-insysteem vergemakkelijkt je inspanningen om een website te bouwen. 
  • De vooraf ophalende mogelijkheden van Gatsby zorgen ervoor dat de HTML-pagina's in recordtijd laden. 
  • Er is een grote gemeenschap van ontwikkelaars die je helpt bij eventuele vragen of zorgen.

Nadelen:

Je hebt een grondig begrip van JS, React en GraphQL nodig, aangezien de leercurve hier behoorlijk steil is.

5. Gridsome



Gridsome is het nieuwste kind aan de kust en is zwaar geïnspireerd door Gatsby. Het werd pas in 2018 uitgebracht en heeft nog een lange weg te gaan om te concurreren met de andere veteranen op deze lijst. Het enige verschil tussen Gatsby en Gridsome is dat Gridsome gebaseerd is op VUE.js, terwijl Gatsby op React gebaseerd is. Net als Gatsby wordt het ook aangedreven door GraphQL en heeft het functies zoals code splitting en PWAs. Het is net zo goed als Gatsby wat betreft de bouw en de prestaties van de gemaakte website. Het biedt ook ondersteuning voor SEO-optimalisatie. Het enige probleem is dat het niet zo'n grote gemeenschap heeft als Gatsby, wat zeker zal verbeteren naarmate mensen de voordelen van deze statische sitegenerator gaan zien.

Voordelen: 

  • Er zijn tal van sjablonen en plugins beschikbaar in Gridsome. 
  • Gridsome biedt hoge prestaties die vergelijkbaar zijn met Gatsby.

Nadelen:

  • Het leren van VUE.js is noodzakelijk en alle nadelen van VUE komen hier naar voren. 
  • De ondersteuning van de gemeenschap is vrij beperkt en je kunt mogelijk niet direct antwoorden op je vragen vinden.

Conclusie

Inmiddels zul je hebben ingezien dat statische sitegeneratoren essentieel zijn voor het bouwen van je statische sites. Deze post heeft slechts een paar van de beste statische sitegeneratoren behandeld, en er zijn er nog honderden meer om te verkennen en te ervaren. Er is geen beste statische sitegenerator, het is puur gebaseerd op je behoeften en vereisten. Hier is een vergelijkingstabel om je een alomvattend beeld te geven van alle statische sitegeneratoren in deze post.

We zijn aan het einde gekomen van de JAMstack-serie en we zijn er zeker van dat je nu een goed begrip hebt van JAMstack en zijn mogelijkheden. Het enige wat nu nog rest is om een website te bouwen met behulp ervan!


Wil je meer informatie? Neem dan contact op.

Cookies
Deze site gebruikt geanonimiseerde cookies. Klik op "Akkoord" als je akkoord gaat met het gebruik van cookies, of klik op "Aanpassen" om je voorkeuren te bepalen.
Deze site gebruikt geanonimiseerde cookies.