20. Sep 2021
Lesedauer 12 Min.
GitHub Pages
Statische Webseiten kostenfrei auf GitHub und Co. hosten
Projekt-, Entwickler- und andere Informationen über statische Webseiten im Internet veröffentlichen.
dotnetpro
Die Entwicklung von GitHub begann Anfang 2008 und wurde von Linus Torvalds im Rahmen der Linux-Entwicklung initiiert. Der Online-Dienst für Softwareentwicklungsprojekte mit Git-Anbindung (sogenanntes Git-Hosting) wurde mit Webseitenzugang im Jahr 2012 bereitgestellt. GitHub dient der Verwaltung von Open-Source- und kommerziellen Softwareprojekten im Web. 2018 von Microsoft übernommen, nutzt GitHub zur serverbasierten Projektverwaltung das Versionskontrollsystem Git. GitHub macht alle Projekte über ein Webinterface verfügbar. Darüber erhalten Sie Zugang zu Informationen sowie Quelltexten und nutzen Funktionen zur Zusammenarbeit mit anderen Entwicklern.Seit 2008 bietet GitHub mit GitHub Pages [1] einen integrierten Webhosting-Dienst für statische Webseiten (Bild 1). Diese Funktionalität steht bereit, um Blogs (Weblogs), Informationsseiten zu Entwicklungsberichten, Fachartikel, allgemeine Informationen oder ganze Bücher zu veröffentlichen. Alle zu veröffentlichenden Inhalte werden über herkömmliche GitHub-Repositories (Quelltextdatenbanken) verwaltet. Der Generator Jekyll sorgt bei deren Inhaltsaktualisierungen automatisch für die Neuanlage der statischen Webseiten und deren Bereitstellung.
Statische Webseitenwerden auf GitHub über ein GitHub-Repository und über die GitHub Pages veröffentlicht(Bild 1)
Bild: Pages.github.com
Webseiten – statisch versus dynamisch
Eine Webseite ist eine Informationsseite, die im Internet veröffentlicht wird und die sich mit einem Webbrowser (zum Beispiel Edge, Firefox, Chrome, Safari) über einen eindeutigen URL (Uniform Resource Locator) abrufen lässt. Die Verwaltung und Bereitstellung der Informationen erfolgt nach einer Seitenanforderung über einen Webserver. Webseiten selbst werden über HTML- und CSS-Dateien gestaltet und über JavaScript mit bestimmter Funktionalität ausgestattet. Bei den Webseiten selbst unterscheidet man zwischen statischen und dynamischen Webseiten (Bild 2). Ein kostenfreies Website-Hosting wird ausschließlich für statische Webseiten, nicht aber für dynamische Webseiten angeboten.
Dynamische und statische Webseitenim Vergleich(Bild 2)
Bild: Pixelbar.be
- Statische Webseiten: Bei einer statischen Webseite gibt es jeweils eine fest definierte Datei je Webseite, wobei man zwischen mehreren Seiten per Link wechseln kann. Bei jeder Seitenanforderung wird derselbe unveränderte Inhalt ausgegeben. Statische Webseiten sind einfach zu hosten, erfordern keine serverseitigen Skripte, haben geringe bis keine Sicherheitslücken und zeichnen sich durch schnelle Ladezeiten aus, da die Seiteninhalte nicht dynamisch aufzubauen sind. Außerdem ist keine arbeitsintensive Serveradministration erforderlich, und es ist auch keine kostenintensive Serverarchitektur notwendig. Aufgrund der statischen Inhalte sind Seitenaktualisierungen hier schwieriger und zeitaufwendiger als bei dynamisch änderbaren Webseiten. Statische Webseiten kommen in der Regel ohne den Einsatz von Datenbanken aus. Für den Entwurf der statischen Webseiten werden entsprechende Webeditoren oder Webgeneratoren verwendet.
- Dynamische Webseiten: Bei dynamischen Webseiten erfolgt eine dynamische Generierung der Webseiteninhalte jeweils nach Anforderung der Webseite (etwa zur Anzeige tagesaktueller Informationen wie Börsenkurse oder entsprechend spezifischen und variierbaren Benutzeranforderungen, wie etwa bei der Informationssuche). Für die dynamische Seitengenerierung werden Content-Management-Systeme (CMS) eingesetzt. Darüber werden alle Seiteninhalte (etwa Texte, Bilder, Symbole) getrennt von den bereitgestellten Layout-Vorlagen oder auch Skripten verwaltet. Die Inhalte selbst werden erst nach Seitenanforderung zusammengefügt. Die Seitengenerierung erfolgt serverseitig, wobei serverseitig die Anwendungen unterstützt werden, die auf dem jeweils verwendeten Server lauffähig sind. Lediglich das Grundgerüst ist vor der Seitenanzeige verfügbar und muss zunächst inhaltlich aufbereitet werden. Dynamische Webseiten sind komplexer im Entwurf und in der Verwaltung, als dies bei statischen Webseiten der Fall ist. Es gibt höhere Skriptanforderungen (etwa Perl, PHP, ASP). Die dynamischen Webseiten werden in der Regel vorlagenbasiert erstellt. Die in die Vorlagen eingebundenen Daten selbst werden über eine oder mehrere Datenbanken, die als Informationsquelle dienen, bereitgestellt. Dynamische Webseiten sind komfortabel und mit geringem Zeitaufwand per CMS änderbar, ohne den Quellcode der Seiten selbst bearbeiten zu müssen. Gegenüber statischen unterliegen dynamische Webseiten höheren Betriebskosten.
GitLab Pages – eine Alternative für statische Webseiten
Die bekannteste Alternative zu den GitHub Pages sind die GitLab Pages [7]. Auch hier ist der Name Programm <span class="text-bildnachweis">(Bild 8)</span>. Beide Anbieter offerieren die Pages-Funktionalität zur Veröffentlichung von statischen Webseiten über kommerzielle oder auch kostenfreie Benutzerkonten. Die Webseiten selbst können Projektinformationen oder allgemeine Informationen, aber prinzipiell auch beliebige andere Informationen bereitstellen (zum Beispiel Informationen zu Benutzerkonten, Projekten oder Entwicklergruppen). Häufig wird die Funktionalität genutzt, um beliebige Projekte autorenübergreifend nach Themen und Funktionalität zu ordnen. Andere Webseiten kündigen lediglich in Planung befindliche Projekte und Zielsetzungen an und fordern vorab zur Zusammenarbeit (Collaboration) auf. Ob angekündigte Projekte später tatsächlich umgesetzt und ob überhaupt Quellen zu Projekten offengelegt werden, spielt dabei keine zwingende Rolle. Prinzipiell gilt, dass die Größe der Websites, die über herkömmliche Repositories verwaltet werden, auch an deren Maximalgröße geknüpft ist, vergleiche <span class="text-bildnachweis">Tabelle 1</span>. Optional legen Sie eine oder auch mehrere Webseiten an. Die Webseiten sind ebenso wie bei GitHub auch bei GitLab statisch. Sie sind also fest vordefiniert und nutzen zur Definition HTML, CSS und JavaScript. GitLab Pages sind für den persönlichen und Geschäftseinsatz nutzbar. Die Seiten selbst werden manuell über HTML-, CSS- und JavaScript-Dateien oder über einen Static Site Generator (SSG) generiert (zum Beispiel Gatsby, Jekyll, Hugo, Middleman, Harp, Hexo, Brunch, vergleiche <span class="text-bildnachweis">Tabelle 3</span>. Optional binden Sie eigene Domänen oder auch TLS-Zertifikate (Transport Layer Security) an. Jeder Inhalt kann an beliebige Lizenzen gebunden werden.
Statische Webseiten kostenfrei veröffentlichen
Für Entwickler zählen GitHub, GitLab, Netlify oder auch Vercel zu den wichtigsten Anbietern für das kostenfreie Hosten von statischen Webseiten, die ihrerseits für den Zugriff auf Entwicklerinformationen, allgemeine Informationen, Blogs oder auch Entwicklungsprojekte erstellt und veröffentlicht werden. Diese und weitere dieser Anbieter stellt Tabelle 1 zusammen. Bei allen Anbietern müssen Sie sich vor der Nutzung zunächst mit einem eigenen Konto mit Benutzername und E-Mail-Adresse registrieren. Mitunter ist eine Anmeldung auch direkt mit einem bestehenden Google-, Microsoft- oder auch Facebook-Konto durchführbar.Tabelle 2: Ausgewählte kostenfreie Webeditoren für das manuelle Gestalten statischer Webseiten
|
Die kleineren Anbieter für das kostenfreie Hosting können sich oft nur kurzfristig am Markt behaupten und verschwinden bisweilen recht schnell wieder vom Markt. So beendet beispielsweise Aerobatic [2] seine Dienste vollständig mit dem 31. Oktober 2021. Fast Technologies hat seine Hosting-Dienste bereits zum 16. Januar 2021 komplett eingestellt.Mitunter werden auch nur die kostenfreien Angebote eingestellt oder eingeschränkt. Haben Sie sich für einen solchen Anbieter entschieden, müssen Sie die Webseite später gegebenenfalls zu einem anderen Dienst übertragen. Zwar offerieren viele Anbieter kostenfreie Einstiegsvarianten für statische Webseiten, das eigentliche Geld wird aber mit den kommerziellen Produktvarianten für dynamische Webseiten gemacht. Die erhältlichen Varianten für die Premiumdienste variieren je nach Anbieter und berücksichtigen zudem die zu verwaltenden Datenmengen, Sites oder auch den anfallenden Datenverkehr je Monat.
Generatoren für statische Webseiten
Generatoren für statische Webseiten werden auch als Static Site Generators (SSG) bezeichnet. SSGs sind spezielle Tools, mit deren Hilfe sich statische Webseiten im HTML-Format anlegen lassen. Sie nutzen vorgefertigte Codegerüste und erzeugen die statischen Webseiten nicht serverseitig, sondern lokal auf dem Rechner des jeweiligen Entwicklers. Entsprechend sind alle erforderlichen Bestandteile zur Seitengenerierung auf dem Entwicklungsrechner getrennt nach Layout und Inhalt strukturiert abgespeichert. Über die Generatoren selbst nehmen Sie auch Designanpassungen nach Bedarf vor, ohne direkten Einfluss auf die bereits publizierten Inhalte zu nehmen. Generatoren arbeiten ihrerseits mit Layout-Vorlagen, die jederzeit anpassbar sind. Per Kommandozeile erfolgen die Einrichtung sowie die Bedienung. Inhalte selbst werden in der Regel über gesonderte Auszeichnungssprachen (zum Beispiel Markdown) definiert, die mitunter auch gesondert einzurichten sind. Die über die Generatoren erzeugten Webseiten lassen sich auf den genutzten Webspace oder auch ein CDN (Content Delivery Network) übertragen. Generierte Webseiten bieten eine hohe Leistung, da auch sie ausschließlich HTML-, CSS- und JavaScript-Inhalte verwenden und keine zeitintensiven Datenbankabfragen benötigen. Da generierte Webseiten nicht von Funktionsbibliotheken, Datenbanken oder auch Frameworks abhängig sind, müssen Sie sich nicht permanent um die zugeordneten Updates kümmern.Eingeschränkte Automatisierungsfunktionen sowie notwendige Grundkenntnisse in HTML, CSS, JavaScript und Auszeichnungssprachen sorgen jedoch für einen erhöhten Aufwand bei der Webseitenerstellung und -anpassung. Es gibt keine grundlegenden dynamischen Inhalte. Diese müssen bei Bedarf aufwendig über JavaScript clientseitig realisiert werden. Ob die Inhalte dann aber tatsächlich in Erscheinung treten, ist abhängig davon, ob die Ausführung von JavaScript clientseitig blockiert ist oder nicht. Ein weiterer Nachteil ist, dass SSGs keine Benutzerschnittstelle bieten, sodass die parallele Verwendung von Wysiwyg-Webeditoren sinnvoll ist (siehe Tabelle 2). Die wichtigsten und bekanntesten Generatoren für statische Webseiten sind in Tabelle 3 zusammengestellt. In der Tabelle finden Sie jeweils die Verknüpfungen zur Produktseite sowie zur Seite mit der jeweils zugehörigen Dokumentation. Weitere Generatoren finden Sie auf der Webseite Jamstack.org [3] (Bild 3). Hier erhalten Sie eine Liste mit den bekannten, aber auch unbekannteren Generatoren. Über Auswahllistenfelder geben Sie auf der Webseite an, ob Sie die angezeigte Generatorenauswahl auf bestimmte Programmiersprachen (zum Beispiel JavaScript, C#), Vorlagentypen (etwa CSS, HTML, JavaScript, React) oder auch Lizenzen (wie AGPL, Apache, BSD, GPL, MIT, MS-PL) einschränken wollen.Kostenfreie Webeditoren
Statische Webseitengeneratorenin der Übersicht(Bild 3)
Bild: Jamstack.org [3]
Neben Website-Generatoren, die statische Webseiten automatisch und anbieterneutral erzeugen, setzen Sie auch eigenständige Webeditoren für das manuelle Design von statischen Webseiten ein. Hier werden Ihnen in der Regel visuelle Entwurfsfunktionen sowie Bearbeitungsfunktionen auf HTML-, CSS- und JavaScript-Quelltextebene geboten. Tools wie Microsoft Expression Web 4 unterstützen Sie beim komfortablen Einfügen von HTML-Tags, beim Ändern der CSS-Eigenschaften oder beim Einsatz von CSS-Vorlagen (Bild 4).
Microsoft Expression Web 4bietet eine komfortable Benutzerumgebung und weitreichende Funktionen(Bild 4)
Autor
Die kostenfreien Lösungen werden mitunter nicht mehr weiterentwickelt und durch den Entwickler unterstützt, ermöglichen aber weiterhin ein komfortables Design. Die exportierten Dateien im HTML-, CSS- und JavaScript-Format lassen sich zudem jederzeit einfach in andere Webeditoren übernehmen.
Webseiten auf GitHub veröffentlichen
Um statische Webseiten auf GitHub zu veröffentlichen, benötigen Sie zunächst ein Benutzerkonto. Besitzen Sie bereits ein solches Konto, wählen Sie die Verknüpfung Sign in im oberen Bereich der Webseite an und geben dann den Benutzernamen und das zugehörige Kennwort ein. Existiert dieses noch nicht, wählen Sie zunächst im Webbrowser die Homepage von GitHub [4] an. Geben Sie dort Ihre E-Mail-Adresse an und wählen Sie dann die Schaltfläche Sign up for GitHub. Die Übernahme der korrekten E-Mail-Adresse bestätigen Sie mit Continue (Bild 5).
Neuanlageeines GitHub-Benutzerkontos starten(Bild 5)
Autor
Vergeben Sie ein Kennwort und achten Sie darauf, dass dieses eine Mindestlänge von 8 und eine optimale Länge von 15 Zeichen haben sollte. Bestätigen Sie das Kennwort mit Continue. Vergeben Sie einen Benutzernamen, hier beispielsweise Ing-ES. Sie erhalten unmittelbar einen Hinweis, ob der Benutzername bereits vergeben wurde oder verfügbar ist. Bestätigen Sie den neuen Benutzernamen mit Continue sowie den Empfang von E-Mail-Nachrichten mit y (Ja) oder n (Nein) und wechseln Sie mit Continue zum nächsten Schritt. Bestätigen Sie den neuen Account durch die Beantwortung der angezeigten Fragen und legen Sie dann den Account mit Create account an. Ändern Sie gegebenenfalls ein bemängeltes Kennwort (Bild 6).
Zugangsdatenfür das GitHub-Benutzerkonto zuweisen und Konto anlegen(Bild 6)
Autor
Sind alle Angaben gültig, erhalten Sie einen Code per E-Mail zugesandt. Geben Sie diesen ein, ist die E-Mail-Adresse geprüft und der Kontozugang wird gewährt. Später melden Sie sich dann direkt mit Benutzername und Kennwort an. Anschließend können Sie mit Create new Repository oder mit +/New Repository ein neues Repository anlegen. Der Benutzername (Owner) wird automatisch übernommen. Der Name des Repositorys hat die Syntax benutzername.github. An dieser Stelle wird der Name ing-es.github.io gewählt. Sie erhalten unmittelbar eine Rückmeldung, ob der Name verfügbar ist. Weisen Sie dann eine Beschreibung (Description) zu und geben Sie an, ob das Repository öffentlich (Public) oder nicht öffentlich (Private) sein soll. Machen Sie Angaben zur Initialisierung und bestätigen Sie mit Create repository (Bild 7).
Anlegeneines neuen, benannten Repositorys(Bild 7)
Autor
Erzeugen Sie mit Add file | Create new file eine HTML-Indexdatei, weisen Sie dieser den Namen index.html zu und geben Sie dann den HTML-Quelltext zu dieser Seite ein. An dieser Stelle wird lediglich ein Grundgerüst in HTML wiedergegeben. Generell gibt es keine Einschränkungen in der HTML/CSS-Syntax.
<span class="hljs-meta"><!DOCTYPE html></span>
<span class="hljs-tag"><<span class="hljs-name">html</span>></span>
<span class="hljs-tag"><<span class="hljs-name">head</span>></span>
...
<span class="hljs-tag"></<span class="hljs-name">head</span>></span>
<span class="hljs-tag"><<span class="hljs-name">body</span>></span>
...
<span class="hljs-tag"><<span class="hljs-name">footer</span>></span>
...
<span class="hljs-tag"></<span class="hljs-name">footer</span>></span>
<span class="hljs-tag"></<span class="hljs-name">body</span>></span>
<span class="hljs-tag"></<span class="hljs-name">html</span>></span>
Geben Sie optional im unteren Bereich eine Seitenbeschreibung ein und wählen Sie abschließend die Schaltfläche Commit new file an. Damit haben Sie bereits die erste GitHub-Pages-Seite erzeugt. Entsprechend legen Sie neue CSS-Dateien an und verbinden diese optional über die HTML-Seite mit der eingerichteten Webseite. Mit Add file | Upload files können Sie zusätzliche Dateien hochladen und über die angelegte(n) Webseite(n) referenzieren. Eine CSS-Datei legen Sie wahlweise im gleichen Verzeichnis wie die HTML-Indexdatei an. Optional nutzen Sie auch Unterverzeichnisse (zum Beispiel css\main.css). Sind die angelegten Dateien übergeben, lassen Sie diese über den URL, hier ing-es.github.io, im Browser anzeigen. Da eine manuelle HTML- und CSS-Quelltexteingabe zeitaufwendig ist, empfiehlt es sich, mithilfe der genannten Webgeneratoren beziehungsweise Webeditoren den HTML-/CSS-Quelltext Wysiwyg-basiert zu gestalten und vor der Übernahme in der Vorschau zu testen. Für angebundene JavaScript-Dateien müssen Sie dafür sorgen, dass auch diese über die Webseite(n) referenziert werden und ebenfalls im GitHub-Pages-Ordner liegen. Weiterführende Informationen finden Sie auf diversen Beispielseiten, die auf GitHub angeboten werden (siehe den Textkasten Beispielseiten und Projekte für GitHub Pages). Bleibt anzumerken, dass Sie die Inhalte der GitHub Pages jederzeit bearbeiten und erweitern können. Fehlerhaft angelegte und aktuell angewählte Repositories löschen Sie über die Settings-Funktion Delete this Repository.
Beispielseiten und Projekte für GitHub Pages
Diverse Beispielseiten und Open-Source-Projekte, die die Verwendung der GitHub Pages praktisch veranschaulichen beziehungsweise im Verbund mit den GitHub Pages einsetzbar sind, finden Sie sowohl auf GitHub.com [5] als auch auf Awesomeopensource.com [6] zusammengestellt. Die Lösungen auf der GitHub-Seite verweisen jeweils auf die Quelltexte zu den angelegten statischen Websites. Im rechten Bereich der Projektseiten finden Sie jeweils den zugehörigen Link, um die statische Webseite direkt anzuzeigen. Weiterführende Informationen entnehmen Sie jeweils den zugeordneten Informations- und Quelltexten.
Fazit
Haben Sie keinen Zugriff auf eine eigene Internet-Domäne und wollen Sie Projekte, Informationsseiten oder auch Fachinformationen komfortabel und ohne Zusatzkosten veröffentlichen, dann sollten Sie sich mit den GitHub Pages oder alternativen Anbietern mit kostenfreien Hosting-Diensten befassen und darüber ihre eigenen statischen Webseiten bereitstellen. Bei der Anlage, Aufbereitung und Aktualisierung von Webseiten greifen Sie auf gesonderte Website-Generatoren oder Webeditoren zurück, die ebenfalls kostenfrei im Internet bereitgestellt werden. Obgleich die meisten Anbieter sich an Entwickler und Entwicklerteams richten und Zusatzfunktionen zur Zusammenarbeit bieten, müssen Sie diese erweiterten Funktionen im Rahmen der Webseitenveröffentlichungen nicht nutzen.Fussnoten
- GitHub-Pages-Doku, https://docs.github.com/en/pages
- Aerobatic, http://www.aerobatic.com
- Static Site Generators bei Jamstack, https://jamstack.org/generators
- GitHub-Startseite, https://github.com
- GitHub Pages, http://www.dotnetpro.de/SL2110WebsiteGitHub1
- Awesomeopensource, http://www.dotnetpro.de/SL2110WebsiteGitHub2
- What is GitLab Pages?, http://www.dotnetpro.de/SL2110WebsiteGitHub3
- GitLab Pages bei GitLab Docs, http://www.dotnetpro.de/SL2110WebsiteGitHub4
