Sessie 13: GitHub: Je code online, voor iedereen

Tot nu toe leeft al je code op jouw laptop. Handig voor jou, maar niemand anders kan erbij. En als je laptop crasht, ben je alles kwijt.

GitHub is een website waar je Git-repositories online zet. Het is een back-up, een portfolio, en een samenwerkingsplatform in één. Vandaag zet je jouw code op GitHub. Aan het einde van deze sessie kan iedereen met een internetverbinding jouw projecten bekijken, en jij die van hen.

Wat is GitHub?

GitHub is niet hetzelfde als Git. Git is het versiebeheersysteem dat op jouw computer draait. GitHub is een website (github.com) die Git-repositories host: een soort Google Drive voor code, maar dan met Git eronder.

Wat GitHub toevoegt aan Git:

  • Back-up in de cloud. Je code staat niet alleen lokaal. Laptop kapot? Je code overleeft.
  • Samenwerken. Meerdere mensen kunnen aan dezelfde repo werken. GitHub regelt wie wat mag.
  • Pull requests. Je vraagt toestemming om jouw wijzigingen in iemands project te stoppen, met discussie en review.
  • Issues. Bugs melden, features voorstellen, taken bijhouden: allemaal in je repo.
  • Portfolio. Je GitHub-profiel is je visitekaartje. Werkgevers kijken ernaar.

GitHub is niet de enige optie; er zijn alternatieven zoals GitLab en Bitbucket. Maar GitHub is de grootste, met meer dan 100 miljoen gebruikers. In deze sessies gebruiken we GitHub.

Stap 0: Een GitHub-account maken

  1. Open github.com in je browser.
  2. Klik op Sign up.
  3. Vul je e-mailadres in. Gebruik hetzelfde adres dat je in sessie 11 bij git config hebt ingesteld: dat scheelt gedoe.
  4. Kies een username. Dit wordt jouw identiteit op GitHub. Kies iets dat je over 5 jaar nog steeds leuk vindt. Je kunt je username later veranderen, maar oude links naar jouw profiel werken dan niet meer.
  5. Verifieer je account via de e-mail die GitHub stuurt.
  6. Kies het Free-abonnement. Alles wat je nodig hebt is gratis: onbeperkt publieke en private repositories.

Tip voor coaches: check of de ninjas toegang hebben tot hun e-mail tijdens de sessie. Sommige laptops staan niet ingelogd op webmail. Zorg voor een plan B: als e-mailverificatie niet lukt, kunnen ninjas GitHub later thuis verifiëren. De rest van de sessie werkt ook zonder verificatie.

Stap 1: Je eerste repository op GitHub

Je hebt een lokaal project op je computer (van sessie 11). Die ga je nu online zetten.

Op GitHub, klik rechtsboven op het + icoontje → New repository.

Vul in:

VeldWat je invult
Repository namemijn-eerste-git-project (zelfde als je lokale map)
Description“Mijn eerste Git-project (CoderDojo sessie 11)”
Public / PrivateKies Public: anderen mogen je code zien
Initialize with READMENIET aanvinken: je hebt al een lokaal project

Klik Create repository.

GitHub toont nu instructies. Kies het blok onder "…or push an existing repository from the command line". Kopieer die drie commando’s: die heb je zo nodig.

Stap 2: Je lokale repo koppelen aan GitHub

In je terminal (in je projectmap):

git remote add origin https://github.com/JOUW_USERNAME/mijn-eerste-git-project.git

Wat gebeurt hier? remote is een externe locatie waar jouw repo ook staat. origin is de naam die je die locatie geeft. “origin” is de standaardnaam voor je belangrijkste remote. Je kunt meerdere remotes hebben (bijvoorbeeld origin voor GitHub, backup voor GitLab), maar één is meestal genoeg.

Controleer of het gelukt is:

git remote -v

Je ziet:

origin  https://github.com/JOUW_USERNAME/mijn-eerste-git-project.git (fetch)
origin  https://github.com/JOUW_USERNAME/mijn-eerste-git-project.git (push)

fetch = hier haal je code vandaan. push = hier stuur je code naartoe. Meestal zijn die hetzelfde.

Stap 3: Je code online zetten met git push

