5202

ein Blog über technische Fragen zu Blogger

Tutorial: Eine statische HTML-Seite auf Github-Pages hosten #2

von

Im zweiten Teil von dem Tutorial geht es darum, auf Github-Pages eine statische HTML-Seite mit mehreren Unterseiten zu erstellen und über eine eigen Domain auszuliefern.

Das Ergebnis sollte am Ende so oder so ähnlich ausschauen.

Vorbereitung

Ihr braucht für das Tutorial einen Github Account und das Desktop-App für Github. Das gibt es für Mac und für Windows.

Legt auf Github einen neuen Account an, ladet das App runter und installiert es auf eurem Rechner - Fertig!

Ein Github-Repository für eine Seite anlegen

Ein Git ist in so genannte Verzeichnisse organisiert, den Repositories. Für eure zukünftigen HTML-Seiten müsst ihr mindestens ein Repository anlegen.

Ein Github-Verzeichnis kann eine Benutzer-Seite und viele Projekt-Seite enthalten. Eure eigene Domain funktioniert nur auf Benutzer-Seiten, also konzentrieren wir uns erst mal darauf.

Geht dazu im Github Dashboard auf den Rider Repositories und wählt New aus.

Es erscheint ein Webformular. Hier müsst ihr einen Repository name eintragen. Diesen Name muss nach folgender Konvention aufgebaut sein:

euerBenutzerName.github.io

Beispiel: Mein Github BenutzerName lautet oliverdoetsch. Mein Repository name ist also oliverdoetsch.github.io. Der vollständige Name von dem Repository lautet oliverdoetsch/oliverdoetsch.github.io

Wenn ihr das neue Repository angelegt habt, klickt ihr das Feld Create Repository und dann Setup in Desktop. Das Github-App sollte sich nun öffnen und in euer Home-Verzeichnis einen neuen Ordner schreiben mit dem Namen euerBenutzerName.github.io. Das ist die Arbeitskopie, die jetzt den gesamten Inhalt eures neuen Repositorys enthält - nämlich zunächst mal keinen :D.

Noch mal ausführlicher ist das von Github-Pages selber erklärt.

Eine Index Seite erstellen

In diesen leeren Ordner kommen nun eure Dateien und Ordner für eure HTML Seiten. Baut dazu als erstes eine völlig normale Indexseite mit HTML oder kopiert folgende HTML in einen echten Text-Editor [auf keinen Fall WORD oder OpenOffice].

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>meineSeite</title>
    <meta name="viewport" content="width=device-width">
    </head>
 <body>
    <div id="home">
     <h1>Startseite</h1>
     <p>Ich bin die Startseite!</p>
    </div>
  </body>
</html>

Speichert diese Datei als index.html in den Ordner euerBenutzerName.github.io.

Änderungen kommentierten und synchronisieren

Ihr habt in eurer Arbeitskopie euerBenutzerName.github.io etwas verändert, nämlich einen neuen Ordner eingefügt. Diese Änderung wollt ihr nun auf euer Repository in das Git hochladen.

Öffnet dazu die Github-App, wählt euer Repository und geht in der linke Sidebar auf changes. Jetzt solltet ihr die Änderung grün hinterlegt sehen.

Schreibt nun einen beliebigen Kommentar, was ihr verändert habt [_Index Datei eingefügt_] und synchronisiert die Änderung rechts oben mit sync branch.

Wenn alles geklappt hat, könnt ihr über das Github Dashboard in euer Repository gehen und dort sollte die index.html Datei auftauchen.

Wenn das der Fall ist, schaut euch eure neue Seite unter www.euerBenutzerName.github.io an. Es kann allerdings bis zu 10min dauern, bis die Seite angelegt/verändert ist.

weitere Seiten anlegen

Innerhalb des Repositorys könnt ihr so viele Unterseiten anlegen wie ihr lustig seit.

Um eine neue Unterseite anzulegen, erstellt ihr in eurer Arbeitskopie einen Ordner mit dem Namen der neuen Unterseite, etwa about.

In diesen Ordner legt ihr eine neue HTML-Datei und nennt sie wiederum index.html.

Kommentiert und synchronisiert nun euren Arbeitsordner. Anschließend könnt ihr eure neue Unterseite unter der URL www.euerBenutzerName.github.io/about aufrufen.

CSS/Javascript

Innerhalb eures Repositorys könnt ihr Ordner mit beliebige Inhalte anlegen und in der Index Datei darauf verlinken. Nützlich ist das etwa für CSS oder Javascript Dateien.

Legt etwa in eurer Arbeitskopie einen Ordner CSS. In diesen Ordner packt ihr eine CSS Datei für eure Index-Datei und nennt sie main.css. Schreibt in der Index-Datei einen Link auf diese CSS-Datei nach diesem Muster:

 <link rel="stylesheet" href="/css/main.css">

Analog dazu könnt ihr auch Javascript oder Bilder hosten. Wobei ich von letzterem abrate, weil ihr auf Github nur 1GB freien Space habt und der ist mit Bildern schnell voll.

Beispiel

Damit das alles nicht so abstrakt wird, habe ich ein Beispiel-Repository angelegt. Ihr könnt dieses Repository auf euren Desktop als neue Arbeitskopie klonen und den Inhalt in die Arbeitskopie von euerBenutzerName.github.io kopieren.

Das Beispiel enthält eine Startseite mit zwei Unterseiten, eine CSS und eine Javascript Datei und und in den Index-Dateien die jeweiligen Links auf diese Ordner.Kommentiert und synchronisiert dieses Beispiel und schaut es im Web an.

Seite auf eigene Domain umleiten

Der Clou bei statischen Seiten auf Github-Pages ist, dass ihr eure eigene Domain oder Subdomain benuzten könnt.

Legt dazu in eurer Arbeitskopie eine neue Datei und schreibt eure Domain dort hinein:

www.eureDomain.de

Ihr nennt diese Datei CNAME und speichert das ganze.

Schreibt anschließend die DNS-Einstellung für eure Domain bei eurem Domain-Hoster um.

Wenn vorhanden löscht einen bestehenden CNAME und schreibt den CNAME von eurer www.eureDomain.de auf username.github.io … bis die Änderung wirksam wird, kann es 24h dauern.

Falls ihr bei Hostern wie Strato oder 1&1 seid, die euch keinen Zugriff auf die CNAME geben, könnt ihr alternativ dazu auch die A-Records umschreiben - lest dazu die Beschreibung auf Github-Pages um.

Abschließender Gedanke

Baut einfach mal ein paar Seiten auf Github-Pages und bekommt ein Gefühl für den Workflow. Ändert dann an den Seiten etwas, etwa eine weitere Unterseite, auf die ihr verlinken wollt.

Was fällt euch auf? Richtig! Es ist extrem umständlich, etwa einen neuen Menüpunkt in das Menü zu nehmen, weil ihr dazu alle bestehenden Seiten ändern müsst. Das ist umständlich und nervig.

Github besitzt deswegen einen sehr mächtigen Layout-Generator, mit dem ihr Layout-Vorlagen definieren und Seiten zusammenbauen könnt: Jekyll

Im nächsten Teil schauen wir uns diesen Generator an.