Mit all den aktuellen Tools und Frameworks für die Webentwicklung wird die Erstellung einer Website immer komplizierter. Aber manchmal brauchst du nicht viel Interaktivität 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.
In diesem Tutorial erfährst du, was eine statische Website ist, welche Vorteile sie hat, wo ihre Grenzen liegen und wie du mit GitHub Pages kostenlos eine einfache persönliche Website mit HTML und Bootstrap erstellst und bereitstellst.
Was sind GitHub Pages?
GitHub ist eine webbasierte Plattform für das Hosting von Git-Repositories und die Zusammenarbeit an Softwareprojekten. Sie bietet Werkzeuge zum Teilen und Verfolgen von Codeänderungen, zum Verwalten und Prüfen von Code und die Möglichkeit, Pull Requests zu öffnen und zu prüfen.
Verwechsle nicht Git und GitHub! GitHub ist ein Hosting-Dienst, der die Zusammenarbeit zwischen Entwicklern ermöglicht, während Git die lokale Versionskontrollsoftware ist, mit der du Schnappschüsse vom Stand deines Softwareprojekts speichern kannst.
GitHub Pages ist eine der besten Funktionen von GitHub. Es ist ein Dienst, mit dem du eine statische Website direkt von einem GitHub-Repository aus hosten kannst. Das heißt, du kannst den Code und die Dateien deiner Website in deinem Repository speichern und GitHub veröffentlicht sie automatisch als Website, auf die du online zugreifen kannst.
Zusammenfassend lässt sich sagen, dass GitHub Pages eine schnelle und einfache Möglichkeit ist, deine Website zum Laufen zu bringen. Es ist besonders nützlich, um dein Portfolio, Open-Source-Projekte oder andere statische Inhalte zu präsentieren.
Statische vs. dynamische Websites
Wie wir gesehen haben, bietet GitHub Pages eine Möglichkeit, statische Websites zu erstellen. Aber was ist der Unterschied zwischen einer statischen und einer dynamischen Website?
Beginnen wir mit den Inhalten auf diesen Seiten.
Statische Inhalte sind die Elemente der Website, die für alle Nutzer/innen gleich bleiben, unabhängig davon, wer sie sind oder welche Aktionen sie auf der Website durchführen. Dazu gehören 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.
Im Gegensatz dazu sind dynamische Inhalte Inhalte, die sich je nach Aktion des Nutzers ändern, 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.
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).
Generell kann man sagen, dass eine Website statisch ist, wenn sie nur HTML, CSS und JavaScript auf dem Frontend enthält und keine Servertechnologien wie PHP oder Python, die mit einer Datenbank interagieren.
Mit GitHub Pages ist es zwar nicht möglich, dynamische Websites zu erstellen, aber du kannst mit einem CMS wie WordPress oder statischen Website-Generatoren wie Gatsby oder Hugo ganz einfach deine eigene Website erstellen.
Die wichtigsten Funktionen von GitHub Pages
Schauen wir uns die Stärken von GitHub Pages als Hosting-Dienst an:
- Einfaches Einrichten und Veröffentlichen: GitHub Pages macht es dir leicht, mit nur wenigen Schritten loszulegen. Du kannst GitHub Pages für dein Repository aktivieren und die Quelle für deine Website-Dateien angeben. GitHub veröffentlicht deine Website dann automatisch und stellt sie unter einer URL zur Verfügung, die auf deinem Benutzernamen und dem Repository-Namen basiert.
- Benutzerdefinierte Domains: Mit GitHub Pages kannst du anstelle der Standard-URL von GitHub einen eigenen Domainnamen für deine Website verwenden. So kannst du dein eigenes Branding verwenden und es den Nutzern leichter machen, deine Website zu finden und aufzurufen.
- HTTPS-Unterstützung: GitHub Pages bietet Unterstützung für HTTPS, was sichere Verbindungen zu deiner Website ermöglicht. Das ist wichtig, um das Vertrauen in deine Website zu stärken.
- Jekyll-Unterstützung: GitHub Pages unterstützt Jekyll, einen Generator für 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üssen.
Beschränkungen
Wie bereits erwähnt, kannst du mit GitHub Pages nur statische Websites erstellen. Wenn du ein komplexes Projekt mit vielen Funktionen erstellen möchtest, benötigst du andere Hosting-Dienste. Du solltest auch bedenken, dass du GitHub Pages nicht für kommerzielle Zwecke nutzen kannst, z. B. für den Betrieb eines Online-Geschäfts oder E-Commerce.
GitHub Pages erlaubt es nicht, dass deine Seite größer als 1 GB ist, d.h. die Dateien deines Repositorys können diese Speichergröße nicht überschreiten. Meistens ist 1 GB mehr als genug für eine statische Seite; du solltest nur darauf achten, deine Bilder zu komprimieren.
Außerdem gibt es eine weiche Bandbreitenbegrenzung von 100 GB pro Monat. Diese Menge an Bandbreite würde ausreichen, um deine Website mit ein paar Tausend Menschen pro Monat zu teilen; wenn du also kein großes Publikum hast, ist das kein Problem.
Erstellen und Bereitstellen mit GitHub Pages: Schritt-für-Schritt-Anleitung
Das Erstellen einer GitHub-Seite ist ein einfacher und unkomplizierter Prozess, um eine statische Website zu hosten. Denke daran, dass du einen externen Datenbankanbieter brauchst, wenn du eine Datenbankverbindung brauchst.
In der folgenden Anleitung erfährst du, wie du eine GitHub-Seite von Grund auf erstellst. Dazu gehört das Erstellen eines entfernten Repositorys, das Erstellen einer responsiven persönlichen Website mit HTML und das Bereitstellen im Web mit GitHub.
Los geht’s!
1. Bei GitHub anmelden
Um loszulegen, brauchst du ein aktives GitHub-Konto. Wenn du noch keins hast, gehe auf die Anmeldeseite. Das Ausfüllen des Formulars sollte nicht länger als ein paar Minuten dauern.
Nachdem du dich angemeldet hast, solltest du ein Remote-Repository erstellen können.
2. Ein remotes Repository erstellen
Ein Repository ist ein Verzeichnis, in dem du den gesamten Code für ein bestimmtes Projekt speicherst.
Klicke auf der GitHub-Startseite im linken Bereich auf die Schaltfläche „Neu“ oder „Repository erstellen“. Dadurch wirst du zu einem Formular weitergeleitet, in das du die Informationen zu deinem Projektarchiv einträgst.
Diese nächsten Schritte sind entscheidend:
- Setze den Namen deines Repositorys auf
"yourusername".github.io. - Aktiviere die Schaltfläche „Öffentlich“. Du musst das Repository auf öffentlich setzen, um deine Seite zu veröffentlichen.
- Füge eine README hinzu.
Du kannst nur ein Repository für ein bestimmtes persönliches Konto oder eine bestimmte Organisation haben. Deshalb besteht der Name des Projektarchivs aus deinem Benutzernamen und der Domain github.io. Später werden wir sehen, wie du eine Website aus einem Projektarchiv einrichtest.
Wenn du nicht über GitHub Pro verfügst, kannst du eine GitHub-Seite nur veröffentlichen, wenn das Repository öffentlich ist. Behalte dies im Hinterkopf, wenn du den Quellcode deiner Website nicht öffentlich zugänglich machen willst.
Danach solltest du in etwa die folgende Seite haben:
Wenn du bereits den funktionierenden Quellcode deiner Website hast, kannst du den üblichen Git-Workflow überspringen und die Dateien stattdessen direkt in das Repo einfügen.
Klicke dazu auf das Menü Add file in deinem Repository und wähle die Option Dateien hochladen. Wähle dann die Dateien deiner Website aus, wobei die wichtigste HTML-Datei index.html heißt. Vergiss nicht, auch alle CSS- und JavaScript-Dateien in das Projektarchiv zu laden.
Zum Schluss klickst du auf die Schaltfläche Commit changes.
Im folgenden Abschnitt werden wir eine einfache persönliche Website mit HTML und Bootstrap erstellen. Dann laden wir sie auf GitHub hoch und richten sie als öffentliche Seite auf GitHub mit einer eigenen Domain ein.
3. Eine persönliche Website erstellen
Als erstes klonen wir das GitHub-Repository, das wir gerade erstellt haben. Stelle dazu sicher, dass du den Git-Client bereits auf deinem Computer installiert hast. (Falls nicht, wirf einen Blick auf unser Tutorial zu Git und GitHub.)
Gehe auf die Registerkarte code deines Repositorys und kopiere die SSH-URL in die Option SHH.
Starte dann ein Terminal oder eine Kommandozeile. Bei den meisten Linux-Distributionen und macOS kannst du die Tastenkombination Strg + Alt + T verwenden oder im Anwendungsmenü deines Systems nach Terminal suchen. Unter Windows kannst du die Git BASH, die standardmäßig mit Git installiert ist, die CMD, die PowerShell oder einen GUI-Client verwenden.
Gib in deinem Terminal git clone und die URL ein, die du kopiert hast. Dadurch wird eine Kopie des remoten Repositorys heruntergeladen und auf deinem lokalen Rechner erstellt, sodass du deine Website erstellen kannst.
Gib dann den neuen Ordner mit dem Namen yourusername.github.io mit cd und ls ein. Du solltest den .git-Ordner sehen, der die Konfiguration und die Metadaten deines Projekts sowie die README.md-Datei enthält, falls du eine erstellt hast.
Öffne deinen bevorzugten Texteditor (z. B. Sublime Text) und beginne mit der Erstellung deiner Website.
Erstelle im Stammverzeichnis des Repositorys eine Datei namens index.html (dieser Name wird von GitHub Pages benötigt) und gib die typische HTML-Code-Struktur ein:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kinsta User</title>
</head>
<body>
</body>
</html>Wie bereits erwähnt, werden wir Bootstrap 5.0 verwenden, ein Open-Source-CSS-Framework, mit dem sich responsive Websites einfacher erstellen lassen. Wie du sehen wirst, müssen wir für diese Seite kein eigenes CSS verwenden.
Um Bootstrap in unsere Seite einzubinden, müssen wir das kompilierte CSS und JavaScript über ein CDN einbinden. Füge den folgenden Code in den HTML-Code <head> ein, um Bootstrap-CSS verwenden zu können:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">Auf die gleiche Art und Weise binden wir auch das Devicon CDN ein, um SVG-Symbole beliebter Programmiersprachen und -technologien ohne große Probleme nutzen zu können:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">Um JavaScript einzubinden, fügst du den folgenden Code direkt über dem Ende des </body> Tags ein:
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>Als Erstes erstellen wir eine Kopfzeile für unsere Website. Es wird ein dunkler Header sein, mit Links zu unserer Indexseite und zwei weiteren Seiten – „Projekte“ und „Leseprotokoll“ – die du später erstellen kannst:
<nav class="navbar navbar-dark navbar-expand-lg bg-dark ">
<div class="container-fluid">
<div class="mx-4">
<a class="navbar-brand" href="#">Kinsta User</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Reading Log</a>
</li>
</ul>
</div>
</div>
</nav>Wir verwenden den Bootstrap-Wrapper navbar und navbar-expand-lg, um einen responsiven Container zu erstellen, der sich zusammenklappt, wenn die Anzeigebreite kleiner als 992px ist. Dies geschieht aufgrund der Grid-Option lg. Wenn du mehr über die Grid-Optionen wissen willst, wirf einen Blick auf die Layout-Seite von Bootstrap.
Jetzt wollen wir zwei responsive Spalten innerhalb eines Containers erstellen: eine für ein kostenloses Bild von Unsplash und eine für eine Beschreibung von uns selbst:
<div class="container my-4 ">
<div class="row justify-content-center">
<div class="col-lg mb-lg-4">
<img src="image.jpg" class="img-fluid" alt="" srcset="">
</div>
<div class="col-lg mx-2 align-self-center">
<div class="my-3">
<h1 class="text-center">I'm a Kinsta User</h1>
<p>As a passionate software developer, I am deeply enthusiastic about creating and
developing software applications. I am constantly learning and experimenting with new
technologies and approaches, and I have a strong desire to create innovative and effective
solutions to complex problems. I am driven by my curiosity and love for problem-solving, and
I
am committed to producing high-quality, well-designed software that meets the needs of
users.
</p>
</div>
</div>
</div>
</div>Wie du siehst, beziehen wir ein Bild aus einer lokalen Datei. Es muss sich also im Repository befinden, wenn wir unsere Änderungen in das GitHub-Repository übertragen.
Schließlich verwenden wir in unserem Bootstrap-Container SVG-Symbole von Devicon und ein wenig internes CSS, um unsere Fähigkeiten hervorzuheben:
<div class="my-4">
<div class="text-center mb-4">
<h1>My Skills</h1>
</div>
<div class="row ">
<style>
I {
font-size: 4em;
}
</style>
<div class="col">
<div class="text-center">
<h4>WordPress</h4>
<i class="devicon-wordpress-plain"></i>
</div>
</div>
<div class="col">
<div class="text-center">
<h4>Django</h4>
<i class="devicon-django-plain"></i>
</div>
</div>
<div class="col">
<div class="text-center">
<h4>Python</h4>
<i class="devicon-python-plain"></i>
</div>
</div>
<div class="col">
<div class="text-center">
<h4>GitHub</h4>
<i class="devicon-github-original" ></i>
</div>
</div>
</div>
</div>Da wir den <i> HTML-Tag verwenden, können wir ihn wie eine Schrift behandeln. Daher setzen wir die Größe unserer Logos auf 4 em, indem wir sie im style Tag deklarieren.
Hier ist das Endergebnis dieser einfachen persönlichen Website:
Wusstest du, dass über 50 % des Website-Verkehrs von mobilen Geräten kommt? Da wir Bootstrap verwendet haben, konnten wir eine Menge CSS-Codes einsparen und haben außerdem eine responsive Website erhalten, wie du unten sehen kannst.
Du kannst diese Seite so weit anpassen, wie du willst. Hier ist der vollständige Quellcode auf GitHub, der dir zur Verfügung steht.
Du kannst sogar ein Headless CMS wie Ghost einbinden, wenn du eine unsere vollwertigen Anwendungs-Hosting-Lösungen nutzt. Du kannst dich über dein MyKinsta-Dashboard direkt mit deinem GitHub-Repository verbinden und deine neue Seite in wenigen Minuten zum Laufen bringen.
Jetzt ist es an der Zeit, deine Dateien zu pushen. Dazu führst du die folgenden Befehle in deinem Terminal auf der obersten Ebene deines Projekts aus.
git add .
git commit -m "Added website source code and image"
git pushJetzt können wir diese Website nutzen, um unsere GitHub-Seite einzurichten.
4. Veröffentlichen einer Benutzer-GitHub-Seite
Sobald du die index.html in das nach deinem Benutzernamen benannte Remote-Repository hochlädst, startet GitHub automatisch einen Workflow, um deine Seite online einzurichten. Es kann ein paar Minuten dauern, aber dann ist deine statische Seite automatisch startklar.
Die URL deiner Website sieht dann etwa so aus wie die folgende: https://kinstauser.github.io/
Wenn deine Seite nach 10 Minuten noch nicht online ist, kannst du versuchen, eine Dummy-Änderung an deinem Code vorzunehmen (z. B. ein Leerzeichen hinzufügen) und erneut pushen, um den Erstellungsprozess von GitHub Pages zu reaktivieren.
5. Eine GitHub-Seite für ein Repository veröffentlichen
Bis jetzt haben wir eine Benutzerseite erstellt, aber was ist, wenn wir mehrere veröffentlichte GitHub-Seiten haben wollen? Dann müssen wir eine Projektseite einrichten.
Als Beispiel nehmen wir die HTML-Technologieseite, die wir im Lehrgang Git für Webentwicklung erstellt haben.
Am einfachsten ist es, wenn du auf der Registerkarte Einstellungen unseres Repositorys die Option Seiten im Abschnitt „Code und Automatisierung“ auswählst.
Wähle die Quelle Deploy from a branch aus und klicke auf den Zweig, aus dem du die Dateien bereitstellen möchtest. Es ist sehr empfehlenswert, vom Hauptzweig aus zu veröffentlichen, aber Funktionen zu erstellen und Fehler in Nebenzweigen zu beheben und diese dann zusammenzuführen. Auf diese Weise kannst du nicht so leicht Fehler in die veröffentlichte Seite einbringen.
Wenn du den Zweig ausgewählt hast, wählst du den Ordner aus, von dem aus du die Dateien bereitstellen willst – normalerweise das Stammverzeichnis (/) – und klickst auf Speichern.
Auch hier musst du ein paar Minuten warten. Deine Website sollte nun unter "yourusername".github.io/ verfügbar sein.
Um die Veröffentlichung einer Repository-Site rückgängig zu machen, gehst du zu Einstellungen, dann Seiten und klickst auf die Option mit den drei Punkten. Daraufhin erscheint ein Feld mit der Nachricht Unpublish site.
Super! Du hast die Website deines Open-Source-Projekts eingerichtet, aber der Domainname selbst ist lang und sicher nicht leicht zu merken. Schauen wir mal, wie wir das verbessern können.
6. Eine benutzerdefinierte Domain einrichten
Der einfachste Weg, eine benutzerdefinierte Domain für eine GitHub-Seite einzurichten und sicherzustellen, dass sie funktioniert, ist, zu deinem DNS-Anbieter zu gehen und vier A-Einträge für die IP-Adressen der GitHub-Seiten zu erstellen:
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153Du musst auch einen CNAME-Eintrag mit yourusername.github.io als Ziel einrichten. Normalerweise sind DNS-Änderungen langsam, also sei geduldig, es kann bis zu einem ganzen Tag dauern.
Gehe danach in den Einstellungen deines Repos zum Abschnitt Benutzerdefinierte Domain, gib deine Domain ein, klicke auf Speichern und warte, bis GitHub deine benutzerdefinierte Domain überprüft hat.
Wenn dein DNS dies unterstützt, aktiviere außerdem das Kontrollkästchen HTTPS erzwingen, um deine Website nur über HTTPS bereitzustellen.
Herzlichen Glückwunsch! Wenn du bis zu diesem Punkt des Tutorials durchgehalten hast, hast du eine statische Website, die kostenlos in GitHub Pages gehostet wird.
Bewährte Praktiken für GitHub Pages
Bevor wir uns verabschieden, hier noch ein paar bewährte Verfahren, die du bei der Veröffentlichung einer GitHub-Seite beachten solltest:
- Nimm niemals direkte Commits in den Zweig vor, von dem aus du veröffentlichst. Erstelle Änderungen in anderen Zweigen und erstelle dann eine Pull-Anfrage.
- Wähle eine gute Domain für deine Seite, wenn du sie dir leisten kannst. Das ist eine der wichtigsten Entscheidungen für deine persönliche oder Projektmarke.
- Verwende GitHub Pages nicht für kommerzielle Zwecke, z. B. um eine E-Commerce-Seite zu erstellen.
- Evaluiere deine Bedürfnisse. Es ist toll, eine statische Seite kostenlos zu veröffentlichen, aber wenn du viel Traffic erwartest oder komplexe Funktionen brauchst, solltest du für einen guten Hosting-Service bezahlen.
Zusammenfassung
Die Webentwicklung wird jeden Tag komplizierter. Statische Websites gibt es schon seit dem Aufkommen des Internets und sie sind eine gute Möglichkeit, um mit der Erstellung von Projekten zu beginnen.
In diesem Lernprogramm hast du gelernt, was statische Websites sind und wie du sie mit GitHub Pages online einrichtest. Du hast eine einfache persönliche Website mit Bootstrap erstellt und sie als deine GitHub Benutzerseite veröffentlicht. Außerdem hast du gelernt, wie du die Website eines Projekts zum Laufen bringst und wie du sie bei Bedarf wieder veröffentlichst.
Insgesamt ist GitHub Pages eine bequeme und leistungsstarke Möglichkeit, deine statische Website kostenlos zu hosten. Ganz gleich, ob du dein Portfolio präsentieren, deine Open-Source-Projekte vorstellen oder eine Online-Präsenz aufbauen möchtest, GitHub Pages ist eine ausgezeichnete Wahl. Und wenn du genug Traffic hast oder bereit bist, eine vollständige Website zu erstellen, kannst du nahtlos zu anderen Anwendungs-Hosting-Diensten wie Kinsta wechseln, ohne etwas zu verpassen.
Schreibe einen Kommentar