{"id":50637,"date":"2023-02-27T14:02:57","date_gmt":"2023-02-27T13:02:57","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=50637&preview=true&preview_id=50637"},"modified":"2023-06-09T17:54:22","modified_gmt":"2023-06-09T15:54:22","slug":"github-pages","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/github-pages\/","title":{"rendered":"Klaar voor de start… af! Een statische site maken met GitHub Pages"},"content":{"rendered":"

Met alle huidige populaire webontwikkelingtools en frameworks waar je uit kan kiezen wordt het maken van een website vandaag de dag steeds ingewikkelder. Maar soms heb je niet veel interactiviteit nodig op je site. Als je alleen informatie wil bieden aan de bezoeker en geen ingewikkelde functionaliteit nodig hebt, is een statische site misschien de juiste keuze.<\/p>\n\n

In deze tutorial leer je wat een statische site is, inclusief de voordelen en de beperkingen ervan, en hoe je gratis een eenvoudige persoonlijke website kunt maken en implementeren met HTML en Bootstrap met behulp van GitHub Pages.

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

Wat zijn GitHub Pages?<\/h2>\n

GitHub<\/a> is een web-based platform voor het hosten van Git repositories en het samenwerken aan software projecten. Het biedt tools voor het delen en volgen van codewijzigingen, het beheren en beoordelen van code, en de mogelijkheid om pull requests te openen en te beoordelen.<\/p>\n

Zorg dat je Git en GitHub<\/a> niet met elkaar verward! GitHub is een hostingdienst die samenwerking tussen developers mogelijk maakt, terwijl Git de lokale versiebeheersoftware is die je gebruikt om momentopnames van de staat van je softwareproject op te slaan.<\/p>\n

GitHub Pages<\/a> is een van de beste features van GitHub. Het is een dienst waarmee je rechtstreeks vanuit een GitHub repository een statische website<\/a> kunt hosten. Dit betekent dat je je repository kunt gebruiken om de code en bestanden van je website op te slaan, en GitHub zal ze automatisch publiceren als een website die je online kunt openen.<\/p>\n

GitHub Pages is met andere woorden een snelle en gemakkelijke manier om je website op te zetten, en het is vooral handig voor het tonen van je portfolio<\/a>, open source projecten, of andere statische content.<\/p>\n

Statische versus dynamische websites<\/h3>\n

Zoals we gezien hebben, biedt GitHub Pages een manier om statische websites<\/a> te deployen. Maar wat is het verschil tussen een statische website en een dynamische website?<\/p>\n

Laten we beginnen met het bespreken van de content op genoemde sites.<\/p>\n

Statische content verwijst naar de elementen van de website die voor alle gebruikers hetzelfde blijven, ongeacht wie ze zijn of welke acties ze op de site ondernemen. Dit kunnen dingen zijn als de tekst, afbeeldingen en layout van de website, maar ook de onderliggende code en bestanden waaruit de site bestaat. Een statische site wordt aan de gebruiker geleverd, precies zoals hij is opgeslagen.<\/p>\n

Dynamische content daarentegen is content die verandert op basis van de handelingen van de gebruiker – zoals inloggen, interactie met een paywall, of reageren op een bericht – of andere factoren, zoals de huidige tijd of locatie.<\/p>\n

Een website die bijvoorbeeld een stilstaand beeld van een product toont, zal aan elke gebruiker altijd hetzelfde beeld tonen (statisch). Aan de andere kant zal een website die de huidige tijd weergeeft elke gebruiker een andere tijd tonen, afhankelijk van zijn locatie (dynamisch).<\/p>\n

In het algemeen kunnen we zeggen dat een website statisch is als hij aan de frontend<\/a> alleen HTML, CSS en JavaScript<\/a> bevat, zonder servertechnologie\u00ebn als PHP of Python<\/a> die met een database werken.<\/p>\n

\"Kinsta's
Twitter is een dynamische site.<\/figcaption><\/figure>\n

Hoewel het niet mogelijk is om dynamische websites te bouwen met GitHub Pages, kun je gemakkelijk je eigen website bouwen met behulp van een CMS<\/a> zoals WordPress<\/a>, of statische site generatoren zoals Gatsby<\/a> of Hugo<\/a>.<\/p>\n

GitHub Pages belangrijkste features<\/h3>\n

Laten we eens kijken naar de sterke punten van GitHub Pages als hostingdienst:<\/p>\n

    \n
  1. Eenvoudig instellen en publiceren:<\/strong> GitHub Pages maakt het makkelijk om met een paar eenvoudige stappen aan de slag te gaan. Je kunt GitHub Pages inschakelen voor je repository en de bron voor je websitebestanden opgeven, en GitHub zal je website automatisch publiceren en beschikbaar maken op een URL gebaseerd op je gebruikersnaam en repository-naam.<\/li>\n
  2. Aangepaste domeinen:<\/strong> Met GitHub Pages kun je een aangepaste domeinnaam voor je website gebruiken in plaats van de standaard URL die GitHub biedt. Hierdoor kun je je eigen branding gebruiken en het gebruikers gemakkelijker maken je website te vinden en te openen.<\/li>\n
  3. HTTPS ondersteuning:<\/strong> GitHub Pages biedt ondersteuning voor HTTPS, wat veilige verbindingen met je website mogelijk maakt. Dit is cruciaal voor het opbouwen van het vertrouwen van je site.<\/li>\n
  4. Jekyll ondersteuning:<\/strong> GitHub Pages ondersteunt Jekyll, een statische sitegenerator waarmee je geavanceerde websites kunt maken met behulp van templates en andere features. Dit maakt het gemakkelijk om professioneel ogende websites te maken zonder alle code vanaf nul te hoeven schrijven.<\/li>\n<\/ol>\n

    Beperkingen<\/h3>\n

    Zoals gezegd kun je alleen statische sites maken met GitHub Pages. Als je een complex project wilt bouwen met veel functionaliteiten zal je andere hostingdiensten<\/a> nodig hebben. Je moet er ook rekening mee houden, dat je GitHub Pages niet kunt gebruiken voor commerci\u00eble doeleinden, zoals het runnen van een online bedrijf, of e-commerce<\/a>.<\/p>\n

    GitHub Pages staat niet toe dat je site groter is dan 1 GB, wat betekent dat de bestanden van je repository die hoeveelheid geheugen niet mogen overschrijden. Meestal is 1 GB meer dan genoeg voor een statische site; zorg er alleen voor dat je je afbeeldingen comprimeert<\/a>.<\/p>\n

    Het heeft ook een zachte bandbreedtelimiet van 100 GB per maand. Deze hoeveelheid bandbreedte zou genoeg zijn om je website te verspreiden onder een paar duizend mensen per maand, dus tenzij je een enorm publiek hebt, zit je goed.<\/p>\n

    Maken en deployen met GitHub Pages: stap voor stap handleiding<\/h2>\n

    Een GitHub Page maken is een eenvoudig en rechttoe rechtaan proces om een statische site te hosten. Bedenk dat als je een soort databaseverbinding nodig hebt, je een externe databaseprovider<\/a> moet hebben.<\/p>\n

    In de onderstaande handleiding leer je hoe je een GitHub Page vanaf nul kunt maken. Dat is het maken van een remote repository, het bouwen van een responsieve persoonlijke website met HTML<\/a>, en het deployen naar het web met GitHub.<\/p>\n

    Laten we beginnen!<\/p>\n

    1. Meld je aan bij GitHub<\/h3>\n

    Om te beginnen moet je een actief GitHub account hebben. Als je er geen hebt, ga dan naar hun aanmeldingspagina<\/a>. Het zou niet meer dan een paar minuten moeten kosten om het formulier in te vullen.<\/p>\n

    \"GitHub
    GitHub aanmeldingspagina.<\/figcaption><\/figure>\n

    Na het aanmelden zou je een remote repository moeten kunnen aanmaken.<\/p>\n

    2. Maak een remote repository<\/h3>\n

    Een repository is een map waarin je alle code met betrekking tot een bepaald project opslaat.<\/p>\n

    Vanaf de GitHub homepage klik je op de knop “New” of Create repository” in het linkerpaneel van de site. Dit leidt je naar een formulier waar je de informatie van je repo invult.<\/p>\n

    \"GitHub
    Maak een GitHub repository aan.<\/figcaption><\/figure>\n

    Deze volgende stappen zijn cruciaal:<\/p>\n

      \n
    1. Stel de naam van je repository in op \"yourusername\".github.io<\/code>.<\/li>\n
    2. Vink de knop Public aan. Je moet het archief op Public<\/strong>\u00a0zetten om je site te publiceren.<\/li>\n
    3. Voeg een README toe.<\/li>\n<\/ol>\n

      Je kunt alleen een archief hebben voor een bepaalde persoonlijke account of organisatie. Daarom is de naam van het archief je gebruikersnaam en het github.io<\/code> domein. Later zullen we zien hoe je een site kunt opzetten vanuit een archief.<\/p>\n

      Tenzij je GitHub Pro hebt, kun je alleen een GitHub pagina publiceren als het repository openbaar is. Houd dit in gedachten als je de broncode van je site niet publiekelijk wilt delen.<\/p>\n

      Hierna zou je zoiets als het volgende moeten hebben:<\/p>\n

      \"Create
      Formulier van GitHub repo.<\/figcaption><\/figure>\n

      Als je de werkende broncode van je site al hebt, kun je de gewone Git workflow<\/a> overslaan en in plaats daarvan de bestanden direct in de repo droppen.<\/p>\n

      Klik daarvoor op het menu Add file<\/code> in je repo, en kies de optie Upload files<\/strong>. Selecteer dan de bestanden van je website, met het belangrijkste HTML bestand met de naam index.html<\/code>. Vergeet niet om ook al je CSS en JavaScript bestanden in het archief te plaatsen.<\/p>\n

      Druk tenslotte op de knop Commit changes<\/strong>.<\/p>\n

      \"Bestanden
      Upload de bestanden naar GitHub.<\/figcaption><\/figure>\n

      In het volgende deel zullen we een eenvoudige persoonlijke website bouwen met HTML en Bootstrap. Dan zullen we hem uploaden naar GitHub en hem instellen als een GitHub publieke pagina met een aangepast domein.<\/p>\n

      3. Bouw een persoonlijke website<\/h3>\n

      We beginnen met het klonen van de GitHub repo die we zojuist gemaakt hebben. Om dit te doen, moet je ervoor zorgen dat de Git client<\/a> al op je computer ge\u00efnstalleerd is. (Als je die niet hebt, bekijk dan onze tutorial over Git en GitHub<\/a>.)<\/p>\n