Snelhandleiding GitHub Pages

Met deze handleiding kun je eenvoudig, snel en gratis je webpagina online zetten.

Download .zip Download .tar.gz

Snelhandleiding GitHub Pages

Om je website op GitHub Pages te hosten, zal je eerst een account aan moeten maken op GitHub.com. Doe dit met je @pierson.nl account. Nadat je je e-mail hebt bevestigd, ga je naar de volgende stap.

Repository maken

Je gaat je website-code hosten in een repository, zodat je makkelijk veranderingen kan aanbrengen en de geschiedenis van je programmeer-kunsten terug kan vinden.

:information_source: Repository betekent letterlijk bewaarplaats.
Op GitHub is dit een soort van folder waar alles van je project in te vinden is.

Maak een nieuwe repository die precies gebruikersnaam.github.io heet, waarbij je gebruikersnaam vervangt met je GitHub gebruikersnaam. Vink ook het vakje Initialize this repository with a README (!) aan. Als je dat gedaan hebt klik je op Create repository.

Een nieuwe repository maken.

:information_source: Dit zijn voorbeelden.
Je moet natuurlijk wel je eigen informatie invullen.

Code toevoegen

Als je al bestanden van je website hebt, kan je via de knop Upload Files je bestanden uploaden naar je repository. Zo niet, kan je beginnen met je eerste bestand aan te maken. Klik dan op Create File.

Bestanden toevoegen aan de repository.

Uploaden

Sleep je bestanden naar het veld, of klik op choose your files om bestanden te uploaden naar je repository.

Uploaden van bestanden.

Nieuw bestand

Voor een nieuw bestand typ je bijvoorbeeld index.html in het bestand vakje. Voeg nu je HTML code toe van index.html in het grote tekstvak.

Content aan bestand toevoegen.

Committen

Wanneer je daar klaar mee bent, ga je je commit klaar maken.

:information_source: (to) Commit betekent letterlijk doen of uitvoeren.
Op GitHub commit je veranderingen aan je code naar je repository met een beschrijving. Zo kun je later terug lezen wat je veranderd hebt.

Elke keer als je een verandering maakt aan een bestand in je repository, moet je die veranderingen opslaan in je repository. Dit heet ‘committen’.

Om er voor te zorgen dat je over een tijdje nog weet wat voor veranderingen je hebt gemaakt, is het belangrijk dat je de commit een titel geeft die kort uitlegt wat je veranderd hebt. Als je daar klaar mee bent, klik je op de groene knop Commit.

Website bezoeken

Als alles goed is gegaan, kan je nu in je browser naar https://gebruikersnaam.github.io om je website live in actie te zien (Vervang ook hier gebruikersnaam met je eigen GitHub gebruikersnaam). Cool hé?

URL.

Site aanpassen

Hé, zal je zien, heb je eindelijk je website klaar, zit er toch nog een foutje in.. Of misschien wil je nog wat toevoegen, of ben je nog lang niet klaar!

Geen paniek, je kan in je repository makkelijk aanpassingen maken. Je gaat naar het bestand dat je aan wil passen en klikt dan op het potloodje of Edit File om het bestand te bewerken.

Bewerken van een bestand.

Verder leren

Dit is maar een klein voorbeeld van hoe je GitHub kan gebruiken. Op internet kan je super veel video’s en tutorials vinden om nog meer uit je repository te halen. Verder kan je meer leren over de GitHub Student Pack en met deze video serie alles leren over GitHub!

Extra resources

Voorstellen GitHub Pages

In 15 minuten een werkende site

Referentiehandleiding PDF

GitHub Desktop

De meeste websites bestaan natuurlijk niet alleen maar uit één bestand, maar uit meerdere bestanden. Om makkelijk bestanden te uploaden, kan je een Git client gebruiken. GitHub’s website kan dit sinds kort ook.

Als je op je computer GitHub Desktop hebt, kan je je repository clonen en daar bestanden toevoegen, bewerken en dan pushen naar je repository.

Over deze handleiding

Deze handleiding is snel in elkaar getypt om informatica leerlingen van het Ds. Pierson College in aanraking te brengen met GitHub, doormiddel van het hosten van hun website.

Als je een fout gevonden hebt of deze handleiding wil verbeteren, kun je een issue of pull request maken.

Ben je tot hier gekomen in de handleiding? Zoek dan dhr. Moorlag op en krijg een cadeau!