{"id":59474,"date":"2023-02-27T14:00:54","date_gmt":"2023-02-27T13:00:54","guid":{"rendered":"https:\/\/kinsta.com\/de\/?p=59474&preview=true&preview_id=59474"},"modified":"2023-07-27T12:05:24","modified_gmt":"2023-07-27T11:05:24","slug":"github-pages","status":"publish","type":"post","link":"https:\/\/kinsta.com\/de\/blog\/github-pages\/","title":{"rendered":"Auf die Pl\u00e4tze, fertig, los: Erstellen einer statischen Website mit GitHub Pages"},"content":{"rendered":"

Mit all den aktuellen Tools und Frameworks f\u00fcr die Webentwicklung wird die Erstellung einer Website immer komplizierter. Aber manchmal brauchst du nicht viel Interaktivit\u00e4t auf deiner Website. Wenn du dich darauf konzentrierst, den Betrachter mit Informationen zu versorgen und keine komplexen Funktionen brauchst, ist eine statische Website vielleicht die richtige Wahl.<\/p>\n\n

In diesem Tutorial erf\u00e4hrst du, was eine statische Website ist, welche Vorteile sie hat, wo ihre Grenzen liegen und wie du mit GitHub Pages kostenlos eine einfache pers\u00f6nliche Website mit HTML und Bootstrap erstellst und bereitstellst.

<\/div><\/kinsta-auto-toc><\/p>\n

Was sind GitHub Pages?<\/h2>\n

GitHub<\/a> ist eine webbasierte Plattform f\u00fcr das Hosting von Git-Repositories und die Zusammenarbeit an Softwareprojekten. Sie bietet Werkzeuge zum Teilen und Verfolgen von Code\u00e4nderungen, zum Verwalten und Pr\u00fcfen von Code und die M\u00f6glichkeit, Pull Requests zu \u00f6ffnen und zu pr\u00fcfen.<\/p>\n

Verwechsle nicht Git und GitHub<\/a>! GitHub ist ein Hosting-Dienst, der die Zusammenarbeit zwischen Entwicklern erm\u00f6glicht, w\u00e4hrend Git die lokale Versionskontrollsoftware ist, mit der du Schnappsch\u00fcsse vom Stand deines Softwareprojekts speichern kannst.<\/p>\n

GitHub Pages<\/a> ist eine der besten Funktionen von GitHub. Es ist ein Dienst, mit dem du eine statische Website<\/a> direkt von einem GitHub-Repository aus hosten kannst. Das hei\u00dft, du kannst den Code und die Dateien deiner Website in deinem Repository speichern und GitHub ver\u00f6ffentlicht sie automatisch als Website, auf die du online zugreifen kannst.<\/p>\n

Zusammenfassend l\u00e4sst sich sagen, dass GitHub Pages eine schnelle und einfache M\u00f6glichkeit ist, deine Website zum Laufen zu bringen. Es ist besonders n\u00fctzlich, um dein Portfolio<\/a>, Open-Source-Projekte oder andere statische Inhalte zu pr\u00e4sentieren.<\/p>\n

Statische vs. dynamische Websites<\/h3>\n

Wie wir gesehen haben, bietet GitHub Pages eine M\u00f6glichkeit, statische Websites<\/a> zu erstellen. Aber was ist der Unterschied zwischen einer statischen und einer dynamischen Website?<\/p>\n

Beginnen wir mit den Inhalten auf diesen Seiten.<\/p>\n

Statische Inhalte sind die Elemente der Website, die f\u00fcr alle Nutzer\/innen gleich bleiben, unabh\u00e4ngig davon, wer sie sind oder welche Aktionen sie auf der Website durchf\u00fchren. Dazu geh\u00f6ren z. B. der Text, die Bilder und das Layout der Website sowie der zugrunde liegende Code und die Dateien, aus denen die Website besteht. Eine statische Website wird dem Nutzer genau so geliefert, wie sie gespeichert ist.<\/p>\n

Im Gegensatz dazu sind dynamische Inhalte Inhalte, die sich je nach Aktion des Nutzers \u00e4ndern, z. B. wenn er sich anmeldet, mit einer Paywall interagiert oder einen Beitrag kommentiert, oder aufgrund anderer Faktoren wie der aktuellen Uhrzeit oder dem Standort.<\/p>\n

Eine Website, die zum Beispiel ein Standbild eines Produkts zeigt, zeigt jedem Nutzer immer das gleiche Bild (statisch). Eine Website hingegen, die die aktuelle Uhrzeit anzeigt, zeigt jedem Nutzer je nach Standort eine andere Zeit an (dynamisch).<\/p>\n

Generell kann man sagen, dass eine Website statisch ist, wenn sie nur HTML, CSS und JavaScript<\/a> auf dem Frontend<\/a> enth\u00e4lt und keine Servertechnologien wie PHP oder Python<\/a>, die mit einer Datenbank interagieren.<\/p>\n

\"Die
Twitter ist eine dynamische Website<\/figcaption><\/figure>\n

Mit GitHub Pages ist es zwar nicht m\u00f6glich, dynamische Websites zu erstellen, aber du kannst mit einem CMS<\/a> wie WordPress<\/a> oder statischen Website-Generatoren wie Gatsby<\/a> oder Hugo<\/a> ganz einfach deine eigene Website erstellen.<\/p>\n

Die wichtigsten Funktionen von GitHub Pages<\/h3>\n

Schauen wir uns die St\u00e4rken von GitHub Pages als Hosting-Dienst an:<\/p>\n

    \n
  1. Einfaches Einrichten und Ver\u00f6ffentlichen:<\/strong> GitHub Pages macht es dir leicht, mit nur wenigen Schritten loszulegen. Du kannst GitHub Pages f\u00fcr dein Repository aktivieren und die Quelle f\u00fcr deine Website-Dateien angeben. GitHub ver\u00f6ffentlicht deine Website dann automatisch und stellt sie unter einer URL zur Verf\u00fcgung, die auf deinem Benutzernamen und dem Repository-Namen basiert.<\/li>\n
  2. Benutzerdefinierte Domains:<\/strong> Mit GitHub Pages kannst du anstelle der Standard-URL von GitHub einen eigenen Domainnamen f\u00fcr deine Website verwenden. So kannst du dein eigenes Branding verwenden und es den Nutzern leichter machen, deine Website zu finden und aufzurufen.<\/li>\n
  3. HTTPS-Unterst\u00fctzung:<\/strong> GitHub Pages bietet Unterst\u00fctzung f\u00fcr HTTPS, was sichere Verbindungen zu deiner Website erm\u00f6glicht. Das ist wichtig, um das Vertrauen in deine Website zu st\u00e4rken.<\/li>\n
  4. Jekyll-Unterst\u00fctzung:<\/strong> GitHub Pages unterst\u00fctzt Jekyll, einen Generator f\u00fcr statische Websites, mit dem du mithilfe von Vorlagen und anderen Funktionen anspruchsvolle Websites erstellen kannst. Das macht es einfach, professionell aussehende Websites zu erstellen, ohne den gesamten Code von Grund auf neu schreiben zu m\u00fcssen.<\/li>\n<\/ol>\n

    Beschr\u00e4nkungen<\/h3>\n

    Wie bereits erw\u00e4hnt, kannst du mit GitHub Pages nur statische Websites erstellen. Wenn du ein komplexes Projekt mit vielen Funktionen erstellen m\u00f6chtest, ben\u00f6tigst du andere Hosting-Dienste<\/a>. Du solltest auch bedenken, dass du GitHub Pages nicht f\u00fcr kommerzielle Zwecke nutzen kannst, z. B. f\u00fcr den Betrieb eines Online-Gesch\u00e4fts oder E-Commerce<\/a>.<\/p>\n

    GitHub Pages erlaubt es nicht, dass deine Seite gr\u00f6\u00dfer als 1 GB ist, d.h. die Dateien deines Repositorys k\u00f6nnen diese Speichergr\u00f6\u00dfe nicht \u00fcberschreiten. Meistens ist 1 GB mehr als genug f\u00fcr eine statische Seite; du solltest nur darauf achten, deine Bilder zu komprimieren<\/a>.<\/p>\n

    Au\u00dferdem gibt es eine weiche Bandbreitenbegrenzung von 100 GB pro Monat. Diese Menge an Bandbreite w\u00fcrde ausreichen, um deine Website mit ein paar Tausend Menschen pro Monat zu teilen; wenn du also kein gro\u00dfes Publikum hast, ist das kein Problem.<\/p>\n

    Erstellen und Bereitstellen mit GitHub Pages: Schritt-f\u00fcr-Schritt-Anleitung<\/h2>\n

    Das Erstellen einer GitHub-Seite ist ein einfacher und unkomplizierter Prozess, um eine statische Website zu hosten. Denke daran, dass du einen externen Datenbankanbieter<\/a> brauchst, wenn du eine Datenbankverbindung brauchst.<\/p>\n

    In der folgenden Anleitung erf\u00e4hrst du, wie du eine GitHub-Seite von Grund auf erstellst. Dazu geh\u00f6rt das Erstellen eines entfernten Repositorys, das Erstellen einer responsiven pers\u00f6nlichen Website mit HTML<\/a> und das Bereitstellen im Web mit GitHub.<\/p>\n

    Los geht’s!<\/p>\n

    1. Bei GitHub anmelden<\/h3>\n

    Um loszulegen, brauchst du ein aktives GitHub-Konto. Wenn du noch keins hast, gehe auf die Anmeldeseite<\/a>. Das Ausf\u00fcllen des Formulars sollte nicht l\u00e4nger als ein paar Minuten dauern.<\/p>\n

    \"GitHub-Anmeldeseite
    GitHub-Anmeldeseite<\/figcaption><\/figure>\n

    Nachdem du dich angemeldet hast, solltest du ein Remote-Repository erstellen k\u00f6nnen.<\/p>\n

    2. Ein remotes Repository erstellen<\/h3>\n

    Ein Repository ist ein Verzeichnis, in dem du den gesamten Code f\u00fcr ein bestimmtes Projekt speicherst.<\/p>\n

    Klicke auf der GitHub-Startseite im linken Bereich auf die Schaltfl\u00e4che „Neu“ oder „Repository erstellen“. Dadurch wirst du zu einem Formular weitergeleitet, in das du die Informationen zu deinem Projektarchiv eintr\u00e4gst.<\/p>\n

    \"Die
    Erstelle ein GitHub-Repository<\/figcaption><\/figure>\n

    Diese n\u00e4chsten Schritte sind entscheidend:<\/p>\n

      \n
    1. Setze den Namen deines Repositorys auf \"yourusername\".github.io<\/code>.<\/li>\n
    2. Aktiviere die Schaltfl\u00e4che „\u00d6ffentlich“. Du musst das Repository auf \u00f6ffentlich<\/strong> setzen, um deine Seite zu ver\u00f6ffentlichen.<\/li>\n
    3. F\u00fcge eine README hinzu.<\/li>\n<\/ol>\n

      Du kannst nur ein Repository f\u00fcr ein bestimmtes pers\u00f6nliches Konto oder eine bestimmte Organisation haben. Deshalb besteht der Name des Projektarchivs aus deinem Benutzernamen und der Domain github.io<\/code>. Sp\u00e4ter werden wir sehen, wie du eine Website aus einem Projektarchiv einrichtest.<\/p>\n

      Wenn du nicht \u00fcber GitHub Pro verf\u00fcgst, kannst du eine GitHub-Seite nur ver\u00f6ffentlichen, wenn das Repository \u00f6ffentlich ist. Behalte dies im Hinterkopf, wenn du den Quellcode deiner Website nicht \u00f6ffentlich zug\u00e4nglich machen willst.<\/p>\n

      Danach solltest du in etwa die folgende Seite haben:<\/p>\n

      \"Erstelle
      Form des GitHub-Repositoriums<\/figcaption><\/figure>\n

      Wenn du bereits den funktionierenden Quellcode deiner Website hast, kannst du den \u00fcblichen Git-Workflow<\/a> \u00fcberspringen und die Dateien stattdessen direkt in das Repo einf\u00fcgen.<\/p>\n

      Klicke dazu auf das Men\u00fc Add file<\/code> in deinem Repository und w\u00e4hle die Option Dateien hochladen<\/strong>. W\u00e4hle dann die Dateien deiner Website aus, wobei die wichtigste HTML-Datei index.html<\/code> hei\u00dft. Vergiss nicht, auch alle CSS- und JavaScript-Dateien in das Projektarchiv zu laden.<\/p>\n

      Zum Schluss klickst du auf die Schaltfl\u00e4che Commit changes<\/strong>.<\/p>\n

      \"Hochladen
      Lade die Dateien auf GitHub hoch<\/figcaption><\/figure>\n

      Im folgenden Abschnitt werden wir eine einfache pers\u00f6nliche Website mit HTML und Bootstrap erstellen. Dann laden wir sie auf GitHub hoch und richten sie als \u00f6ffentliche Seite auf GitHub mit einer eigenen Domain ein.<\/p>\n

      3. Eine pers\u00f6nliche Website erstellen<\/h3>\n

      Als erstes klonen wir das GitHub-Repository, das wir gerade erstellt haben. Stelle dazu sicher, dass du den Git-Client<\/a> bereits auf deinem Computer installiert hast. (Falls nicht, wirf einen Blick auf unser Tutorial zu Git und GitHub<\/a>.)<\/p>\n