Jekyll tutorial: Een statische website maken

In het huidige digitale tijdperk is een website essentieel om online aanwezig te zijn, je merk te promoten en potentiële klanten te bereiken. Het maken van een website kan echter een ontmoedigende taak zijn.

Dit is waar statische sitegeneratoren (SSG’s) van pas komen – ze maken het gemakkelijk om mooie, snel ladende websites te maken zonder de noodzaak van complexe backendsystemen of databases.

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.

Hier is een live demo van de blogsite die je met Jekyll gaat bouwen.

Je hebt toegang tot de GitHub repository van het project als je het beter wilt bekijken.

Wat is Jekyll?

Jekyll is een gratis open-source SSG die gebouwd is en draait op de programmeertaal Ruby. Je hoeft niet te begrijpen hoe Ruby werkt om Jekyll te gebruiken; je hoeft alleen Ruby op je machine geïnstalleerd te hebben.

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 gebruikt.

Dit is wat Jekyll onderscheidt van de SSG’s:

1. Gemakkelijk te gebruiken: Jekyll gebruikt platte tekstbestanden en markdown syntaxis om inhoud te maken en te beheren, wat betekent dat je geen kennis van HTML of CSS hoeft te hebben om aan de slag te gaan.
2. Snel en veilig: Jekyll bevat geen server-side database of scripting, wat betekent dat er minder risico is op kwetsbaarheden en aanvallen. Het genereert statische HTML bestanden, waardoor je website ongelooflijk snel en veilig is.
3. Aanpasbaar: Jekyll is in hoge mate aanpasbaar, waardoor je layouts en templates kunt gebruiken of zelfs plugins kunt maken om de functionaliteit uit te breiden.
4. Gemakkelijk te implementeren: Jekyll genereert statische HTML bestanden die je kan deployen op een webserver of hostingprovider zonder dat je een dynamisch content management systeem nodig hebt.
5. Ondersteund door een grote community: Jekyll heeft een grote gemeenschap van gebruikers en developers achter zich, wat betekent dat er voldoende bronnen beschikbaar zijn als je hulp nodig hebt of de functionaliteit van je site wilt uitbreiden.

Zo installeer je Jekyll

Je moet eerst Ruby op je machine installeren voordat je verder kunt gaan met de installatie van Jekyll, zoals vermeld in de Jekyll documentatie.

Zo installeer je Jekyll op macOS

Ruby is standaard voorgeïnstalleerd 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ïnstalleerd is bijvoorbeeld 2.6.10, waarvan de laatste versie 3.1.3 is (op moment van schrijven).

Om dit op te lossen moet je Ruby correct installeren met een versiebeheerder als chruby. Je moet eerst Homebrew op je Mac installeren met het onderstaande commando in je terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

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:

brew doctor

Als je “Your system is ready to brew” krijgt, kun je nu verder gaan met het installeren van chruby en ruby-install met onderstaand commando:

brew install chruby ruby-install

Je kunt nu de nieuwste versie van ruby installeren, die 3.1.3 is, met behulp van het pakket ruby-install dat je zojuist hebt geïnstalleerd:

ruby-install 3.1.3

Dit duurt een paar minuten. Als het gelukt is, configureer dan je shell om automatisch chruby te gebruiken met het onderstaande commando:

echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
echo "chruby ruby-3.1.3" >> ~/.zshrc

Je kunt nu afsluiten en je terminal opnieuw starten, en dan controleren of alles werkt door dit commando uit te voeren:

ruby -v

Er zou moeten staan: ruby 3.1.3.

Je hebt nu de nieuwste versie van Ruby op je machine geïnstalleerd. Je kunt nu doorgaan met het installeren van de nieuwste Jekyll en bundler gem:

gem install jekyll bundler

Zo installeer je Jekyll op Windows

Om Ruby en Jekyll op een Windows machine te installeren, gebruik je de RubyInstaller. Dit kun je doen door een Ruby+Devkit versie te downloaden en te installeren van RubyInstaller Downloads en de standaardopties voor de installatie te gebruiken.

Voer in de laatste fase van de installatiewizard de stap ridk install uit – die wordt gebruikt om gems te installeren. Lees meer via de RubyInstaller Documentatie.

Kies bij de opties voor MSYS2 en MINGW development toolchain. Open een nieuw opdrachtpromptvenster en installeer Jekyll en Bundler met onderstaand commando:

