GitHub tutorial voor beginners: Begin simpel met GitHub!

In deze GitHub tutorial voor beginners krijg je eerst een korte GitHub introductie (Introduction) en daarna gaan we lekker aan de slag. Aan de hand van een simpel oefenproject ga je basic Git commands (Instructies) leren toepassen. Op deze manier kan je ook GitHub gaan gebruiken voor je eigen projecten. Tot slot lees je waar je nog meer goede tutorials en cursussen over GitHub kan vinden voor beginners, om er nog dieper in te duiken. Lees lekker verder!

Korte GitHub introductie (Introduction)

GitHub is een online platform waar je gebruik kan maken van het beste versiebeheersysteem ter wereld, namelijk Git. Zonder GitHub zou je ook Git kunnen gebruiken, maar met GitHub is het makkelijker om je code te delen met andere mensen en er zijn extra features.

Miljoenen programmeurs wereldwijd gebruiken GitHub. Dit doen ze onder andere voor hun eigen projecten, om mee te doen met andere projecten en om inspiratie op te doen uit code van andere projecten.

Verder gaan we in deze GitHub tutorial voor beginners er niet te veel woorden aan vuilmaken over wat GitHub precies is en wat je allemaal met GitHub kan doen. In het artikel “Wat is GitHub?” lees je daar meer over.

GitHub logo

Git installeren en GitHub account aanmaken

Laten we gelijk beginnen! Als eerste moet je het versiebeheersysteem Git op je computer installeren. Op de website van Git vind je instructies over hoe je Git kan installeren op een Linux, macOS en Windows computer.

Daarna maak je een account aan op GitHub. Heb je Git geïnstalleerd en een account aangemaakt op GitHub? Top! Dan gaan we verder.

Repository aanmaken op GitHub

Een repository bevat alle bestanden van je project en de revisiegeschiedenis van elk bestand. Je kan het zien als de hoofdmap voor je project.

Wij gaan een repository aanmaken op GitHub en dan clonen we de repository, maar je zou het ook op een andere manier kunnen doen. Dit laten we in het Init voorbeeld zien bij de andere basic Git commands buiten het oefenproject om.

Log eerst in op GitHub met je aangemaakte account, als je dat nog niet hebt gedaan. Klik rechtsboven in de hoek naast de avatar van je GitHub account op het plusje en daarna klik je op “New repository”:

New repository dropdown GitHub

Geef de repository een naam en eventueel een korte beschrijving als je dat wilt:

Repository naam GitHub

Voeg een README bestand toe, om later eventueel een (uitgebreidere) beschrijving te geven aan je project:

Add README file GitHub

Klik tot slot op de groene “Create repository” knop om de repository aan te maken:

Create repository groene knop GitHub

Je hebt nu een repository op GitHub aangemaakt. Op naar de volgende stap!

Clone repository naar je lokale omgeving en maak simpel HTML bestand

Het is de bedoeling om lokaal op je eigen computer aanpassingen te maken in het oefenproject. Vandaar dat je de repository die je zojuist hebt aangemaakt gaat clonen.

Deze aanpassingen stuur je uiteindelijk door naar de repository op Github (Push). Als je dit meerdere malen doet, dan heb je verschillende versies van je project netjes op GitHub staan in de repository.

In deze GitHub tutorial voor beginners gaan we basic Git commands uitvoeren in een command line interface. Ben je daar nog niet in thuis? Voor Windows gebruikers gaan we uitleggen hoe je er eenvoudig gebruik van kan maken.

Terminal macOS gebruiken

Ben je een macOS gebruiker en heb je weinig kennis van de Terminal? Op een macOS computer wordt de command line interface Terminal genoemd. Dan is het aan te raden om dit artikel op macpaw.com te lezen, zodat je de basis van de Terminal gaat begrijpen en mee kan doen bij het doorvoeren van de basic Git commands in deze GitHub tutorial voor beginners.

Command line interface Windows gebruiken

Op een Windows computer kan je eenvoudig via de Windows zoekbalk zoeken op “cmd” en dan de “Opdrachtprompt” openen. Nog eenvoudiger is om via “De verkenner”, waarin je normaal gesproken naar mappen en bestand zoekt, de command line interface te openen vanuit de juiste map waarin je de repository wilt opslaan.

In ons geval willen we de repository opslaan in de “Development” map:

