If you're seeing this message, it means we're having trouble loading external resources on our website.

Wenn du hinter einem Webfilter bist, stelle sicher, dass die Domänen *. kastatic.org und *. kasandbox.org nicht blockiert sind.

Hauptinhalt

Deine Webseite auf Github hosten

Github ist ein Unternehmen, das "Code Repositories", Dateien von Code für verschiedenste Projekte hostet. Viele der Code-Repositories sind "Open Source". Dies bedeutet, dass sie für die ganze Welt öffentlich zugänglich sind. Das ist großartig, denn so lernen Programmierer voneinander und bauen aufeinander auf! Khan Academy hat einige Open-Source-Repositories. Code-Repositories können alle Arten von Code enthalten, nicht nur HTML und CSS - was auch immer benötigt wird, um ein Projekt zum laufen zu bringen.
Warum erzähle ich dir davon? Nun, Github hat eine Funktion namens Github Pages. Dies macht es uns sehr einfach Websiten aus mehreren Dateien zu erstellen unter deinusername.github.io zu hosten.
Hinweis: Die Khan Academy arbeitet nicht direkt mit Github zusammen. Bitte beachte die Github Nutzungsbedingungen und andere Richtlinien, bevor du ein Benutzerkonto erstellst, besonders wenn du unter 13 Jahre alt bist.

Ein Github Konto registrieren

Gehe auf github.com, wo du auf der Startseite ein Anmeldeformular findest. (Falls du keines siehst, herzliche Gratulation, dann hast du schon ein Konto und du kannst direkt bei Schritt 2 weiterfahren).
Wenn du einen Benutzernamen wählst, beachte bitte dass dieser öffentlich auf dem Internet und in der URL deiner Webseite sichtbar sein wird: deinusername.github.io.
Screenshot der Github Anmeldeseite
In Schritt 2, wähle den kostenlosen Plan. Du benötigst keinen kostenpflichtigen Plan für ein öffentliches Website-Repository. (Du kannst jederzeit später upgraden, wenn du fortgeschrittener Github Benutzer wirst und die professionelle Funktionen benötigst.)
Screenshot der Github Anmeldeseite Schritt 3
In Schritt 3 kannst du die Fragen der Umfrage beantworten oder einfach diesen Schritt überspringen:
Screenshot des Github Anmeldeprozesses, Schritt 3 Umfrage
Nachdem du das Formular ausgefüllt hast, überprüfe deine Email und klicke auf den Link um deine E-Mail-Adresse zu bestätigen:
Screenshot von Gmail, Verifikations-Email für Github

Github Projekt für deine Webseite erstellen

Sobald du deine E-Mail-Adresse bestätigt hast, kannst du die Startseite sehen. Klicke hier auf "Start a project".
Screenshot der Github Startseite mit zwei Schaltflächen, Read the guide and Start a project
Auf der Seite um ein Projekt zu erstellen, wirst du nach einem Projektnamen gefragt. Überprüfe, dass der Name deines Projektes genau "DEIN_BENUTZERNAME.github.io" ist. Somit weiss Github, dass du ein Projekt für Webseiten erstellen möchtest, so dass es weiss, dass deine Dateien bei jeder Änderung auf dieser URL für deine Besucher publiziert werden müssen. Da mein Benutzername "PamelaFoxBot" ist, habe ich mein Projekt "PamelaFoxBot.github.io" genannt.
Screenshot von Github um ein neues Projekt zu erstellen
Glückwunsch, du hast ein neues Projekt! Aber es hat noch keine Dateien. Um die erste Datei zu erstellen, klicke auf den Link "README":
Screenshot von Github nach dem Erstellen eines neuen Projekts
Jetzt siehst du das Github Editor Interface für eine Datei namens README.md. Ändere den Dateinamen von README.md auf index.html. Server erwarten, dass der Name der Hauptdatei eines Ordners deiner Webseite index.html ist. Dein Index kann dann auf andere Seiten der Website verlinken.
Screenshot des Github Datei-Editors für README.md, mit dem Dateinamen umkreist
Lösche den aktuellen Inhalt des Editors und ersetze ihn durch das HTML deiner Webseite. Du kannst das HTML aus einem Projekt von Khan Academy oder einem anderen Projekt auf deinem Computer kopieren und einfügen.
Screenshot des Datei-Editors von Github mit HTML in der Bearbeitungsbox
Scrolle die Seite herunter, bis du den Commit-Bereich finden, und klicke hier auf „Commit new file“. Jedes Mal, wenn du eine neue Version einer Datei erstellst, machst du einen „Commit“, um diese Änderung in der Dateiversionsgeschichte zu speichern. Jeder Commit hat einen Kommentar, um die Änderung zu beschreiben. Github schlägt eine Standardnachricht vor (In diesem Fall „Index.html anlegen“), aber du kannst diesen Vorschlag durch Eingabe in das Feld überschreiben.
Screenshot der "Commit new file" Interfaces von Github
Tippe DEIN_BENUTZERNAME.github.io in deinen Browser und lade neu, bis deine Webseite erscheint.
Github benötigt ca. 1-10 Minuten, um die Änderungen deiner Projekte auf der URL für die Besucher deiner Webseite zu publizieren. Du musst etwas Geduld haben. Machmal musst du auch deinen Browser "hart Nachladen" (drücke Shift während des Neuladens), um den Browser-Cache zu löschen.
Screenshot einer Webseite auf github.io

Webseiten mit mehreren Dateien auf Github hochladen

Einige von euch arbeiten unter Umständen bereits mit einem Desktop-Editor an Websites mit mehreren Dateien außerhalb der Khan Academy. Deine Website hat möglicherweise mehrere HTML-, CSS-, JS- und Bilddateien.
Wenn du diese Webseite auf Github hochladen möchtest, musst du sie nicht einzeln kopieren! Das wäre in der Tat ziemlich langweilig. Es gibt einen besseren Weg...
Öffne dein Projekt auf Github und klicke auf "Upload files".
Screenshot der Github Projekt-Seite mit der Schaltfläche "Upload files" rot umkreist
Du siehst das Interface zum Hochladen von Dateien. Du kannst deine Dateien entweder per drag-and-drop oder per Dateiauswahl auswählen.
Suche deinen Projektordner und wähle die Dateien aus, die du hochladen möchtest.
Normalerweise solltest du alle geänderten Dateien hochladen. Wenn du nicht sicher bist, lade einfach alles hoch. Github verwendet einen Algorithmus, um herauszufinden, was geändert und was nicht geändert wurde. So werden nur neue Versionen für geänderte Dateien erstellt.
Screenshot der Dateiauswahl
Ändere die Commit-Nachricht wie gewünscht und klicke auf „Commit changes“.
Screenshot des Commit hochgeladener Dateien
Lade deine Webseite neu, um die Änderungen zu sehen!
Denk daran, dass es bis zu 10 Minuten dauert. Geduld ist unser Freund hier. 😊
Deshalb ist es am besten, die Entwicklung und das Testen in deiner lokalen Arbeitsumgebung durchzuführen und nur auf Github (oder irgendeinen anderen Hosting-Provider) hochzuladen, wenn du mit dem Aussehen deiner Website lokal zufrieden bist.
Screenshot der hochgeladenen Webseite

Willst du an der Diskussion teilnehmen?

Noch keine Beiträge.
Verstehst du Englisch? Klick hier, um weitere Diskussionen auf der englischen Khan Academy Seite zu sehen.