So erstellen Sie eine Website auf GitHub-Seiten: 12 Schritte (mit Bildern)

Inhaltsverzeichnis:

So erstellen Sie eine Website auf GitHub-Seiten: 12 Schritte (mit Bildern)
So erstellen Sie eine Website auf GitHub-Seiten: 12 Schritte (mit Bildern)

Video: So erstellen Sie eine Website auf GitHub-Seiten: 12 Schritte (mit Bildern)

Video: So erstellen Sie eine Website auf GitHub-Seiten: 12 Schritte (mit Bildern)
Video: Film-DVDs brennen mit WinX DVD - Tutorial für mehr Freude an den Urlaubsvideos 2024, Kann
Anonim

GitHub Pages ist eine großartige Möglichkeit, Ihre eigene persönliche Website von Grund auf neu zu erstellen. Es ist völlig kostenlos und erfordert nur ein GitHub-Konto. Beachten Sie jedoch, dass GitHub Pages nicht das benutzerfreundlichste Design für die Erstellung von Websites bietet (im Gegensatz zu Wix oder Squarespace), aber es ist eine großartige Möglichkeit, Erfahrungen mit HTML/CSS/JS und allen Elementen einer Website zu sammeln. Dieses wikiHow zeigt dir, wie du loslegen kannst.

Schritte

Erstellen Sie eine Website auf GitHub-Seiten Schritt 1
Erstellen Sie eine Website auf GitHub-Seiten Schritt 1

Schritt 1. Registrieren Sie einen Account auf GitHub, falls Sie noch keinen haben

Bevor Sie Ihre eigene Website auf GitHub-Seiten erstellen können, müssen Sie ein Konto auf GitHub erstellen. Wenn Sie bereits ein Konto auf GitHub haben, melden Sie sich an. Beide können über die obere rechte Symbolleiste aufgerufen werden.

Erstellen Sie eine Website auf GitHub-Seiten Schritt 2
Erstellen Sie eine Website auf GitHub-Seiten Schritt 2

Schritt 2. Erstellen Sie ein Repository auf GitHub.

Stellen Sie sicher, dass Sie das Repository "[Ihr GitHub-Benutzername hier].github.io" nennen. Dadurch wird Ihre GitHub-Website initialisiert.

Methode 1 von 2: Verwenden eines Code-Editors

Erstellen Sie eine Website auf GitHub-Seiten Schritt 3
Erstellen Sie eine Website auf GitHub-Seiten Schritt 3

Schritt 1. Laden Sie GitHub Desktop herunter, falls Sie es noch nicht installiert haben

Die Installation des GitHub-Desktops ist so einfach wie https://desktop.github.com/ und das Klicken auf den großen violetten "Download"-Button. Führen Sie dann das Installationsprogramm aus. Dies ist erforderlich, um Änderungen an Ihr Repository zu übertragen.

Erstellen Sie eine Website auf GitHub-Seiten Schritt 4
Erstellen Sie eine Website auf GitHub-Seiten Schritt 4

Schritt 2. Installieren Sie einen Code-Editor

Sie benötigen eine, um Syntax-Highlighting auf GitHub zu erhalten. Beliebte Optionen sind Atom, Visual Studio Code, Sublime Text und Notepad++, da sie funktionsreich und minimalistisch sind. Nachdem Sie einen Code-Editor installiert haben, können Sie loslegen.

Erstellen Sie eine Website auf GitHub-Seiten Schritt 5
Erstellen Sie eine Website auf GitHub-Seiten Schritt 5

Schritt 3. Erstellen Sie eine Datei namens "index.html"

Sie können dies in Ihrem Code-Editor oder online tun. Sie können auch zum Speicherort Ihres Repositorys auf Ihrer Festplatte gehen und eine "index.html"-Datei im Ordner des Repositorys auf Ihrem Laufwerk erstellen.

Erstellen Sie eine Website auf GitHub-Seiten Schritt 6
Erstellen Sie eine Website auf GitHub-Seiten Schritt 6

