Publiceer website met Github Pages

Github

Github is een versie beheer systeem bedoeld om veranderingen in (verzamelingen van) documenten bij te houden. Dat is reuze handig bij het ontwikkelen van code. Je kunt in Github goed samenwerken, en ook varianten naast elkaar ontwikkelen. Bovendien kun je alles wat je er maakt ook nog eens met de wereld delen. Github Pages biedt gratis de mogelijkheid je content als website te publiceren. Een Github account is niet alleen makkelijk bij informatica, ook elders heb je profijt van versiebeheer en samenwerkingsmogelijkheid.
Om Github te gebruiken heb je een account nodig en dat maak je aan op github.com

Repositories

Menu met optie om nieuwe repo aan te maken

Een repository, vaak kortweg repo genoemd, is de plek waar je alle documenten van een bepaald project bewaart. Begin je een nieuw project, dan maak je een nieuwe repo aan. Die repo geef je een geschikte naam en bij het aanmaken schrijf je meteen een README.md
Zo’n readme-bestand legt in een paar zinnen uit waarom je de repo hebt aangemaakt. Het is een geheugensteuntje voor jezelf en een welkom voor eventuele bezoekers.

Formulier om nieuwe repo naam te geven, en de keus voor een README.md

Files

Na aanmaken repo is de filelisting nog wat karig

De eigenlijke inhoud van je repo bewaar je in een of meer files. Dat kunnen hoofdstukken van je profielwerkstuk zijn. In deze handleiding echter ga ik uit van webpagina’s te beginnen index.html

Iedere keer dat je een bestand toevoegt of wijzigt, moet je jezelf dwingen heel kort op te schrijven wat je hebt veranderd. Bij grotere projecten waar je meerdere samenwerkt is dat de slutel om overzicht te houden op het project.
Ik heb een miniwebsite gebouwd zoals leerlingen in 4V in blok 1 moeten bouwen: tenminste twee onderling gelinkte pagina’s met de vormgeving in een apart bestand style.css, een zogenaamd external stylesheet.

Overzicht repo na een aantal toevoegingen en wijzigingen

Publiceren als website met GithubPages

Als de inhoud van je repo een website is kun je die met drie muisklikken publiceren op het web.
Klik op de repo-overzichtspagina op settings en scroll dan een flink stuk naar beneden naar GithubPages
GithubPages heeft een branch van je repo nodig om de site op te baseren. Omdat wij ons werk nog niet vertakt hebben is hier de keuze eenvoudig, kies de master branch.
Klik daarna op save en zie dat er nu bij settings GithubPages een URL is verschenen gebaseerd op je gebruikersnaam en de naam van je repository.
Dat is het, meer stappen zijn er niet.

In drie stappen is je repo als website beschikbaar

Bestanden toevoegen vanaf je eigen computer

Als je de bestandslijst van je repository in Github hebt openstaan kun je bestanden vanaf je computer ernaar toe slepen. Dan krijg je een nieuw venster waarin je deze wijziging weer verantwoordt met een kleine opmschrijving en vervolgens bevestigt met een klik op commit.

Een map aanmaken binnen je repository

Als je project groter wordt krijg je wellicht behoefte om de bestanden in mappen te organiseren. Bijvoorbeeld zou je alle plaatjes in een map images kunnen opslaan.

Het aanmaken van een map in een Github repo gaat door het typen van een “/” in het vak waar je een nieuw bestand een naam geeft.