Webhosting mit GitHub-Pages

Titelbild (Webhosting)

Jonas Brinkhoff, Christian Kreitschmann

SuMO - Studier- und Medienkompetenz Online
Universität Hamburg
cc-by-sa | 2015

Wozu dieses Tutorial?

Du arbeitest mit anderen an einem gemeinsamen Projekt und möchtest dieses im Netz präsentieren? Du hast ein paar schöne Seminararbeiten geschrieben, die du lieber online statt nur in der Schublade sehen würdest? Vielleicht möchtest du auch einfach nur mal wissen, wie es grundsätzlich funktioniert, eine HTML-Seite ins Netz zu stellen?

Um eigene Inhalte im Netz zu veröffentlichen, gibt es mittlerweile viele verschiedene Möglichkeiten. Sieht man einmal von Facebook, Twitter & Co ab, so bleibt das ganz grundlegende Prinzip immer gleich. Zunächst wird der Inhalt einer Webseite erstellt und die entsprechende Datei dann über einen Server bereitgestellt, also gehostet. Dieses Tutorial zeigt dir am Beispiel von GitHub-Pages, wie du eine einzelne HTML-Seite - deine Webseite - ins Netz stellen kannst, um dir das Prinzip des hostings näher zu bringen. Du findest hier also keine umfangreiche Einführung in die Programmierung von Webseiten und kannst auch ohne Vorerfahrungen gleich einsteigen.

Falls du dich im Anschluss auch mit HTML und CSS fit machen (und deine Webseite weiter ausbauen) möchtest, findest du hier zwei erste Anlaufstellen:

"Meine" Homepage - Webspace und Domain

