Eleventy in vogelvlucht

In dit artikel vertel ik over een paar basics van de Eleventy static site generator.

Wat zijn static site generators?

Voordat we verder gaan is het handig om te weten wat een static site generator is. Heel kort door de bocht; het is een programma dat je source code en configuratie pakt en daarvan bestanden maakt die in principe gelijk kunnen worden gehost. Je zou het kunnen zien als een hele gespecialiseerde build tool.

Een illustratie die het proces van een static site generator laat zien; van source code naar de static site generator die assets maakt (HTML, CSS, JS, serverless / edge functions.)

Sommige static site generators genereren ook serverless functions of edge functions, waardoor het mogelijk is dynamische pagina's te maken.

Is 11ty de tool die je zoekt?

Eleventy zal niet altijd de beste keuze zijn voor je volgende project. Wat zijn de sterkste punten van deze tool?

Een illustratie die een aantal eigenschappen van Eleventy toont. Quick builds. Static site generator (mostly.) Content websites. Opinionated or flexible? Een getekende hand wijst naar "flexible".)

⚡️ Omdat Eleventy niet vastzit aan een bepaalde JavaScript bundler, heeft het supersnelle builds
📂 Houd er rekening mee dat Eleventy echt gemaakt is om static files te genereren. Het is een minder goede keuze voor dynamische toepassingen als web apps of pagina's die heel vaak moeten veranderen
📝 Heel erg geschikt voor content websites dus! Doordat je output statisch is kan je je site op een CDN hosten waardoor je makkelijk razendsnelle performance krijgt
🤓 Eleventy is vooral heel flexibel, en is niet heel streng uit zichzelf. Dit kan je heel veel vrijheid geven als programmeur, maar je kan ook verstrikt raken in alle configuratie-opties

Hoe werkt het?

Templates + Data = Pages)

Een pagina in Eleventy is het resultaat van een template en data.

📄 Een template bepaalt de markup van de pagina.
👾 Met data kan je programmatisch templates vullen of pagina's creëren.

Templates

Templates worden gebruikt om de markup van je pagina te bepalen.

Een illustratie met een aantal gekleurde balkjes met tekst er in. Er staat: ".html, .md, .11ty.js, .njk, .webc, .liquid, .ejs, custom, more..."

Er zijn out of the box heel veel talen waarin je je templates kan schrijven. Zelf vind ik het heel gaaf dat je ook je eigen template talen kan toevoegen. Zo zou je bijvoorbeeld een *.pdf.html extension kunnen toevoegen die HTML pagina's omzet naar PDF bestanden!

Layouts

Je kan layouts gebruiken om templates te combineren. Zo heeft deze website een layout die het hoofdmenu toevoegt aan elke pagina. Het maakt niet uit in welke taal een layout geschreven is, je kan ze altijd met elkaar combineren.

Een illustratie van een grote blauwe box met tekst: 'Base (header + footer).' In de grote blauwe box zit een kleine witte box met tekst: 'About page'

Collections & Pagination

Als je een template in Eleventy een tag geeft, wordt het onderdeel van die collection. Je kan collections samen met de pagination functie gebruiken om overzichtspagina's te maken.

Ook kan je de pagination-functie gebruiken om pagina's te genereren op basis van data.

Data

Je kan data gebruiken om templates te vullen of te genereren.

Een illustratie van wat gekleurde balkjes en een waterval. Een pijl wijst van ".json, .js, custom" naar de waterval. Op de waterval zijn vier gekleurde balkes. Van boven naar beneden: "Global data, Layouts, Template data, Computed data")

Data kan je toevoegen met JSON en JavaScript. Via JavaScript is het mogelijk data toe te voegen via databases, API's of elke andere manier die Node.JS kan benaderen. Het is ook mogelijk je eigen datatypes toe te voegen door een parser te registreren in Eleventy.

Data wordt onderdeel van de data cascade. Dit kan je zien als een waterval waarbij bronnen aan de bovenkant kunnen worden overschreven door bronnen aan de onderkant. Zo kan 'global data' worden overschreven door 'layout' data. Computed data wordt vlak voor het renderen van de template meegenomen in de data cascade, en zal vorige data met dezelfde key overschrijven.

Probeer het eens!

Is Eleventy een goede tool voor jouw project? Probeer het eens en stuur mij je vetste Eleventy project op. Bedankt voor het lezen!

Je kan meer lezen over Eleventy op hun officiele website.

Groetjes, Sven