Development map De verkenner Windows

Kijk zelf in welke map je het liefst de repository wilt opslaan. Haal het pad weg naar de map, typ “cmd” en klik daarna op Enter:

cmd De verkenner Windows

Nu ben je in de command line interface en je hebt gelijk het pad ingesteld naar de map waarin je de repository wilt opslaan:

Development map pad command line interface Windows

Clone Git command uitvoeren

Voordat we de clone Git command gaan uitvoeren, ga je eerst terug naar de pagina op GitHub waar je repository staat. Daar klik je op de groene “Code” knop en je kopieert de URL:

Kopieer URL clone GitHub

Voer in de command line interface de Git “clone” command uit met daarachter de URL die je hebt gekopieerd:

Clone Git command voorbeeld command line interface Windows
Klik op de afbeelding om het te vergroten

Klik op Enter en de repository wordt opgeslagen in de map waar je naartoe verwijst in de command line interface, in ons geval de “Development” map.

Lokaal simpel HTML bestand maken in repository

Om het simpel te houden, gebruiken we in deze GitHub tutorial voor beginners een Hello World! voorbeeld:

<!DOCTYPE html>
<html>
   <head>
      <title>Hello World! in HTML voorbeeld</title>
   </head>
   <body>
      <p>Hello World!</p>
   </body>
</html>

Sla dit als “index.html” op in de repository die je hebt opgeslagen. Weet je niet goed hoe je een HTML bestand aanmaakt, bewerkt en opslaat? Lees dan eerst “Hello World! HTML”.

Lokaal heb je nu een HTML bestand aangemaakt in de repository die je via een Git “clone” command op je computer hebt opgeslagen. In het volgende hoofdstuk gaan we dit HTML bestand via basic Git commands sturen naar je repository op GitHub, zodat je project op GitHub ook up-to-date is. Ook ga je leren om enkele andere basic Git commands toe te passen.

Basic Git commands toepassen aan de hand van simpel oefenproject

Voordat we de basic Git commands toepassen, moet je eerst in de command line interface het pad goed hebben staan naar de repository die je via een Git “clone” command hebt opgeslagen.

Dit kan je doen door in “De verkenner” naar de map van de repository te gaan, het pad verwijderen, “cmd” typen en op Enter klikken, zoals in “Command line interface Windows gebruiken” is beschreven.

Of stel dat je nog in de map bent waar je de repository map hebt opgeslagen via de command line interface, dan type je “cd” en daarachter de naam van de repository map:

Naar map repository command line interface

Klik daarna op Enter en dan heb je het juiste pad staan naar de repository op je computer. Via dit pad naar de repository op je computer heb je een connectie met de repository in je account op GitHub. Op die manier kan je de basic Git commands gaan toepassen en wijzigingen doorvoeren.

Belangrijk is ook om alvast de Git workflow te begrijpen. Een lokale repository bestaat uit drie “trees” en die worden door Git beheerd. Als eerste zitten in de “Working directory” de bestanden van je lokale repository.

Daarna is er de “Index”. Dit is een verzamelplaats waar Git veranderingen bijhoudt. Tot slot is er de “Head”. Hier staat de laatste commit in die je hebt doorgevoerd.

Via de “Head” verstuur je uiteindelijk alle veranderen naar de repository op GitHub. Door het toepassen van de onderstaande basic Git commands, zal je de Git Workflow goed begrijpen.

Add

We hebben in de lokale repository een HTML bestand aangemaakt en willen dit uiteindelijk versturen naar de repository op GitHub. De eerste stap is om de “add” command toe te passen, zodat de veranderingen van je lokale repository in de “Index” terechtkomen.

Door het naar de “Index” te sturen, vertel je als het ware aan Git dat er veranderingen zijn doorgevoerd en dat je graag wilt dat Git deze veranderingen bijhoudt.

Met git add -A geef je door aan Git dat je wilt dat Git veranderingen in alle bestanden van je repository bijhoudt. In de command line interface op Windows ziet dat er zo uit:

Add all basic Git command voorbeeld command line interface Windows

Klik op Enter. De veranderingen staan nu in de “Index”.

De overige basic Git commands voer je ook op deze manier uit, dus je weet nu hoe het werkt. Vanaf nu laten we alleen nog maar de basic Git commands zien en niet meer de gehele command line interface. In dit geval hebben we deze basic Git command toegepast:

git add -A

Commit

We passen de “commit” command toe om de veranderingen toe te voegen aan de “Head”:

git commit -m "HTML bestand aangemaakt"

Tussen de aanhalingstekens kan je commentaar neerzetten over de aanpassingen die je hebt gemaakt. De veranderingen zijn nu nog niet doorgevoerd in de repository op GitHub.

Push

Met de “push” command stuur je de gemaakte veranderingen naar de repository op GitHub:

git push

Kijk nu eens op GitHub naar de pagina waar je repository staat. Je ziet dat de veranderingen in je lokale repository nu doorgevoerd zijn in de repository op GitHub, met het commentaar daarbij:

Commit voorbeeld veranderingen GitHub
Klik op de afbeelding om het te vergroten

Ook zie je dat je nu twee commits hebt gedaan. De eerste is namelijk toegepast toen je de repository op GitHub hebt aangemaakt:

Aantal commits voorbeeld GitHub

Bij nieuwe veranderingen die je lokaal doet in je repository, volg je het proces opnieuw. Eerst een “add”, daarna een “commit” en dan een “push” command.

Pull

Het kan natuurlijk zo zijn dat je lokale repository niet meer up-to-date is met de repository op GitHub, bijvoorbeeld omdat je zelf vanaf een andere computer veranderingen hebt gestuurd naar GitHub of dat een teamgenoot van je project dat heeft gedaan.

Laten we als voorbeeld even een verandering aanbrengen in de repository op GitHub zelf. Daarna kan je met een “pull” command je lokale repository updaten.

Ga naar de pagina op GitHub waar je repository staat en klik op het “index.html” bestand:

Klik op bestand repository GitHub
Klik op de afbeelding om het te vergroten

Daarna klik je op het icoontje waarmee je het bestand kan bewerken:

Bewerken knop bestand GitHub

Voeg een extra paragraaf toe aan het HTML bestand. Het HTML bestand ziet er nu zo uit:

<!DOCTYPE html>
<html>
   <head>
      <title>Hello World! in HTML voorbeeld</title>
   </head>
   <body>
      <p>Hello World!</p>
      <p>Tweede paragraaf</p>
   </body>
</html>

Klik daarna onderaan op de groene “Commit changes” knop om de veranderingen door te voeren. Pas de “pull” command toe om je lokale repository te updaten met de verandering die je hebt doorgevoerd in de repository op GitHub:

git pull

Kijk nu eens in het “index.html” bestand dat in de repository op je computer staat. Je ziet dat hier nu ook een extra paragraaf is toegevoegd en de repository weer up-to-date is.

Als je meer met GitHub gaat doen, kan er soms ook een merge conflict ontstaan. Het fetchen (Ophalen) en mergen (Samenvoegen) gaat namelijk automatisch bij het toepassen van een “pull” command.

Een merge conflict ontstaat wanneer hetzelfde deel van een stukje code is veranderd in twee bestanden op een andere manier. Als je dat wilt mergen, dan moet Git weten welke verandering er in de uiteindelijk merge moet worden toegevoegd.

Dit moet je dan handmatig oplossen. In deze GitHub tutorial voor beginners gaan we daar niet dieper op in. Onder andere op de website van Git en GitHub lees je meer over merge conflicten en hoe je ze kan oplossen.

Nieuwe branch

Het aanmaken van een nieuwe branch is handig als je bijvoorbeeld eerst code wilt testen, voordat het naar de “productversie” van een project gaat.

Wij gaan lokaal een nieuwe branch aanmaken, genaamd “test” en gelijk daarnaartoe switchen:

git checkout -b test

Op deze manier push je de “test” branch naar de repository op GitHub en je laat het gelijk door Git tracken:

git push -u origin test

Ga nu eens naar de pagina op GitHub waar de repository staat. Klik boven de bestanden op “main” en klik daarna op de “test” branch om daarnaartoe te switchen:

Switch branch voorbeeld GitHub

Je ziet dan dat de “test” branch op dit moment helemaal gelijk is aan de “main” branch. Interessant is om nu lokaal in het HTML bestand een derde paragraaf toe te voegen als aanpassing.

Via de “add”, “commit” en “push” command stuur je deze aanpassing naar de repository op GitHub. Deze aanpassing gaat naar de “test” branch op GitHub, omdat lokaal de “test” branch momenteel je actieve branch is.

