Hong Cheung 
Warum möchtest du eine GitHub-Website?
Weil es einfach und kostenlos ist. Bevor du beginnst, wirf einen Blick auf einige Vor- und Nachteile und prüfe, ob es für deine Bedürfnisse geeignet ist.
Vorteile
Es kümmert sich um den Domainnamen für dich, und du musst dir keine Gedanken über Kosten für Speicher oder hohen Traffic machen. Alles, was du brauchst, ist ein kostenloses GitHub-Konto.
Nachteile
Du kannst auf GitHub Pages keine dynamische Website hosten, nur eine statische Website. Das bedeutet, du kannst keinen Server hosten, der eingehenden Traffic verarbeitet, etwa mit express.js oder flask; du kannst nur eine statische Website hosten. Allerdings kann es eine dynamische statische Website sein – du kannst darauf weiterhin Skripte ausführen, nur müssen diese Skripte vorab geladen werden.
Ein weiterer Nachteil ist, dass dein GitHub-Repo (deine Website-Dateien und -Verzeichnisse) öffentlich sein wird, wenn du die GitHub Page mit einem kostenlosen Konto betreibst. Das heißt, jeder kann deine Dateien sehen und besuchen. Also solltest du besser nichts Vertrauliches in deinem Website-Ordner ablegen.
Trotzdem eignet es sich gut für das Hosting einer einfachen Website, deren Code du teilen möchtest. Etwa deinen persönlichen Lebenslauf, eine einfache Firmenwebsite oder einen einfachen Blog. Oder du möchtest einfach deine eigene dynamische statische Web-App testen.
Voraussetzungen
- Ein Computer mit Internet.
- Grundlegende Computerkenntnisse.
- Ein kostenloses GitHub-Konto.
Schritt-für-Schritt-Anleitung zum Erstellen einer kostenlosen GitHub Page
- Erstelle ein GitHub-Konto.
Nachdem du dich angemeldet hast, erstelle ein neues Repository. Achte darauf, „Public“ auszuwählen.
Sobald du ein leeres Repo erstellt hast, tippe auf „create new file“.
- Kopiere den Beispielcode von unten und füge ihn ein, und benenne die Datei index.html, um sie zu erstellen.
Es sollte so aussehen. Klicke auf commit changes.
Gehe zum Tab Settings > Pages in der Seitenleiste > Branches – wähle main aus und klicke auf save.
Gehe nun zurück zu deinem Repo und warte ein paar Minuten.
Aktualisiere die Seite, und du wirst sehen, dass eine GitHub Page erfolgreich veröffentlicht wurde.
Gut gemacht! Deine GitHub Page ist jetzt über diesen Link erreichbar!
Beispielcode:
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My Website</title> <link rel="stylesheet" href="./style.css"> <link rel="icon" href="./favicon.ico" type="image/x-icon"> </head> <body> <main> <h1>Welcome to My Website</h1> </main> <script src="index.js"></script>2 collapsed lines
</body></html>Wie geht es weiter?
Nun, wenn du Anfänger bist, empfehle ich dir wirklich, die kostenlosen Kurse auf freeCodeCamp.org durchzugehen; sie decken fast alles ab, was du über Webentwicklung wissen musst, um loszulegen.
Eine GitHub Page ist zwar einfach einzurichten, bringt aber einige Einschränkungen mit sich und könnte dich einschränken, je weiter du in der Webentwicklung fortschreitest. Verschiedene Entwicklungstechnologien wie React, Next, Flask, Express.js usw. kennenzulernen ist entscheidend, wenn du es ernst meinst. In dieser Hinsicht reicht eine GitHub Page einfach nicht aus. Du musst etwas anderes finden, wie Netlify, Digital Ocean und schließlich einen selbst gehosteten VPS mit Docker-Instanzen, um jeden Teil einer Website selbst zu hosten.
Cloudflare vs. GitHub Pages
Obwohl die GitHub Page einfach einzurichten und gut für Anfänger geeignet ist, verwende ich heutzutage eher Cloudflare Pages; es ist nicht nur kostenlos mit unbegrenztem Traffic, sondern kümmert sich auch um die Einrichtung einer benutzerdefinierten Domain, wenn du die Domain über Cloudflare gekauft hast. Darüber hinaus kann dein Repo auch privat sein. Also sozusagen eine bessere Version der GitHub Page. Vielleicht möchtest du dir das auch ansehen.
Falls dir der Leitfaden unklar ist, kannst du der offiziellen Anleitung von GitHub hier folgen.