gem install jekyll bundler

Zo controleer je of Jekyll correct is geïnstalleerd

Om te controleren of Jekyll correct is geïnstalleerd op je machine, open je je terminal en voer je het volgende commando uit:

jekyll -v

Als je het versienummer ziet, betekent dit dat Jekyll geïnstalleerd is en correct werkt op je systeem. Je bent nu klaar om Jekyll te gebruiken!

Jekyll commando’s en configuratie

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.

Jekyll CLI commando’s

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.

• jekyll build: Genereert de statische site in de _site directory.
• jekyll serve: Bouwt de site en start een webserver op je lokale machine, zodat je de site kunt bekijken in je browser op http://localhost:4000.
• jekyll new [site name]: Creëert een nieuwe Jekyll site in een nieuwe directory met de opgegeven sitenaam.
• jekyll doctor: Geeft eventuele configuratie- of dependencyproblemen weer.
• jekyll clean: Verwijdert de _site directory, waar de gegenereerde site bestanden zijn opgeslagen.
• jekyll help: Voert de helpdocumentatie voor Jekyll uit.
• jekyll serve --draft: Genereert en levert je Jekyll site, inclusief alle berichten die in de _drafts directory staan.

Je kunt ook enkele opties aan deze commando’s toevoegen. Zie een volledige lijst van Jekyll commando’s en opties in de Jekyll documentatie.

Jekyll configuratiebestand

Het Jekyll configuratiebestand (config file) is een YAML bestand met de naam _config.yml 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.

Hier zijn enkele van de meest gebruikte configuratie-opties:

• title: De titel van je site.
• description: Een korte beschrijving van je site.
• url: De basis URL van je site.
• baseurl: De subdirectory van je site, als die gehost wordt in een subdirectory van een domein.
• permalink: De URL-structuur voor je berichten en pagina’s.
• exclude: Een lijst van bestanden of mappen om uit te sluiten van het genereren van de site.
• include: Een lijst van bestanden of mappen om op te nemen in het sitegeneratieproces.
• paginate: Het aantal te tonen berichten per pagina bij gebruik van paginering.
• plugins: Een lijst van Jekyll-plugins om te laden.
• thema: Standaard is dit ingesteld op minima. Je kunt elk ander thema gebruiken door de naam ervan in te stellen en andere instellingen uit te voeren waarover we later in dit artikel meer zullen leren.

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 author_name en die dan zo in je templates gebruiken: {{ site.author_name }}.

Om je Jekyll configuratiebestand aan te passen, open je het bestand _config.yml in je Jekyll projectmap in een tekstverwerker en breng je wijzigingen aan.

Opmerking: Alle wijzigingen die je maakt in het configuratiebestand worden van kracht de volgende keer dat je je site genereert met jekyll build of jekyll serve.

Zo maak je een statische website op Jekyll

Nu je Jekyll op je machine geïnstalleerd hebt, kun je met één commando binnen een paar seconden een statische website op Jekyll maken. Open je terminal en voer dit commando uit:

jekyll new joels-blog

Zorg ervoor dat je “joels-blog” vervangt door je gewenste sitenaam.

Navigeer vervolgens naar de websitemap. Je ziet een basisstructuur van de Jekyll site met mappen en bestanden zoals deze:

├── _config.yml
├── _posts
├── Gemfile
├── Gemfile.lock
├── index.md
└── README.md

Hier zie je waar elk van deze mappen en bestanden voor dient:

• _config.yml: Het Jekyll configuratiebestand met de instellingen en opties van je site.
• _posts: Een map die de inhoud van je site bevat (kunnen blogposts zijn). Dit kunnen Markdown- of HTML bestanden zijn met een specifieke bestandsnaamconventie: JAAR-Maand-DAG-titel.MARKUP.
• Gemfile en Gemfile.lock: Bundler gebruikt deze bestanden om de Ruby gems te beheren waarop je site vertrouwt.
• index.md: De standaard homepage voor je site, gegenereerd uit een Markdown- of HTML-bestand.

Maar er zijn meer bestanden/mappen die je kunt gebruiken om je Jekyll website aan te passen. Deze mappen omvatten:

• _includes: Een map die herbruikbare HTML-fragmenten bevat die je in je lay-outs en pagina’s kunt opnemen. Zoals navbar, footer, e.t.c.
• _layouts: Een map die HTML lay-outsjablonen bevat die de structuur van je pagina’s bepalen.
• assets: Een map die alle bestanden bevat die door je site worden gebruikt, zoals afbeeldingen en CSS bestanden.
• _sass: Een map die Sass-bestanden bevat die gebruikt kunnen worden om CSS voor je site te genereren.

Deze bestandsstructuur biedt een solide basis voor een Jekyll project, maar je kunt hem naar behoefte aanpassen aan de specifieke behoeften van je project.

Quick Start optie: Gebruik onze GitHub template

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 op GitHub. Selecteer Use this template > Create a new repository om de startcode naar een nieuwe repository binnen je eigen GitHub account te kopiëren.

Zo bekijk je een Jekyll site

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:

jekyll serve

Dit zal een map _site 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.

Als je de URL in je webbrowser bezoekt, zie je je Jekyll site met het Minima thema:

Zo pas je een Jekyll site aan

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.

Hoe front matter werkt in Jekyll

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 genoemd.

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.

---
title:  "Welcome to Jekyll!"
description: "Introduction to what Jekyll is about and how it works"
date:   2023-03-07 16:54:37 +0100
---

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.

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.

Hoe je de standaard homepagina instelt

Je kunt ook standaard front matter instellen, zodat je niet voor vergelijkbare bestanden hetzelfde voorwerk hoeft te definiëren. Bijvoorbeeld als elk blogbericht dezelfde auteursnaam en lay-out gebruikt. Je kunt een aangepaste front matter definiëren in je _config.yml bestand om al je blogberichten te leveren.

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 bestand:

defaults:
 -
   scope:
     path: "posts" # empty string means all files
   values:
     layout: "post"
     author: "John Doe"

Wanneer je nu het commando jekyll serve 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.

Opmerking: Wanneer je geen pad definieert, zullen alle bestanden de gedefinieerde waarden voor de front matter gebruiken.

Pagina’s maken in Jekyll

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.

Als je bijvoorbeeld een pagina wilt maken met de URL https://voorbeeld.com/about, maak dan een bestand met de naam about.html of about.md. De bestandsextensie bepaalt welke opmaaktaal je gebruikt voor de inhoud van de pagina (HTML of Markdown).

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.

Layouts maken in Jekyll

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.

De eerste stap is het maken van een map _layouts 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 kunnen maken om de paginalayout voor alle pagina’s op je site te definiëren.

Je kunt de algemene structuur van je layouts het beste definiëren met HTML of een andere opmaaktaal.

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:

<!DOCTYPE html>
<html>
    <head>
        <title>{{ page.title }}</title>
    </head>
    <body>
        <header>
                
        </header>
        <main>{{ content }}</main>
        <footer>
            
        </footer>
    </body>
</html>

In dit voorbeeld worden de placeholders {{ page.title }} en {{ content }} vervangen door de werkelijke titel en inhoud van de pagina die wordt weergegeven.

Op dit moment zal elke pagina of bericht dat pagina als opmaakwaarde gebruikt deze opmaak hebben. Je kunt in de map _layouts 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ëren.

Zo werkt de map _includes in Jekyll

De map _includes bevat herbruikbare stukjes code die je in verschillende delen van je website kunt opnemen. Je kunt bijvoorbeeld een navbar.html bestand maken in je includes map en het toevoegen aan je page.html layoutbestand met behulp van de {% include %} tag.

<!DOCTYPE html>
 <html>
     <head>
         <title>{{ page.title }} </title>
     </head>
     <body>
         <header>{% include navbar.html %} </header>
         <main>{{ content }} </main>
         <footer>
             
         </footer>
     </body>
 </html>

Bij het bouwen zal Jekyll de tag vervangen door de inhoud van navbar.html.

De map _includes 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.

Berichten browsen in Jekyll

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 {% for %}.

Alle berichten op een Jekyll website worden opgeslagen in de variabele site.posts. Je kunt er doorheen lussen en de variabele {{ post.title }} Liquid gebruiken om de titel van elk bericht op deze manier uit te voeren:

{% for post in site.posts %}
  <h2>{{ post.title }}</h2>
{% endfor %}

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:

{% for post in site.posts %}
  <h2>{{ post.title }}</h2>
  <p>Published on {{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p>
{% endfor %}

Merk op dat in het bovenstaande voorbeeld het date Liquid filter de datum van elk bericht opmaakt in een meer menselijk leesbaar formaat.

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.

Zo voeg je een thema toe aan een Jekyll site

Er zijn verschillende eenvoudig toe te voegen thema’s, maar het goede nieuws  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 is, is het proces eenvoudiger.

Voor dit artikel zou je een blogthema installeren en het aanpassen om een blogsite op Kinsta te deployen. Dit is een op gem gebaseerd thema en je hebt toegang tot de broncode en instructies op GitHub.

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. Je kunt het standaard minima-thema in de Gemfile vervangen:

gem "jekyll-theme-clean-blog"

Voer het commando bundle install uit in de map van je site om het gem thema en de depencies te installeren.

Voeg in het bestand _config.yml van je site de volgende regel toe om het thema dat je wilt gebruiken te specificeren:

theme: jekyll-theme-clean-blog

Op dit punt is je thema klaar voor gebruik.

Je zult alle layouts in de map _layouts willen verwijderen om te voorkomen dat ze de layout van het thema overschrijven.

Je kunt dan in de documentatiie van het thema de layoutnamen voor je bestanden vinden. Als je bijvoorbeeld het thema jekyll-theme-clean-blog gebruikt, dan is de naam van de opmaak voor het bestand index.html home, andere pagina’s is page, en alle berichten is post.

Draai tenslotte jekyll serve om je site te bouwen en te serveren met het nieuwe thema.

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 directories van je site aan te passen.

Een Jekyll thema aanpassen

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.

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. In deze map kun je submappen maken om je afbeeldingen te organiseren.

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:

---
layout: page
title: About
description: This is the page description. 
permalink: /about/
background: '/assets/images/about-page.jpeg'
---

Doe dit voor alle pagina’s en berichten en je pagina ziet er zo uit:

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  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.

De nav links staan in het bestand navbar.html van de map _includes. Je kunt dit bestand maken, de code uit je broncode plakken, en de contactoptie verwijderen of elke nieuwe optie toevoegen die je wilt.

Als je je project opslaat, zul je zien dat de nav-opties worden aangepast:

Een laatste aanpassing is het maken van een berichtenpagina die al je blogberichten bevat – wat betekent dat je door alle berichten op deze pagina loopt.

Maak een bestand aan, posts.html en plak de volgende code:

---
layout: page
title: Blog
description: Expand your knowledge and stay informed with our engaging blog posts.
background: '/assets/images/blog-page.jpeg'
---

{% for post in site.posts %}

<article class="post-preview">
    <a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}">
        <h2 class="post-title">{{ post.title }}</h2>
        {% if post.subtitle %}
        <h3 class="post-subtitle">{{ post.subtitle }}</h3>
        {% else %}
        <h3 class="post-subtitle">
            {{ post.excerpt | strip_html | truncatewords: 15 }}
        </h3>
        {% endif %}
    </a>
    <p class="post-meta">
        Posted by {% if post.author %} {{ post.author }} {% else %} {{ site.author
        }} {% endif %} on {{ post.date | date: '%B %d, %Y' }} · {% include
        read_time.html content=post.content %}
    </p>
</article>

<hr />

{% endfor %}

Voel je vrij om de achtergrondafbeelding aan te passen aan je opgeslagen afbeelding. In bovenstaande code loop je door alle berichten om alle berichten op deze pagina weer te geven. Zo ziet de pagina met berichten eruit als hij is opgeslagen.

Zo voeg je inhoud toe aan een Jekyll site

Je hebt nu een Jekyll site gemaakt en de site naar wens geconfigureerd. De laatste stap zou zijn om inhoud toe te voegen of te leren hoe inhoud aan een Jekyll site kan worden toegevoegd.

Alle inhoud wordt opgeslagen in de map _posts. Elke stuk content wordt opgeslagen in een bestand met de naamgeving YYYY-MM-DD-title.md (of .html voor HTML-bestanden). Als je bijvoorbeeld een bericht wilt maken dat “Mijn eerste post” heet, maak je een 2023-03-08-mijn-eerste-post.md aan in de map _posts.

Zorg er vervolgens voor dat je voor elk post/inhoudsbestand bovenaan de voorinformatie over de post toevoegt. Dit omvat de lay-out, titel, beschrijving, datum en andere informatie.

---
layout: post
title: "How to Read Books: Tips and Strategies for Maximum Learning"
subtitle: "Reading books is one of the most powerful ways to learn new information, gain new perspectives, and expand your knowledge."
date: 2023-03-02 23:45:13 -0400
background: '/assets/images/blog/books.jpeg'
---

Vervolgens kun je onder het front matter blok je inhoud toevoegen met HTML tags of markdown syntaxis.

Sla het bestand op, en Jekyll zal het automatisch bouwen en opnemen in je site.

Zo deploy je je Jekyll site op Kinsta

Kinsta is een cloud platform waarmee je statische websites kunt hosten, waaronder Jekyll. Dit kun je doen door enkele configuraties in te stellen, je codes naar GitHub te pushen, en uiteindelijk te deployen naar Kinsta.

Vereisten: Je Jekyll site configureren

Controleer je Gemfile.lock bestand en zorg ervoor dat het een platform bevat voor alle apparaten. Om er zeker van te zijn dat alle platforms goed geconfigureerd zijn, voer je het volgende commando uit:

bundle lock --add-platform arm64-darwin-22 x64-mingw-ucrt x86_64-linux

Vervolgens kun je overgaan tot het maken van een Procfile – dit bestand specificeert de commando’s die worden uitgevoerd wanneer je site wordt gedeployd. Dit bestand werkt automatisch de uit te voeren commando’s bij in het tabblad Proces van MyKinsta. Dit is het commando dat moet worden toegevoegd aan je Procfile:

web: bundle exec jekyll build && ruby -run -e httpd _site

Je Jekyll site naar GitHub pushen

Laten we voor dit artikel Git commando’s gebruiken om je codes naar GitHub te pushen. Maak eerst een repository aan op GitHub; dit geeft je toegang tot de URL van de repository.

Je kunt nu een lokale Git repository initialiseren door je terminal te openen, naar de map te navigeren die je project bevat, en het volgende commando uit te voeren:

git init

Voeg nu je code toe aan de lokale Git repository met het volgende commando:

git add

Je kunt nu je wijzigingen committen met het volgende commando:

git commit -m "my first commit"

Opmerking: Je kunt “my first commit” vervangen door een kort bericht dat je wijzigingen beschrijft.

Tenslotte kun je je code naar GitHub pushen met de volgende commando’s:

git remote add origin [repository URL]
git push -u origin master

Opmerking: Zorg ervoor dat je “[repository URL]” vervangt door je eigen GitHub repository URL.

Als je deze stappen hebt voltooid, is je code naar GitHub gepushed en toegankelijk via de URL van je repository. Je kunt nu deployen naar Kinsta!

Je Jekyll site deployen naar Kinsta

Deployment naar Kinsta gebeurt in slechts enkele minuten. Begin bij het MyKinsta dashboard om in te loggen of je account aan te maken. Vervolgens autoriseer je Kinsta op GitHub.

Vervolgens kun je deze stappen volgen om je Jekyll site te deployen:

1. Klik op Applicaties in de linker zijbalk
2. Klik op Dienst toevoegen
3. Klik op Applicatie in de dropdown

Er verschijnt een popup waarmee je de repository kunt selecteren die je wilt deployen. Selecteer een branch die je wilt deployen als je meerdere branches in je repository hebt.

Je kunt dan een naam toekennen aan deze applicatie. Kies een datacenterlocatie uit de beschikbare 25, en dan zal de Procfile automatisch het webproces commando leveren.

Je applicatie begint nu met deployen. Binnen enkele minuten krijg je een link waarmee je naar de gedeployde versie van je website kunt gaan. In dit geval is dat: https://myblog-84b54.kinsta.app/

Samenvatting

Je hebt nu geleerd hoe Jekyll werkt en welke verschillende aanpassingen je met Jekyll kunt doen. Je kunt gerust stellen dat Jekyll een uitstekende tool is voor het maken van statische websites vanwege zijn eenvoud, flexibiliteit en krachtige mogelijkheden.

Jekylls intuïtieve templatesysteem, fluïde templates, en ingebouwde ondersteuning voor markdown en andere opmaaktalen maken het gemakkelijk om snel sites met veel inhoud te maken en te beheren.

Voel je vrij om kosteloos Kinsta’s Applicatie Hosting te proberen voor het hosten van je statische site en als het je bevalt, kies dan voor ons Hobby Pakket, vanaf $7/maand.

Wat vind jij van Jekyll? Heb je Jekyll gebruikt om iets te bouwen? Voel je vrij om je projecten en ervaringen met ons te delen in de comments hieronder.