Schritt 4. Fügen Sie Ihren HTML-Code hinzu

Sie müssen HTML lernen, um eine einfache Webseite codieren zu können. Es ist auch nützlich für Sie, CSS und JavaScript zu lernen, damit Sie Ihrer Webseite Styling und Funktionen hinzufügen können.

Denken Sie daran, die Datei zu speichern

Erstellen Sie eine Website auf GitHub-Seiten Schritt 7
Erstellen Sie eine Website auf GitHub-Seiten Schritt 7

Schritt 5. Übernehmen Sie die Änderungen

Gehen Sie zurück zum GitHub-Desktop und klicken Sie auf die blaue Schaltfläche Commit to master. Klicken Sie dann auf Push Origin. Dadurch werden die Änderungen auf GitHub hochgeladen.

Wenn Sie weitere Änderungen vornehmen möchten, sollten Sie auch den Ursprung ziehen. Klicken Sie im GitHub-Desktop auf die Schaltfläche Pull Origin, um den neuesten Commit auf Ihren Computer herunterzuladen

Erstellen Sie eine Website auf GitHub-Seiten Schritt 8
Erstellen Sie eine Website auf GitHub-Seiten Schritt 8

Schritt 6. Sehen Sie sich Ihre Webseite an

Gehen Sie in einem Webbrowser zu "[Ihr GitHub-Benutzername hier].github.io". Möglicherweise müssen Sie den Cache Ihres Browsers umgehen, indem Sie Strg oder ⌘ Befehl gedrückt halten, während Sie auf die Schaltfläche Aktualisieren klicken, um die neue Webseite anzuzeigen.

Methode 2 von 2: Verwenden von GitHub Online

Erstellen Sie eine Website auf GitHub-Seiten Schritt 9
Erstellen Sie eine Website auf GitHub-Seiten Schritt 9

Schritt 1. Erstellen Sie eine Datei namens "index.html"

Klicken Sie auf Datei hinzufügen und dann auf Neue Datei erstellen. Dies öffnet einen Dateieditor. Fügen Sie "index.html" zum Feld "Name Ihrer Datei" hinzu.

Erstellen Sie eine Website auf GitHub-Seiten Schritt 10
Erstellen Sie eine Website auf GitHub-Seiten Schritt 10

Schritt 2. Fügen Sie Ihren HTML-Code hinzu

Sie müssen HTML lernen, um eine einfache Webseite codieren zu können. Es ist auch nützlich für Sie, CSS und JavaScript zu lernen, damit Sie Ihrer Webseite Styling und Funktionen hinzufügen können.

Denken Sie daran, die Datei zu speichern

Erstellen Sie eine Website auf GitHub-Seiten Schritt 11
Erstellen Sie eine Website auf GitHub-Seiten Schritt 11

Schritt 3. Übernehmen Sie die Änderungen

Klicken Sie auf die grüne Schaltfläche Commit new file, um die Datei auf GitHub zu speichern.

Erstellen Sie eine Website auf GitHub-Seiten Schritt 12
Erstellen Sie eine Website auf GitHub-Seiten Schritt 12

Schritt 4. Sehen Sie sich Ihre Webseite an

Gehen Sie in einem Webbrowser zu "[Ihr GitHub-Benutzername hier].github.io". Möglicherweise müssen Sie den Cache Ihres Browsers umgehen, indem Sie Strg oder ⌘ Befehl gedrückt halten, während Sie auf die Schaltfläche Aktualisieren klicken, um die neue Webseite anzuzeigen.

Tipps

  • Um Unterseiten hinzuzufügen, erstellen Sie einfach einen neuen Ordner auf GitHub und fügen Sie in diesem Ordner eine Datei „index.html“hinzu.
  • Wenn Sie einen Domänennamen registrieren, können Sie GitHub Pages diesen Domänennamen anstelle des Standardnamens verwenden lassen.
  • GitHub-Seiten-Repositorys müssen öffentlich sein, es sei denn, Sie haben ein Premium-Konto.

Empfohlen: