git / GitHub

Starten wir unser kleines git-Tutorial mit einem kurzen Erklärvideo darüber was GitHub überhaupt ist und wozu es genutzt werden kann:

Kurz gesagt ist git also ein sogenanntes Versionsverwaltungssystem, das es ermöglicht deinen Code und verschiedene Versionen des Codes zu managen. Verschiedene Versionen können dabei von unterschiedlichen Personen sein, die alle zusammen an dem selben Projekt arbeiten oder vorherige Versionen, die mit git alle gespeichert werden und damit auch wiederhergestellt werden können falls nötig. Dabei ist besonders der Aspekt spannend mit mehreren Leuten gleichzeitig an dem selben Projekt zu arbeiten ohne sich gegenseitig dauernd den Code schicken zu müssen. Die Projekte werden dann von git in sogenannten repositories gespeichert. Zur Speicherung wird häufig, insbesondere bei open source Projekten, GitHub genutzt. Hier kannst du dir den Code und Fortschritt deines Projektes anzeigen und hilfreiche Sachen wie beispielsweise ein solches Wiki hier anlegen.

Normalerweise ist git eine Anwendung die man unter anderem auf dem eigenen Rechner installieren kann und dann über die Befehlszeile oder in einer Entwicklungsumgebung genutzt wird. Wie das funktioniert könnt ihr zum Beispiel sehr detailliert hier nachschauen, das geht aber über den Rahmen dieses Kurses hinaus. Wir werfen erstmal nur einen Blick darauf wie man GitHub "manuell" nutzen kann und insbesondere wie wir eine eigene Webseite über GitHub-Pages hosten, die dann übers Internet in jedem Browser geöffnet werden kann.

GitHub Pages

GitHub Pages ist ein Service von GitHub, der es euch ermöglicht eine eigene Webseite zu veröffentlichen. Dazu sind verschiedene Schritte notwendig und zuerst einmal braucht ihr einen eigenen GitHub Account und müsst den Code für eure Webseite in entsprechenden Dateien abspeichern.

Um die Dateien zu erstellen könnt ihr in Windows einfach einen Texteditor öffnen, euren Code dort hinein kopieren und dann als .html, .css, oder .js abspeichern. Für GitHub Pages ist es wichtig, dass eure .html-Datei als index.html gespeichert wird!

Einrichtung

Meldet euch nun zuerst mit eurem GitHub-Account auf github.com an. Danach führt ihr die folgenden Schritte durch:

1. Legt ein neues repository mit dem Namen yourusername.github.io an.
2. Lade die Dateien deiner Webseite in dem repository hoch Fertig ist deine erste eigene über das Internet erreichbare Webseite!

Falls dir das zu schnell ging, hier eine genauere Erläuterung der beiden Schritte:

Neues repository anlegen

• Klicke nach der Anmeldung mit deinem Account auf den grünen Button New links neben Repositories
• Gib als Repository name yourusername.github.io ein, wobei du yourusername durch deinen Nutzernamen ersetzt (also z.B. sggtgi.github.io)
• Klicke auf Create repository Nun hast du dein eigenes repository erstellt und musst als nächstes deine Dateien hochladen.

Dateien hochladen

• Klicke auf der Seite die jetzt erscheint auf uploading an existing file.
• Lade die Dateien per drag-and-drop über das entsprechende Feld (- Füge eine commit-message hinzu damit du weißt was du in diesem commit für Änderungen vorgenommen hast, z.B. "initial upload")
• Klicke auf Commit changes

Möglicherweise musst du nun ein paar Minuten warten aber dann sollte in deinem repository angezeigt werden, dass deine Webseite aktiv ist und du kannst auf das entsprechende Symbol klicken:

Oder du rufst die Seite einfach mit dem Link yourusername.github.io über den Browser deiner Wahl auf dem Gerät deiner Wahl auf!