Nu komt het moment: je lokale commits naar GitHub sturen.

git push -u origin master

push = stuur mijn commits naar de remote. -u origin master = “onthoud dat master op mijn computer hoort bij master op origin.” De volgende keer kun je gewoon git push typen, want Git onthoudt de koppeling.

GitHub vraagt om in te loggen. Dat kan op twee manieren:

  1. Via de browser: GitHub opent een browservenster, je klikt op “Authorize”. Klaar.
  2. Met een Personal Access Token: maak je aan via GitHub → Settings → Developer settings → Personal access tokens → Tokens (classic). Geef de token een naam, vink repo aan, kopieer de token, en plak hem als wachtwoord in de terminal.

Voor ninjas: methode 1 (browser) is het makkelijkst. Als dat niet werkt, help dan met een token.

Na een succesvolle push, ververs je GitHub-pagina. Je bestanden staan er! Je hallo.py, je commit-geschiedenis: alles.

Stap 4: Wijzigingen pushen

Maak een wijziging lokaal:

echo 'print("GitHub is cool!")' >> hallo.py
git add hallo.py
git commit -m "Add GitHub enthusiasm"

Push naar GitHub:

git push

Je hoeft nu geen -u origin master meer, want Git weet de weg. Ververs GitHub: je nieuwe commit staat erbij.

Stap 5: Een nieuw project starten via GitHub

Dit is de omgekeerde route: je begint op GitHub en haalt het naar je computer.

Op GitHub: New repository. Noem hem python-spelletje. Vink dit keer wél Add a README file aan; GitHub maakt dan een repo met één bestand erin. Klik Create repository.

Nu haal je deze repo naar je computer. Dit heet clonen:

cd ~   # ga naar je home-map
git clone https://github.com/JOUW_USERNAME/python-spelletje.git

GitHub maakt een map python-spelletje aan met de README erin. En het is meteen een volwaardige Git-repository: de .git-map zit er al in. Je hoeft geen git init te doen.

cd python-spelletje
git log --oneline   # je ziet de eerste commit die GitHub voor je maakte

Nu kun je hier lokaal verder werken en je commits pushen naar GitHub, precies zoals in Stap 3 tot 4.

Stap 6: Wat als iemand anders ook wijzigingen maakt?

Stel: je hebt thuis aan python-spelletje gewerkt en gepusht. Nu ben je op de dojo-laptop en wil je verder. Je hebt de nieuwste versie nog niet.

git pull

git pull haalt de nieuwste commits van GitHub naar jouw computer. Het is twee acties in één: git fetch (ophalen) + git merge (samenvoegen met jouw lokale code).

Altijd git pull doen voor je begint met werken, anders loop je achter en krijg je merge conflicts.

Samenvatting van de workflow:

CommandoWat het doet
git pullHaal nieuwste versie op van GitHub
Werk aan je code, maak commits (git add, git commit)
git pushStuur jouw commits naar GitHub

Onthoud: pull voor je begint, push als je klaar bent.

Showcase

Laat aan een coach en een buddy zien:

  1. Je GitHub-profiel met minstens één repository.
  2. De commit-geschiedenis van je repo op GitHub (klik op “X commits” boven de bestandslijst).
  3. Een verse git push die net op GitHub is aangekomen.

Tot de volgende keer!

“Nu staat je code online. Maar wat zet je in een commit message? Hoe schrijf je een bericht dat over drie maanden nog steeds duidelijk is? En hoe werk je met een team zonder de boel te breken? Volgende keer: de professionele kant van Git: best practices die elke developer gebruikt.”

Neem mee naar huis

  1. Makkelijk: Push een bestaand lokaal project naar een nieuwe GitHub-repository.
  2. Middel: Maak 3 commits lokaal, push ze, en check op GitHub of ze allemaal zichtbaar zijn.
  3. Lastig: Clone een repo van GitHub, maak een wijziging, commit, en push terug.
  4. Erg lastig: Simuleer werken op twee computers: clone een repo, maak een commit en push. Ga naar een andere map, clone dezelfde repo opnieuw (alsof het een andere computer is), maak een andere commit, en probeer te pushen. Wat gebeurt er? Los het op met git pull.