In dit artikel maak je kennis met een van de populaire SSG’s – Jekyll, leer je hoe het werkt, en hoe je er een statische website mee kunt maken.<\/p>\n
Hier is een live demo van de blogsite<\/a> die je met Jekyll gaat bouwen.<\/p>\n Je hebt toegang tot de GitHub repository van het project<\/a> als je het beter wilt bekijken.<\/p>\n Jekyll is een gratis open-source SSG die gebouwd is en draait op de programmeertaal Ruby<\/a>. Je hoeft niet te begrijpen hoe Ruby werkt om Jekyll te gebruiken; je hoeft alleen Ruby op je machine ge\u00efnstalleerd te hebben.<\/p>\n Jekyll kan gebruikt worden om verschillende soorten statische sites te bouwen, zoals een persoonlijke blog, portfoliowebsite en documentatiewebsite, zonder dat je een database nodig hebt of een content management systeem zoals WordPress<\/a> gebruikt.<\/p>\n Dit is wat Jekyll onderscheidt van de SSG’s:<\/p>\n Je moet eerst Ruby op je machine installeren voordat je verder kunt gaan met de installatie van Jekyll, zoals vermeld in de Jekyll documentatie<\/a>.<\/p>\n Ruby is standaard voorge\u00efnstalleerd op macOS, maar het is niet aan te raden een dergelijke versie van Ruby te gebruiken om Jekyll te installeren, omdat die oud is. Op Ventura, Apple’s nieuwste besturingssysteem, is de versie van Ruby die vooraf ge\u00efnstalleerd is bijvoorbeeld 2.6.10, waarvan de laatste versie 3.1.3 is (op moment van schrijven).<\/p>\n Om dit op te lossen moet je Ruby correct installeren met een versiebeheerder als chruby<\/a>. Je moet eerst Homebrew<\/a> op je Mac installeren met het onderstaande commando in je terminal:<\/p>\n Als de installatie geslaagd is, sluit dan Terminal af en start opnieuw op, en controleer dan of Homebrew klaar is door dit commando uit te voeren:<\/p>\n Als je “Your system is ready to brew<\/strong>” krijgt, kun je nu verder gaan met het installeren van Je kunt nu de nieuwste versie van ruby installeren, die 3.1.3 is, met behulp van het pakket Dit duurt een paar minuten. Als het gelukt is, configureer dan je shell om automatisch Je kunt nu afsluiten en je terminal opnieuw starten, en dan controleren of alles werkt door dit commando uit te voeren:<\/p>\n Er zou moeten staan: ruby 3.1.3<\/strong>.<\/p>\n Je hebt nu de nieuwste versie van Ruby op je machine ge\u00efnstalleerd. Je kunt nu doorgaan met het installeren van de nieuwste Jekyll en bundler gem:<\/p>\n Om Ruby en Jekyll op een Windows machine te installeren, gebruik je de RubyInstaller<\/a>. Dit kun je doen door een Ruby+Devkit<\/strong> versie te downloaden en te installeren van RubyInstaller Downloads<\/a> en de standaardopties voor de installatie te gebruiken.<\/p>\n Voer in de laatste fase van de installatiewizard de stap Kies bij de opties voor MSYS2 en MINGW development toolchain. Open een nieuw opdrachtpromptvenster en installeer Jekyll en Bundler met onderstaand commando:<\/p>\n Om te controleren of Jekyll correct is ge\u00efnstalleerd op je machine, open je je terminal en voer je het volgende commando uit:<\/p>\n Als je het versienummer ziet, betekent dit dat Jekyll ge\u00efnstalleerd is en correct werkt op je systeem. Je bent nu klaar om Jekyll te gebruiken!<\/p>\n Voordat we beginnen met het maken en aanpassen van een statische site met Jekyll, is het goed om vertrouwd te raken met de verschillende CLI commando’s en parameters van de config file.<\/p>\n Hier zijn enkele van de populaire Jekyll CLI commando’s. Je hoeft ze niet te onthouden, maar weet gewoon dat ze bestaan, en voel je vrij om terug te kijken naar wat een van hen doet als je later in dit artikel hun gebruik opmerkt.<\/p>\n Je kunt ook enkele opties aan deze commando’s toevoegen. Zie een volledige lijst van Jekyll commando’s en opties in de Jekyll documentatie<\/a>.<\/p>\n Het Jekyll configuratiebestand (config file) is een YAML bestand met de naam _config.yml<\/strong> dat instellingen en opties bevat voor je Jekyll site. Het wordt gebruikt om verschillende aspecten van je site te configureren, waaronder de sitetitel, beschrijving, URL en andere instellingen.<\/p>\n Hier zijn enkele van de meest gebruikte configuratie-opties:<\/p>\n Je kunt ook aangepaste variabelen aanmaken in je configuratiebestand en die gebruiken in de templates, layouts en includes van je site. Je kunt bijvoorbeeld een variabele aanmaken met de naam Om je Jekyll configuratiebestand aan te passen, open je het bestand _config.yml<\/strong> in je Jekyll projectmap in een tekstverwerker en breng je wijzigingen aan.<\/p>\n Opmerking:<\/strong> Alle wijzigingen die je maakt in het configuratiebestand worden van kracht de volgende keer dat je je site genereert met Nu je Jekyll op je machine ge\u00efnstalleerd hebt, kun je met \u00e9\u00e9n commando binnen een paar seconden een statische website op Jekyll maken. Open je terminal en voer dit commando uit:<\/p>\n Zorg ervoor dat je “joels-blog” vervangt door je gewenste sitenaam.<\/p>\n Navigeer vervolgens naar de websitemap. Je ziet een basisstructuur van de Jekyll site met mappen en bestanden zoals deze:<\/p>\n Hier zie je waar elk van deze mappen en bestanden voor dient:<\/p>\n Maar er zijn meer bestanden\/mappen die je kunt gebruiken om je Jekyll website aan te passen. Deze mappen omvatten:<\/p>\n Deze bestandsstructuur biedt een solide basis voor een Jekyll project, maar je kunt hem naar behoefte aanpassen aan de specifieke behoeften van je project.<\/p>\n Als alternatief voor het starten van je project met de Jekyll CLI, kun je een Git repository maken met behulp van Kinsta’s “Hello World” Jekyll template<\/a> op GitHub. Selecteer Use this template <\/strong>> Create a new repository<\/strong> om de startcode naar een nieuwe repository binnen je eigen GitHub account te kopi\u00ebren.<\/p>\n Je hebt nu een Jekyll site, maar hoe kun je de website bekijken om te zien hoe hij eruit ziet voordat je hem misschien gaat aanpassen aan je behoeften? Open je terminal en ga naar de map van je project, voer dan het volgende commando uit:<\/p>\n Dit zal een map _site<\/strong> genereren die alle statische bestanden bevat die uit je project zijn gegenereerd. Het zal ook de Jekyll server starten, en je kunt je site bekijken via http:\/\/localhost:4000<\/strong>.<\/p>\n Als je de URL in je webbrowser bezoekt, zie je je Jekyll site met het Minima thema:<\/p>\n Wanneer je een site maakt met Jekyll en een thema gebruikt, kun je de site aanpassen aan je behoeften. Je kunt bijvoorbeeld nieuwe pagina’s toevoegen, de lay-out van een pagina veranderen, of aanpassen hoe sommige items worden weergegeven. Het is allemaal mogelijk met Jekyll.<\/p>\n Als je een willekeurige pagina of blogpost van je projectmap opent, zie je een blokje informatie binnen drie streepjes (—) bovenaan de pagina. Dit wordt front matter<\/strong> genoemd.<\/p>\n Het is een metadata format dat in Jekyll wordt gebruikt, om informatie over een pagina of post op te slaan – het kan in YAML of JSON worden geschreven.<\/p>\n In het bovenstaande voorbeeld bevat de front matter variabelen, zoals de titel, beschrijving en datum van de post. Deze variabelen kunnen gebruikt worden in de opmaak of inhoud van de pagina of post.<\/p>\n Jekyll parst de voorkant en gebruikt die om de output HTML voor je site te genereren. Je kunt de voorkant gebruiken om verschillende opties te specificeren, zoals lay-out, permalink, gepubliceerde status, enz.<\/p>\n Je kunt ook standaard front matter instellen, zodat je niet voor vergelijkbare bestanden hetzelfde voorwerk hoeft te defini\u00ebren. Bijvoorbeeld als elk blogbericht dezelfde auteursnaam en lay-out gebruikt. Je kunt een aangepaste front matter defini\u00ebren in je _config.yml<\/strong> bestand om al je blogberichten te leveren.<\/p>\n De manier waarop het is opgebouwd is ietwat complex, maar hier zie je hoe het eruit komt te zien. Plak dit onder de laatste configuratie in je _config.yml<\/strong> bestand:<\/p>\n Wanneer je nu het commando Opmerking:<\/strong> Wanneer je geen pad definieert, zullen alle bestanden de gedefinieerde waarden voor de front matter gebruiken.<\/p>\n Wanneer je een bestand aanmaakt in de hoofdmap van je project, wordt het beschouwd als een pagina. De naam die je aan het bestand geeft wordt meestal gebruikt in de URL, dus geef je elk paginabestand een naam die goed klinkt.<\/p>\n Als je bijvoorbeeld een pagina wilt maken met de URL https:\/\/voorbeeld.com\/about,<\/strong> maak dan een bestand met de naam about.html <\/strong>of about.md<\/strong>. De bestandsextensie bepaalt welke opmaaktaal je gebruikt voor de inhoud van de pagina (HTML of Markdown).<\/p>\n Zodra je een bestand hebt gemaakt, voeg je de juiste front matter en inhoud toe. Sla het bestand op en ververs je Jekyll site in de browser. De nieuwe pagina zou nu toegankelijk moeten zijn via de URL die overeenkomt met de bestandsnaam.<\/p>\n Je kunt Layouts gebruiken om de structuur en vormgeving van de pagina’s en berichten van je site te bepalen. Dit gebeurt meestal grotendeels met HTML code. Je kunt een header, footer en meta-informatie opnemen in de metadata van de pagina.<\/p>\n De eerste stap is het maken van een map _layouts<\/strong> in de hoofdmap van je project. Maak dan een bestand voor elke lay-out – het bestand moet een beschrijvende naam hebben die het doel van de lay-out weergeeft. Je zou bijvoorbeeld een bestand met de naam page.html <\/strong>kunnen maken om de paginalayout voor alle pagina’s op je site te defini\u00ebren.<\/p>\n Je kunt de algemene structuur van je layouts het beste defini\u00ebren met HTML of een andere opmaaktaal.<\/p>\n Je kunt placeholders opnemen voor alle dynamische inhoud die in de layout wordt ingevoegd, zoals de paginatitel, inhoud en metagegevens. Zo kun je bijvoorbeeld een basislayout maken met een kop, voettekst en inhoudsgebied:<\/p>\n In dit voorbeeld worden de placeholders Op dit moment zal elke pagina of bericht dat pagina als opmaakwaarde gebruikt deze opmaak hebben. Je kunt in de map _layouts<\/strong> meerdere layouts maken en je layouts stylen zoals je wilt. Je kunt ook de opmaak van een thema overschrijven door een opmaak met een vergelijkbare naam te defini\u00ebren.<\/p>\n De map _includes<\/strong> bevat herbruikbare stukjes code die je in verschillende delen van je website kunt opnemen. Je kunt bijvoorbeeld een navbar.html<\/strong> bestand maken in je includes map en het toevoegen aan je page.html<\/strong> layoutbestand met behulp van de Bij het bouwen zal Jekyll de tag vervangen door de inhoud van navbar.html<\/strong>.<\/p>\n De map _includes<\/strong> kan elk type bestand bevatten, zoals HTML, Markdown of Liquid bestanden. Het belangrijkste doel is om je code DRY (Don’t Repeat Yourself) te houden door je in staat te stellen code te hergebruiken op je site.<\/p>\n Misschien wil je een speciale blogpagina maken voor al je blogberichten, wat betekent dat je alle berichten op je site wil plaatsen en kunnen browsen. Met Jekyll is dat eenvoudig te bereiken met de tag Alle berichten op een Jekyll website worden opgeslagen in de variabele Je kunt ook extra Liquid variabelen gebruiken om andere informatie over elk bericht uit te voeren, zoals de datum van het bericht of de auteur:<\/p>\n Merk op dat in het bovenstaande voorbeeld het date Liquid filter de datum van elk bericht opmaakt in een meer menselijk leesbaar formaat.<\/p>\n Nu heb je een idee van de basisopmaak die je aan je Jekyll site kunt geven. Maar misschien hoef je deze niet allemaal te gebruiken om een Jekyll site vanaf nul op te bouwen, want je kunt altijd een thema zoeken dat aan je behoeften voldoet en dat aan je Jekyll site toevoegen.<\/p>\n Er zijn verschillende eenvoudig toe te voegen thema’s, maar het goede nieuws\u00a0 is dat er voor elk thema altijd duidelijke informatie over de installatie ervan te vinden is in het ReadMe bestand op GitHub. Je kunt besluiten het thema te klonen, of als het een op gem gebaseerd thema<\/a> is, is het proces eenvoudiger.<\/p>\n Voor dit artikel zou je een blogthema<\/a> installeren en het aanpassen om een blogsite op Kinsta te deployen<\/a>. Dit is een op gem gebaseerd thema en je hebt toegang tot de broncode<\/a> en instructies op GitHub<\/a>.<\/p>\n Om een gem-gebaseerd thema toe te voegen, open je het Gemfile van je site en voeg je de gem toe voor het thema dat je wilt gebruiken. Het thema dat we zullen gebruiken is het jekyll-thema-clean-blog<\/strong>. Je kunt het standaard minima<\/strong>-thema in de Gemfile vervangen:<\/p>\n Voer het commando Voeg in het bestand _config.yml<\/strong> van je site de volgende regel toe om het thema dat je wilt gebruiken te specificeren:<\/p>\n Op dit punt is je thema klaar voor gebruik.<\/p>\n Je zult alle layouts in de map _layouts<\/strong> willen verwijderen om te voorkomen dat ze de layout van het thema overschrijven.<\/p>\n Je kunt dan in de documentatiie van het thema<\/a> de layoutnamen voor je bestanden vinden. Als je bijvoorbeeld het thema jekyll-theme-clean-blog<\/strong> gebruikt, dan is de naam van de opmaak voor het bestand index.html<\/strong> home<\/strong>, andere pagina’s is page<\/strong>, en alle berichten is post<\/strong>.<\/p>\n Draai tenslotte Dat was het! Je Jekyll site zou nu het nieuwe op gem gebaseerde thema dat je hebt toegevoegd moeten gebruiken. Je kunt het thema verder aanpassen door de layout in de _layouts<\/strong> directories van je site aan te passen.<\/p>\n Je hebt nu je thema toegevoegd aan je site, de volgende actie zou zijn om de site aan te passen aan je behoeften en te laten werken zoals het bedoeld is. De afbeeldingen voor elke pagina en post worden bijvoorbeeld niet weergegeven, maar een grijze achtergrond.<\/p>\n Je kunt dit oplossen door aan elke pagina en post een front matter optie toe te voegen waarin je het pad naar een afbeelding opgeeft die je wilt gebruiken. In Jekyll worden assets zoals afbeeldingen opgeslagen in de map assets<\/strong>. In deze map kun je submappen maken om je afbeeldingen te organiseren.<\/p>\n Je kunt nu een achtergrondoptie toevoegen aan het front matter blok en een pad naar de bijbehorende afbeelding. Op de About pagina is dit bijvoorbeeld de front matter:<\/p>\n Doe dit voor alle pagina’s en berichten en je pagina ziet er zo uit:<\/p>\n Een andere aanpassing die je kunt doen is de opties in de navigatiebalk aanpassen. Je hebt bijvoorbeeld misschien geen contactpagina nodig, wat betekent dat je de link daarvan uit de navigatiebalkopties moet verwijderen. Je kunt dit doen door de broncode van het thema<\/a>\u00a0 te bekijken, het bestand te vinden dat verantwoordelijk is voor de nav links, en het bestand exact te repliceren in jouw project, waarbij je de optie die je niet nodig hebt verwijdert.<\/p>\n![\"Blogwebsite](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/03\/joels-blog-jekyll-site.jpg\")
Wat is Jekyll?<\/h2>\n
\n
Zo installeer je Jekyll<\/h2>\n
Zo installeer je Jekyll op macOS<\/h3>\n
\/bin\/bash -c \"$(curl -fsSL https:\/\/raw.githubusercontent.com\/Homebrew\/install\/HEAD\/install.sh)\"<\/code><\/pre>\nbrew doctor<\/code><\/pre>\nchruby<\/code> en ruby-install<\/strong> met onderstaand commando:<\/p>\nbrew install chruby ruby-install<\/code><\/pre>\nruby-install<\/code> dat je zojuist hebt ge\u00efnstalleerd:<\/p>\nruby-install 3.1.3<\/code><\/pre>\nchruby<\/code> te gebruiken met het onderstaande commando:<\/p>\necho \"source $(brew --prefix)\/opt\/chruby\/share\/chruby\/chruby.sh\" >> ~\/.zshrc\necho \"source $(brew --prefix)\/opt\/chruby\/share\/chruby\/auto.sh\" >> ~\/.zshrc\necho \"chruby ruby-3.1.3\" >> ~\/.zshrc<\/code><\/pre>\nruby -v<\/code><\/pre>\ngem install jekyll bundler<\/code><\/pre>\nZo installeer je Jekyll op Windows<\/h3>\n
ridk install<\/code> uit – die wordt gebruikt om gems te installeren. Lees meer via de RubyInstaller Documentatie<\/a>.<\/p>\ngem install jekyll bundler<\/code><\/pre>\nZo controleer je of Jekyll correct is ge\u00efnstalleerd<\/h3>\n
jekyll -v<\/code><\/pre>\nJekyll commando’s en configuratie<\/h2>\n
Jekyll CLI commando’s<\/h3>\n
\n
jekyll build<\/code>: Genereert de statische site in de _site<\/strong> directory.<\/li>\njekyll serve<\/code>: Bouwt de site en start een webserver op je lokale machine, zodat je de site kunt bekijken in je browser op http:\/\/localhost:4000.<\/li>\njekyll new [site name]<\/code>: Cre\u00ebert een nieuwe Jekyll site in een nieuwe directory met de opgegeven sitenaam.<\/li>\njekyll doctor<\/code>: Geeft eventuele configuratie- of dependencyproblemen weer.<\/li>\njekyll clean<\/code>: Verwijdert de _site<\/strong> directory, waar de gegenereerde site bestanden zijn opgeslagen.<\/li>\njekyll help<\/code>: Voert de helpdocumentatie voor Jekyll uit.<\/li>\njekyll serve --draft<\/code>: Genereert en levert je Jekyll site, inclusief alle berichten die in de _drafts<\/strong> directory staan.<\/li>\n<\/ul>\nJekyll configuratiebestand<\/h3>\n
\n
minima<\/code>. Je kunt elk ander thema<\/a> gebruiken door de naam ervan in te stellen en andere instellingen uit te voeren waarover we later in dit artikel meer zullen leren.<\/li>\n<\/ul>\nauthor_name<\/code> en die dan zo in je templates gebruiken: {{ site.author_name }}<\/code>.<\/p>\njekyll build<\/code> of jekyll serve<\/code>.<\/p>\nZo maak je een statische website op Jekyll<\/h2>\n
jekyll new joels-blog<\/code><\/pre>\n![\"Jekyll](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/03\/create-new-jekyll-site.jpg\")
\u251c\u2500\u2500 _config.yml\n\u251c\u2500\u2500 _posts\n\u251c\u2500\u2500 Gemfile\n\u251c\u2500\u2500 Gemfile.lock\n\u251c\u2500\u2500 index.md\n\u2514\u2500\u2500 README.md<\/code><\/pre>\n\n
\n
Quick Start optie: Gebruik onze GitHub template<\/h3>\n
Zo bekijk je een Jekyll site<\/h2>\n
jekyll serve<\/code><\/pre>\n![\"Standaard](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/03\/minima-jekyll-theme.jpg\")
Zo pas je een Jekyll site aan<\/h2>\n
Hoe front matter werkt in Jekyll<\/h3>\n
---\ntitle: \"Welcome to Jekyll!\"\ndescription: \"Introduction to what Jekyll is about and how it works\"\ndate: 2023-03-07 16:54:37 +0100\n---<\/code><\/pre>\nHoe je de standaard homepagina instelt<\/h4>\n
defaults:\n -\n scope:\n path: \"posts\" # empty string means all files\n values:\n layout: \"post\"\n author: \"John Doe\"<\/code><\/pre>\njekyll serve<\/code> uitvoert, zul je merken dat zelfs wanneer je de lay-out en de auteur niet op elke post definieert, je er nog steeds toegang toe hebt binnen je bestanden.<\/p>\nPagina’s maken in Jekyll<\/h3>\n
![\"Front](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/03\/create-new-page.jpg\")
Layouts maken in Jekyll<\/h3>\n
<!DOCTYPE html>\n<html>\n <head>\n <title>{{ page.title }}<\/title>\n <\/head>\n <body>\n <header>\n \n <\/header>\n <main>{{ content }}<\/main>\n <footer>\n \n <\/footer>\n <\/body>\n<\/html><\/code><\/pre>\n{{ page.title }}<\/code> en {{ content }}<\/code> vervangen door de werkelijke titel en inhoud van de pagina die wordt weergegeven.<\/p>\nZo werkt de map _includes in Jekyll<\/h3>\n
{% include %}<\/code> tag.<\/p>\n<!DOCTYPE html>\n <html>\n <head>\n <title>{{ page.title }} <\/title>\n <\/head>\n <body>\n <header>{% include navbar.html %} <\/header>\n <main>{{ content }} <\/main>\n <footer>\n \n <\/footer>\n <\/body>\n <\/html><\/code><\/pre>\nBerichten browsen in Jekyll<\/h3>\n
{% for %}<\/code>.<\/p>\nsite.posts<\/code>. Je kunt er doorheen lussen en de variabele {{ post.title }}<\/code> Liquid gebruiken om de titel van elk bericht op deze manier uit te voeren:<\/p>\n{% for post in site.posts %}\n <h2>{{ post.title }}<\/h2>\n{% endfor %}<\/code><\/pre>\n\n{% for post in site.posts %}\n <h2>{{ post.title }}<\/h2>\n <p>Published on {{ post.date | date: \"%B %-d, %Y\" }} by {{ post.author }}<\/p>\n{% endfor %}<\/code><\/pre>\nZo voeg je een thema toe aan een Jekyll site<\/h2>\n
gem \"jekyll-theme-clean-blog\"<\/code><\/pre>\nbundle install<\/code> uit in de map van je site om het gem thema en de depencies te installeren.<\/p>\ntheme: jekyll-theme-clean-blog<\/code><\/pre>\njekyll serve<\/code> om je site te bouwen en te serveren met het nieuwe thema.<\/p>\n![\"Jekyll](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/03\/jekyll-blog-theme.jpg\")
Een Jekyll thema aanpassen<\/h3>\n
![\"Organisatie](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/03\/jekyll-assets.jpg\")
---\nlayout: page\ntitle: About\ndescription: This is the page description. \npermalink: \/about\/\nbackground: '\/assets\/images\/about-page.jpeg'\n---<\/code><\/pre>\n![\"De](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/03\/about-page-customized.jpg\")
![\"De](\"https:\/\/kinqsta.com\/wp-content\/uploads\/2023\/03\/customizing-navbar.jpg\")