Als je nu in de “test” branch op GitHub kijkt in het HTML bestand, dan zie je dat er een derde paragraaf is toegevoegd. Zometeen gaan we deze aanpassing mergen met de “main” branch.

Checkout

Op deze manier gaan we lokaal weer switchen van de “test” branch naar de “main” branch met een “checkout” command:

git checkout main

Als je lokaal het HTML bestand refresht, zie je dat het HTML bestand weer twee paragrafen heeft, omdat we alleen een derde paragraaf hebben toegevoegd in het HTML bestand in de “test” branch.

Merge

Via de “merge” command voegen we de “test” branch samen met de “main” branch:

git merge test

Refresh lokaal het HTML bestand en je zal zien dat er een derde paraaf is toegevoegd! Als je een merge conflict hebt, probeer dit dan op te lossen. Stuur de aanpassing naar GitHub, zodat de main branch op GitHub ook weer up-to-date is.

Hopelijk weet je nu hoe je basic Git commands kan toepassen. Probeer er met dit oefenproject eens verder mee te spelen en test verschillende basic Git commands meerdere keren uit.

Andere basic Git commands buiten oefenproject om

In deze GitHub tutorial voor beginners hebben we ervoor gekozen om een aantal belangrijke basic Git commands uit te leggen aan de hand van een simpel oefenproject, zodat je ook lekker mee kan doen en het daardoor beter begrijpt.

De basic Git commands in dit hoofdstuk bevatten een korte uitleg met de command erbij, zonder dat we het aan de hand van het oefenproject uitleggen. Via de doorgelinkte artikelen krijg je meer informatie.

Zelf zou je een aantal van de onderstaande commands kunnen toepassen op het oefenproject. Andere commands zou je kunnen toepassen op andere oefenprojecten.

Belangrijk is om het zelf te leren toepassen, zodat je het echt in de vingers krijgt.

Init

Met de “init” command maak je een nieuwe Git repository aan in een bestaande lokale map:

git init <Naam van repository>

In dit artikel op de website van Git lees je er meer over.

Als je eerst op GitHub een repository aanmaakt, dan krijg je automatisch de commands om deze repository lokaal op je computer te zetten.

Status

De “status” command geeft alleen maar informatie en voert geen veranderingen door. Deze command toont de huidige status van de “Working directory” en de “Index”:

git status

In dit artikel op de website van GitHub lees je er meer over.

Fetch

De “fetch” command zorgt ervoor dat alle nieuwe data van de repository op GitHub wordt gedownload:

git fetch origin

Het verschil met de “pull” command is dat er nog niks lokaal wordt doorgevoerd in de code.

Op Stack Overflow lees je meer over het verschil tussen de “fetch” en “pull” commands en wat het nut ervan is.

Tag

Tags zijn handig voor software releases. Met de volgende command kan je eenvoudig alle tags zien van je project:

git tag

Lees op de website van Git meer over tags en ook hoe je ze aanmaakt.

Nog meer GitHub tutorials en cursussen voor beginners

In deze GitHub tutorial voor beginners heb je geleerd om versiebeheer toe te passen met Git voor een oefenproject op GitHub. Je weet al hoe een aantal basic Git commands werken en hoe je ze toepast.

Ook heb je een korte GitHub introductie (Introduction) gehad en weet je beter wat dit online platform is. Als je er echt serieus gebruik van wilt maken, is het verstandig om daar andere goede tutorials en cursussen voor te volgen, zodat je nog dieper in de mogelijkheden van GitHub gaat duiken.

Op Pluralsight staan hele goede GitHub tutorials en cursussen voor beginners. In “Pluralsight review en ervaringen” lees je meer over dit gave platform. Je kan Pluralsight zelfs 10 dagen helemaal gratis uitproberen!

Ook op Coursera staan GitHub leermogelijkheden van hoge kwaliteit voor beginners. In “Coursera review” lees je meer over dit geweldige online leerplatform.

Ga lekker verder met meer leren over GitHub en zorg dat je programmeerprojecten nog professioneler zijn! Versiebeheer is noodzakelijk voor goede programmeurs.

Heb je nog vragen en/of opmerkingen? Laat dan hieronder een reactie achter of neem contact op.

Plaats een reactie