Für eine eigene Webseite brauchst du eine Domain (deine Internetadresse, http://www.webseiteyxz.de) und einen Server, auf den alle Daten (z.B. HTML-Seiten, Videos, Grafiken) deiner Webseite gespeichert werden. Kostenpflichtige Anbieter berechnen für beides Gebühren. Sie bieten aber auch einen entsprechenden Service, z.B. direkte Ansprechpartner bei Fragen oder Problemen oder eine Gewähr für die Erreichbarkeit deiner Webseite. Die Pakete der verschiedenen Anbieter unterscheiden sich u.a. hinsichtlich des vorhandenen Speicherplatzes, der Geschwindigkeit für Up- und Download oder der Möglichkeit, mehrere Domains in einer Webseite zusammenzuführen. Einige Anbieter bieten auch Pakete an, in denen ein CMS/Blogging-System (z.B. Wordpress) oder ein Baukasten für HTML-Seiten enthalten ist, mit dem du die Inhalte deiner Webseite erstellen kannst.

Die "kostenfreien" Anbieter von Webspace finanzieren sich in der Regel über Werbung (Werbebanner, Links auf den Anbieter o.ä.), die später auf deiner Webseite zu sehen ist - du kannst in diesen Fällen also nicht über alle Inhalte deiner Seite frei bestimmen. Zudem gibt es meist noch andere Einschränkungen, für die sich ein Blick in die AGBs des Anbieters lohnt (z.B. Sicherheit, Geschwindigkeit, Verfügbarkeit, maximale Dateigrößen, erlaubte Tools und Inhalte). Einige Gratisangebote bringen auch die Einschränkung mit, dass der Name des Anbieters in der Adresse deiner Seite enthalten sein muss. Das gilt insbesondere in den Fällen, in denen du gar keine eigene Domain mitbringst. "Deine" Webseite kann in diesem Fall nur über eine subdomain des Webspace-Anbieters aufgerufen werden. Wenn Du zum Beispiel eine Webseite über http://de.wordpress.com erstellst und sie dort hosten lässt, enthält deine Webadresse immer auch den Zusatz "wordpress.com" (http://webseitexyz.wordpress.com). Du mietest in diesem Fall also keine "echte" Domain mit eigenem Webspace, sondern nutzt im Grunde einen Dienst. Eine kostenlose Webseite ist damit durchaus möglich - man sollte aber schauen, wann sich ein kostenpflichtiges Angebot für den eigenen Zweck besser eignet, ob man mit einem Dienst wie Wordpress bestens leben kann und von welchen Angeboten man lieber doch die Finger lassen sollte.

Was ist GitHub?

In diesem Tutorial lernst du, wie das hosting einer Webseite grundsätzlich funktioniert. Bevor es losgeht, noch ein wenig Hintergrund zu dem kostenfreien Dienst, den wir in diesem Tutorial nutzen wollen: GitHub-Pages.

GitHub lässt sich als eine Plattform verstehen, auf der gemeinsam an Projekten gearbeitet wird und auf dem die Projekt-Dateien zentral bereitgestellt werden. In erster Linie richtet sich GitHub an Software-Entwickler, die über ihren (öffentlichen) Account Programme im Netz bereitstellen wollen, damit andere sie herunterladen, kommentieren, ergänzen oder überarbeiten können. Für jedes Projekt können die User über ihren Account eine Art Projekt-Ordner - ein sogenanntes Repository - erstellen, um dort alle möglichen Dateien abzulegen bzw. im Netz bereitzustellen. Ähnlich wie bei Dropbox kann dabei ein (lokaler) Ordner auf deinem Rechner erstellt werden, der dann mit dem Ordner im Netz synchronisiert wird. Durch eine angebundene Versionierung lässt sich dabei immer nachvollziehen, wer wann welche Änderungen an einem Dokument oder Ordner vorgenommen hat. Für GitHub gibt es verschiedene Clients, die einem diese Arbeit erleichtern.

GitHub-Pages ist ein Service von GitHub, der die Möglichkeit bietet, über den eigenen GitHub-Account eine GitHub-Page - also eine Webseite - zu erstellen. Und diesen Dienst wollen wir nutzen, um den Weg von der Datei auf deinem Rechner bis zur HTML-Seite im Netz einmal zu üben und dir damit eine Grundlage für deine eigene Seite im Netz zu geben.

GitHub-Account und -Client einrichten

Um mit GitHub-Pages (https://pages.github.com/) eine Webseite ins Netz zu stellen, benötigst du zunächst einen Account bei GitHub, den du dir unter https://github.com/ kostenlos anlegen kannst. Du solltest hier schon zu Beginn einen passenden Benutzernamen auswählen, denn deine Webseite wird später unter der Adresse dein-benutzername.github.io erreichbar sein. Du kannst deinen Namen zwar später auch noch ändern, musst deine Inhalte dann aber noch einmal neu hochladen.

Wenn du dich erfolgreich bei GitHub registriert hast, erhältst du eine E-Mail an die bei der Registrierung angegebene Adresse. Diese musst du bestätigen, um dann auch GitHub-Pages nutzen zu können. Denk' dran, dass die E-Mail von GitHub auch im Spam-Ordner gelandet sein könnte. Falls du deine E-Mail Adresse später ändern oder die E-Mail noch einmal zugeschickt bekommen möchtest, kannst du dies in GitHub über deine Profil-Einstellungen (dort unter „Emails“) regeln.

Um später Daten (also deine Webseite) zu GitHub hochzuladen oder zu aktualisieren, solltest du dir einen GitHub-Client installieren. Das ist ebenfalls kostenlos, geht ganz einfach und erleichtert dir die Arbeit. Ein Client, der von GitHub selbst bereitgestellt wird (GitHub Desktop), kann unter folgendem Link für Windows und Mac heruntergeladen werden:

Ein neues Repository erstellen

Ein Repository ist eine Art Ordner, den GitHub für jedes Projekt erstellt. Wir wollen nun ein neues Repository erstellen, in den dann die Daten deiner Webseite gespeichert werden können.

Im GitHub Client musst du zunächst links oben auf das Plus-Symbol klicken. Es öffnet sich ein Dialog der nach einem Namen und einem lokalen Pfad auf deinem Rechner fragt. Nun kannst du für dein Repository einen Namen vergeben. Dieser muss einer vorgegebenen Konvention entsprechen, damit GitHub weiß, dass genau dieses Repository geladen werden soll, wenn deine Webseite aufgerufen wird. Der Name des Repositorys leitet sich von deinem Benutzernamen ab und sollte daher wie folgt aussehen: euer-benutzername.github.io. Zum Beispiel heißt der Account für die Webseite in diesem Tutorial SuMO-UHH, dementsprechend muss das Repository sumo-uhh.github.io genannt werden.

Der lokale Pfad ist der Ort, an dem eine Kopie des Repositorys auf deinem Computer erstellt wird. Dieser Pfad ist später noch wichtig, also merk’ dir wo du ihn anlegst! Die Aufgabe des GitHub-Clients ist prinzipiell nicht mehr, als dafür zu sorgen, dass der Ordner auf deinem Computer und das Repository auf dem GitHub-Server den gleichen Inhalt haben, dass also beide "Ordner" synchron sind. Mit einem Klick auf "Create Repository" schließt du die Erstellung ab. Wenn du jetzt den zuvor gewählten lokalen Pfad auf deinem Rechner öffnest, findest du dort einen von GitHub erstellten Ordner mit dem von dir angegeben Namen.

Die Webseite erstellen

Nun sind alle Vorbereitungen abgeschlossen! Öffne den lokalen Ordner, den du zuvor mit dem Client für das Repository erstellt hast. In diesen Ordner kannst du eine bereits erstellte HTML-Datei (deine Webseite) hineinkopieren oder sie hier neu erstellen. Der Dateiname ist hierbei ganz wichtig: Die Datei muss „index.html“ heißen!

Eine Beispiel-Datei findest du hier:
index.html

Was hat es mit der index.html auf sich? Schon zu Beginn hast du erfahren, dass die Inhalte einer Webseite (also z. B. HTML-Dateien) zunächst erstellt und dann bereitgestellt werden. Welche Datei wird nun von mir abgerufen, wenn ich die Startseite einer Webseite xyz.de besuche? Das hängt davon ab, welche Datei in den Servereinstellungen als Startseite definiert wird, d.h. welche Datei angezeigt werden soll, wenn jemand die Adresse dieser Webseite aufruft. In der Regel heißt diese Datei „index.html“. Wenn du also z.B. http://www.uni-hamburg.de besuchst, wird eigentlich diese Datei aufgerufen und angezeigt: http://www.uni-hamburg.de/index.html. Im Fall von GitHub muss die Datei index.html lauten, da GitHub nach einer Datei mit diesem Namen sucht, um sie dann als Startseite anzeigen zu können. Mit deiner index.html erstellt du also die Startseite deiner Webseite, die dann wiederum Links zu Unterseiten (einzelne HTML-Dateien) enthalten kann.

Die Webseite auf den GitHub-Server hochladen

Du hast deine Webseite (index.html) nun schon in einen lokalen Ordner auf deinem Rechner kopiert. Wenn du jetzt wieder den GitHub-Client öffnest, hat sich hier etwas verändert. Das Programm hat erkannt, dass du etwas in den Ordner eingefügt hast und möchte nun dieselben Änderungen auf dem Server von GitHub speichern. Dafür musst du deine Änderungen zunächst noch einmal bestätigen, was bei GitHub „commiten“ heißt. Du bestätigst, dass du mit den Änderungen zufrieden bist und gibst den aktuellen Veränderungen einen Namen. Anhand dieses Namens (zum Beispiel "index.html hinzugefügt“) kannst du später nachvollziehen, welche Änderungen in deinem Ordner vorgenommen wurden. Optional kannst du noch eine genauere Beschreibung der Veränderungen hinzufügen. Sobald du einen Namen eingegeben hast, wird unter dem Textfeld der Button „Commit to master" sichtbar - mit einem Klick auf diesen Button schließt du den Commit ab.

Wenn du den Commit ausgeführt hast, wird in der rechten Spalte die aktuellste Veränderung angezeigt. Diese ist nun bereit zu den Servern von GitHub geschickt zu werden. Dafür musst du rechts oben auf den Button "Publish" klicken. Es öffnet sich ein Dialog und mit einem Klick auf "Publish Repository“ startest du den Vorgang, um deine Seite zu veröffentlichen. Der GitHub-Client lädt die Veränderungen im lokalen Ordner nun auch auf den Server, damit sich die Inhalte wieder gleichen und damit synchron sind. Nach erfolgreichem Veröffentlichen erhältst du die Rückmeldung, dass es keine unsynchronisierten Veränderungen gibt.

Die Webseite ist online!

Nachdem die Ordner synchronisiert wurden und sich deine index.html jetzt auch auf dem GitHub-Server befindet, ist deine Webseite online und unter http://dein-benutzername.github.io erreichbar. Glückwunsch, du hast gerade eine Webseite veröffentlicht! Du kannst dir alle im Repository vorgenommenen Änderungen auch in deinem GitHub-Account im Web anschauen. Nach dem Login (https://github.com/login) findest du rechts auf der Startseite eine Auflistung deiner Repositorys. Dort sollte nun auch der Name des von dir erstellten Ordners/Repositorys erscheinen. Mit einem Klick auf den Namen öffnest du eine Ansicht mit dem Inhalt - hier findest du die gerade hochgeladene Datei „index.html“.

Inhalte ändern oder aktualisieren

Wenn du Änderungen an deiner HTML-Seite vornehmen möchtest, kannst du dies direkt auf deinem Rechner tun. Du öffnest die index.html in deinem Ordner/Repository (z.B. mit einem einfachen Texteditor oder einem HTML-Editor), nimmst die Änderungen vor und speicherst sie dann. Im Anschluss „commitest“ und publizierst du diese Änderungen wieder mit dem GitHub-Client. Änderungen an bereits hochgeladenen HTML-Seiten kannst du auch online über deinen GitHub-Account vornehmen. Öffne dein Repository und klicke auf die HTML-Datei, die du ändern möchtest. Nun wird dir der Inhalt angezeigt. Rechts über dem Inhaltsfenster erscheint ein Stiftsymbol, mit dem du in den Bearbeitungsmodus wechselst. Jetzt kannst du den Inhalt deiner HTML-Seite bearbeiten und diese Änderungen im Feld darunter „commiten“.

Damit deine Seite etwas schicker wird, möchtest du vielleicht etwas mehr als schlichten Text zum Einsatz bringen. Neue HTML-Seiten, Unterordner mit Grafiken, Dokumenten, Videos usw. fügst du ebenfalls einfach in deinen Ordner/Repository ein und publizierst sie dann. Diese neuen Dateien und Ordner liegen dann ebenfalls auf dem GitHub-Server - damit sie aber auch als Inhalte auf deiner Webseite angezeigt werden, musst du sie noch per HTML-Code in deine Seite einbinden. Damit kommst du um etwas HTML-Kenntnisse nun nicht mehr herum. Die wichtigsten Befehle sind jedoch wirklich schnell zu lernen. Zwei erste Links zu den Themen HTML und CSS wurden dir zu Beginn des Tutorials schon vorgestellt, ein paar weitere Infos findest du am Ende dieses Tutorials.

Links und weitere Infos

HTML und CSS

http://www.codecademy.com/ - Code Academy: Unter dem Motto "learn to code" findest du hier kostenlose und interaktive Kurse für den Einstieg in HTML und CSS.

http://wiki.selfhtml.org/wiki/Startseite - SELFHTML: Ein Klassiker mit allen grundlegenden Infos zu den Themen HTML, CSS (und JavaScript); neben den Erklärungen aller gängigen HTML-Elemente findest du hier auch Vorlagen, die du direkt verwenden kannst.

http://www.w3schools.com/ - W3Schools: Eine umfassende Seite (nicht nur) zum Thema HTML und CSS, mit vielen Beispielen und Tutorials. Besonders praktisch ist die Möglichkeit, den HTML-Code aus den Beispielen in einem eigenen Fenster anzeigen und dort direkt ausprobieren zu können.

https://developer.mozilla.org/de/docs/Web/HTML - Einstiegsseite der Firefox Entwickler zum Thema HTML, die u.a. ein paar (Browser-)Tools für HTML-Entwickler vorstellt und Links zu Community-Seiten bereithält.

Tools

https://notepad-plus-plus.org/ - Notepad++ ist ein kostenloser (Text-)Editor für Windows, der verschiedene Programmiersprachen unterstützt.

http://www.barebones.com/products/textwrangler/ - Textwrangler ist ein kostenloser Editor für Mac, der sich für die grundlegende Bearbeitung von HTML Seiten eignet.

https://atom.io/ - atom ist ein recht umfassender Editor, der sich mit verschiedenen Themes und Plugins (Packages) anpassen lässt und dabei u.a. eine Vorschaufunktion bietet.

https://filezilla-project.org/ - FileZilla ist ein FTP-Client für den Austausch von Dateien zwischen eigenem Rechner und Web-Server.

GitHub

https://github.com/ - GitHub Startseite

https://pages.github.com/ - Startseite von GitHub Pages

https://desktop.github.com/ - Desktop Client für GitHub

Titelgrafik: "webhosting" Christian Kreitschmann CC-BY 4.0 erstellt aus "Server" Norbert Kucsera CC-BY 3.0, "Computer" Creative Stall CC-BY 3.0, "Browser" Pham Thi Dieu Linh CC-BY 3.0