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.
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.
Wat zijn GitHub Pages?
GitHub 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.
Zorg dat je Git en GitHub 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.
GitHub Pages is een van de beste features van GitHub. Het is een dienst waarmee je rechtstreeks vanuit een GitHub repository een statische website 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.
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, open source projecten, of andere statische content.
Statische versus dynamische websites
Zoals we gezien hebben, biedt GitHub Pages een manier om statische websites te deployen. Maar wat is het verschil tussen een statische website en een dynamische website?
Laten we beginnen met het bespreken van de content op genoemde sites.
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.
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.
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).
In het algemeen kunnen we zeggen dat een website statisch is als hij aan de frontend alleen HTML, CSS en JavaScript bevat, zonder servertechnologieën als PHP of Python die met een database werken.
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 zoals WordPress, of statische site generatoren zoals Gatsby of Hugo.
GitHub Pages belangrijkste features
Laten we eens kijken naar de sterke punten van GitHub Pages als hostingdienst:
- Eenvoudig instellen en publiceren: 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.
- Aangepaste domeinen: 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.
- HTTPS ondersteuning: 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.
- Jekyll ondersteuning: 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.
Beperkingen
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 nodig hebben. Je moet er ook rekening mee houden, dat je GitHub Pages niet kunt gebruiken voor commerciële doeleinden, zoals het runnen van een online bedrijf, of e-commerce.
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.
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.
Maken en deployen met GitHub Pages: stap voor stap handleiding
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 moet hebben.
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, en het deployen naar het web met GitHub.
Laten we beginnen!
1. Meld je aan bij GitHub
Om te beginnen moet je een actief GitHub account hebben. Als je er geen hebt, ga dan naar hun aanmeldingspagina. Het zou niet meer dan een paar minuten moeten kosten om het formulier in te vullen.
Na het aanmelden zou je een remote repository moeten kunnen aanmaken.
2. Maak een remote repository
Een repository is een map waarin je alle code met betrekking tot een bepaald project opslaat.
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.
Deze volgende stappen zijn cruciaal:
- Stel de naam van je repository in op
"yourusername".github.io. - Vink de knop Public aan. Je moet het archief op Public zetten om je site te publiceren.
- Voeg een README toe.
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 domein. Later zullen we zien hoe je een site kunt opzetten vanuit een archief.
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.
Hierna zou je zoiets als het volgende moeten hebben:
Als je de werkende broncode van je site al hebt, kun je de gewone Git workflow overslaan en in plaats daarvan de bestanden direct in de repo droppen.
Klik daarvoor op het menu Add file in je repo, en kies de optie Upload files. Selecteer dan de bestanden van je website, met het belangrijkste HTML bestand met de naam index.html. Vergeet niet om ook al je CSS en JavaScript bestanden in het archief te plaatsen.
Druk tenslotte op de knop Commit changes.
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.
3. Bouw een persoonlijke website
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 al op je computer geïnstalleerd is. (Als je die niet hebt, bekijk dan onze tutorial over Git en GitHub.)
Ga naar het code tabblad van je repository en kopieer de SSH URL in de SHH optie.
Start dan een terminal of commandoregel op. Op de meeste Linux distributies en macOS kun je de sneltoets Ctrl + Alt + T gebruiken, of in het appmenu van je systeem zoeken naar Terminal. Op Windows kun je de Git BASH gebruiken die standaard bij Git is geïnstalleerd, de CMD, PowerShell, of een GUI client.
Typ op je terminal git clone en de URL die je gekopieerd hebt. Dit zal een kopie van het remote repository downloaden en aanmaken op je lokale machine, zodat je je website kunt bouwen.
Voer dan de nieuwe map genaamd yourusername.github.io in met cd en ls. Je zou de .git map moeten zien, die de configuratie en metadata van je project bevat, evenals het README.md bestand als je er een gemaakt hebt.
Open je favoriete teksteditor (zoals Sublime Text), en laten we beginnen met het maken van je website.
Maak in de root van het repository een bestand met de naam index.html (deze naam is vereist door GitHub Pages) en typ de typische HTML code structuur in:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kinsta User</title>
</head>
<body>
</body>
</html>Zoals we eerder zeiden, gaan we Bootstrap 5.0 gebruiken, een open source CSS framework dat ons helpt om gemakkelijker responsieve websites te bouwen. Zoals je zult zien, hoeven we voor deze specifieke site geen aangepaste CSS te gebruiken.
Om Bootstrap in onze pagina te krijgen, moeten we de gecompileerde CSS en JavaScript opnemen via een CDN. Plak de volgende code in de HTML <head> om Bootstrap CSS te kunnen gebruiken:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">Op dezelfde manier nemen we ook de Devicon CDN op om zonder veel moeite SVG iconen van populaire programmeertalen en technologieën te kunnen gebruiken:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">Om nu de JavaScript op te nemen, voeg je de volgende code in direct boven het einde van de </body> tag:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>We beginnen met het maken van een header voor onze website. Het wordt een donkere header, met links naar onze indexpagina en twee andere pagina’s – “Projects” en “Reading log” – die je later kunt maken:
<nav class="navbar navbar-dark navbar-expand-lg bg-dark ">
<div class="container-fluid">
<div class="mx-4">
<a class="navbar-brand" href="#">Kinsta User</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reading Log</a>
</li>
</ul>
</div>
</div>
</nav>We gebruiken de Bootstrap wrapper navbar en navbar-expand-lg om een responsieve container te maken die inklapt als de weergavebreedte kleiner is dan 992px. Dit gebeurt vanwege de rasteroptie lg. Als je meer wilt weten over rasteropties, kijk dan eens op de layoutpagina van Bootstrap.
Laten we nu twee responsieve kolommen binnen een container maken: een voor een gratis afbeelding van Unsplash en een andere voor een beschrijving van onszelf:
<div class="container my-4 ">
<div class="row justify-content-center">
<div class="col-lg mb-lg-4">
<img src="image.jpg" class="img-fluid" alt="" srcset="">
</div>
<div class="col-lg mx-2 align-self-center">
<div class="my-3">
<h1 class="text-center">I'm a Kinsta User</h1>
<p>As a passionate software developer, I am deeply enthusiastic about creating and
developing software applications. I am constantly learning and experimenting with new
technologies and approaches, and I have a strong desire to create innovative and effective
solutions to complex problems. I am driven by my curiosity and love for problem-solving, and
I
am committed to producing high-quality, well-designed software that meets the needs of
users.
</p>
</div>
</div>
</div>
</div>Zoals je ziet sourcen we een afbeelding uit een lokaal bestand, dus die moet in het repository staan als we onze wijzigingen naar de GitHub repo pushen.
Tenslotte gebruiken we in onze Bootstrap container SVG pictogrammen van Devicon, samen met een beetje interne CSS om onze vaardigheden op te laten vallen:
<div class="my-4">
<div class="text-center mb-4">
<h1>My Skills</h1>
</div>
<div class="row ">
<style>
I {
font-size: 4em;
}
</style>
<div class="col">
<div class="text-center">
<h4>WordPress</h4>
<i class="devicon-wordpress-plain"></i>
</div>
</div>
<div class="col">
<div class="text-center">
<h4>Django</h4>
<i class="devicon-django-plain"></i>
</div>
</div>
<div class="col">
<div class="text-center">
<h4>Python</h4>
<i class="devicon-python-plain"></i>
</div>
</div>
<div class="col">
<div class="text-center">
<h4>GitHub</h4>
<i class="devicon-github-original" ></i>
</div>
</div>
</div>
</div>Omdat we de <i> HTML tag gebruiken, kunnen we die behandelen als een lettertype. Zo stellen we de grootte van onze logo’s in op 4 em door het te declaren in de tag style.
Hier is het eindresultaat van deze eenvoudige persoonlijke website:
Wist je dat meer dan 50% van het websiteverkeer afkomstig is van mobiele apparaten? Omdat we Bootstrap gebruikten, bespaarden we veel CSS codering, en kregen we ook een responsieve website, zoals je hieronder kunt waarderen.
Je kunt deze site zoveel aanpassen als je wilt. Hier is de volledige broncode op GitHub, die je naar hartelust mag gebruiken.
Je kunt zelfs een headless CMS zoals Ghost koppelen met behulp van een van onze full-featured Applicatie Hosting oplossingen. Je kunt direct verbinding maken met je GitHub repository via je MyKinsta dashboard en je nieuwe site binnen enkele minuten in de lucht hebben.
Het is nu tijd om je bestanden te pushen. Voer daarvoor de volgende commando’s uit op je terminal, op het hoogste niveau van je project.
git add .
git commit -m "Added website source code and image"
git pushNu kunnen we deze website gebruiken om onze GitHub pagina in te stellen.
4. Een GitHub pagina publiceren
Zodra je de index.html naar de remote repository genaamd naar je gebruikersnaam pusht, zal GitHub automatisch een workflow proces starten om je site online te zetten. Het kan een paar minuten duren, maar je krijgt je statische site automatisch aan de praat.
De URL van je site zal zoiets als het volgende zijn: https://kinstauser.github.io/
Als je site na 10 minuten nog niet online is, kun je proberen een dummy wijziging in je code aan te brengen (bijvoorbeeld een spatie toevoegen) en opnieuw pushen om het bouwproces van GitHub Pages weer te activeren.
5. Een Repository GitHub pagina publiceren
Tot nu toe hebben we een gebruikerssite gemaakt, maar wat als we meerdere gepubliceerde GitHub sites willen hebben? Dan moeten we het doen met een project site.
Als voorbeeld gebruiken we de HTML technologie site die we gemaakt hebben in de Git for Web development tutorial.
De eenvoudigste manier is om naar het Settings tabblad van ons repository te gaan, en dan naar de Pages optie in het “Code and automation” gedeelte.
Selecteer de bron Deploy from a branch, en klik op de branch waarvan je de bestanden wilt deployen. Het wordt ten zeerste aanbevolen om vanaf de main branch te publiceren, maar features te maken en bugs op te lossen met behulp van neventakken, en die dan samen te voegen. Op deze manier introduceer je niet zo gemakkelijk fouten in de gepubliceerde site.
Als je de branch hebt gekozen, selecteer dan de map van waaruit je de bestanden wilt leveren – meestal de root (/) – en klik op Save.
Nogmaals, wacht een paar minuten. Je site zou beschikbaar moeten zijn op "yourusername".github.io/.
Om een archiefsite te depubliceren kun je naar Settings gaan, dan Pages, en op de drie puntjes optie klikken. Je ziet dan een vakje met de boodschap Unpublish site.
Geweldig! Je hebt de site van je open-source project in de lucht, maar de domeinnaam zelf is lang en zeker niet gemakkelijk te onthouden. Laten we eens kijken hoe we dit kunnen verbeteren.
6. Een aangepast domein instellen
De eenvoudigste manier om een aangepast domein voor een GitHub pagina in te stellen en ervoor te zorgen dat het werkt, is naar je DNS provider te gaan en vier A records aan te maken voor de IP adressen van GitHub Pages:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153Je moet ook een CNAME record instellen met yourusername.github.io als doel. Meestal zijn DNS wijzigingen traag, dus soms moet je even even geduld hebben, want het kan wel een hele dag duren.
Nadat je dit gedaan hebt, ga je naar de Custom domain sectie in de instellingen van je repo, typ je je domein in, klik op de Save knop, en wacht tot GitHub je aangepaste domein controleert.
Als je DNS het ondersteunt, vink je ook het vakje Enforce HTTPS aan om je site alleen over HTTPS te leveren.
Gefeliciteerd! Als je tot zover alles hebt gedaan, heb je nu een statische website die gratis in GitHub Pages wordt gehost.
Beste practices voor GitHub Pages
Voordat we dit artikel afsluiten, zijn hier enkele best practices waar je rekening mee moet houden bij het publiceren van een GitHub site:
- Maak nooit directe commits naar de branch waarvan je deployt. Maak wijzigingen in andere branches, maak dan een pull request aan.
- Kies een goed domein voor je site als je het je kunt veroorloven. Het is een van de belangrijkste beslissingen voor je persoonlijke branding of die van je project.
- Gebruik GitHub Pages niet voor commerciële doeleinden, zoals het opzetten van een e-commerce site.
- Evalueer je behoeften. Het is geweldig om gratis een statische site te kunnen publiceren, maar als je veel verkeer verwacht of complexe features wilt, is betalen voor een goede hostingdienst de beste manier.
Samenvatting
Webontwikkeling wordt met de dag ingewikkelder. Statische sites zijn er al sinds de komst van het internet, en ze zijn een prima manier om te beginnen met het maken van projecten.
In deze tutorial heb je geleerd wat statische sites zijn, en hoe je ze online kunt opzetten met behulp van GitHub Pages. Je hebt een eenvoudige persoonlijke site gemaakt met Bootstrap en die gepubliceerd als je GitHub gebruikerssite. Je hebt ook geleerd hoe je de site van een project aan de praat krijgt en hoe je hem zo nodig kunt depubliceren.
Al met al is GitHub Pages een handige en krachtige manier om je statische website gratis te hosten. Of je nu je portfolio wilt laten zien, je open source projecten wilt delen, of wilt beginnen met het creëren van een online aanwezigheid, GitHub Pages is een uitstekende keuze. En als je eenmaal genoeg verkeer krijgt of klaar bent om een full-stack site te maken, kun je naadloos overstappen naar andere Applicatie Hosting diensten zoals die van Kinsta zonder iets te missen.
Daniel is a self-taught Python Developer, Technical Writer, and long-life learner. He enjoys creating software from scratch and explaining this process through stunning articles. Follow him on Twitter: @DaniDiazTech
Laat een reactie achter