{"id":52165,"date":"2023-04-27T12:34:17","date_gmt":"2023-04-27T10:34:17","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=52165&preview=true&preview_id=52165"},"modified":"2023-11-03T07:44:49","modified_gmt":"2023-11-03T06:44:49","slug":"eleventy","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/eleventy\/","title":{"rendered":"Zo maak je een stijlvolle statische website maakt met Eleventy (11ty)"},"content":{"rendered":"

Met de opkomst van statische sitegenerators<\/a> (SSG’s) zoals Eleventy is het maken van een stijlvolle en effici\u00ebnte statische website<\/a> nog nooit zo eenvoudig geweest.<\/p>\n

In dit artikel onderzoeken we hoe je met Eleventy een prachtige en functionele statische portfoliowebsite kunt maken zonder dat je een server-side taal of database nodig hebt.<\/p>\n

Ook leer je hoe je je statische website direct vanuit je GitHub repository kunt deployen naar Kinsta’s Statische Site Hosting<\/a>, zodat je website snel live is op een gratis .kinsta.page<\/em> domein.<\/p>\n

Hier is een live demo<\/a> van de statische portfoliosite die je met Eleventy bouwt.<\/p>\n

\"Stijlvolle
Stijlvolle statische portfoliowebsite<\/figcaption><\/figure>\n

Je hebt toegang tot de GitHub repository<\/a> van dit project als je het nader wilt bekijken.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Wat is Eleventy?<\/h2>\n

Eleventy, ook bekend als 11ty, is een statische sitegenerator die websites maakt op basis van HTML<\/a>, CSS<\/a> en JavaScript<\/a> zonder dat daar databases en backend<\/a> programmeertalen voor nodig zijn.<\/p>\n

Eleventy staat bekend om zijn eenvoud en flexibiliteit, omdat het je niet dwingt om slechts \u00e9\u00e9n templatetaal of framework te gebruiken. Het ondersteunt meer dan 10 templatetalen en je kunt er zelfs zoveel gebruiken als je wilt in een enkel project:<\/p>\n

\"Templatetalen
Eleventy templatetalen<\/figcaption><\/figure>\n

Eleventy, zoals de meeste SSG’s, staat je toe de inhoud van je statische site op te bouwen met herbruikbare componenten in plaats van complete HTML documenten te maken voor elke pagina.<\/p>\n\n

Zo installeer je Eleventy<\/h2>\n

Eleventy installeren is eenvoudig. Dit is hoe je het doet:<\/p>\n

    \n
  1. Zorg ervoor dat je Node.js<\/a> op je computer hebt ge\u00efnstalleerd. Je kunt dit checken door het commando node -v<\/code> in je terminal uit te voeren. Niet beschikbaar? Zo installeer je Node.js<\/a> op je computer.<\/li>\n
  2. Maak een nieuwe map aan voor je project.<\/li>\n
  3. Open je terminal en voer het commando npm init -y<\/code> uit in de map van je project om een nieuw Node.js project te initialiseren, waarbij een package.json<\/strong> bestand met standaardinstellingen wordt aangemaakt.<\/li>\n
  4. Voer het commando npm install @11ty\/eleventy --save-dev<\/code> uit om het pakket als ontwikkelingsdependency in je project te installeren.<\/li>\n
  5. Dat was het! Je kunt Eleventy nu draaien door het commando npx @11ty\/eleventy<\/code> in je projectdirectory uit te voeren. Dit zal je sitebestanden genereren en uitvoeren naar een _site<\/strong> map (of je geconfigureerde map) in je projectmap.<\/li>\n<\/ol>\n

    Opmerking:<\/strong> Als je het commando npx @11ty\/eleventy<\/code> uitvoert. Krijg je deze output:<\/p>\n

    [11ty] Wrote 0 files in 0.01 seconds (v2.0.0)<\/code><\/pre>\n
    Hier worden 0 bestanden geschreven omdat er geen templates in de map van je project staan.<\/p>\n
    Eleventy commando’s en configuratie<\/h2>\n
    Je hebt nu je Eleventy project gemaakt, maar je bent er nog niet. Je moet nu enkele configuraties maken en op de hoogte zijn van enkele basic commando’s voor de statische site die naar de browser kan worden geleverd.<\/p>\n
    Eleventy commando’s<\/h3>\n
    Hier zijn enkele van de belangrijkste Eleventy commando’s die je moet kennen:<\/p>\n