2548502

Anleitung: Homepage bei Github hosten

29.11.2020 | 08:02 Uhr | Thorsten Eggeling

Für simple Infos im Internet ist kein Content-Management-System nötig – und Geld muss man dafür auch nicht ausgeben. Wer nur wenige Informationen im Web veröffentlichen will, kann dazu eine einfache Alternative nutzen.

Kleine Organisationen, Vereine oder Privatpersonen erstellen oft Websites, die nur Öffnungszeiten, Anschrift, Wegbeschreibung oder Veranstaltungstermine enthalten. Dafür benötigt man kein Wordpress, statische HTML-Seiten reichen völlig. Das bietet zudem maximale Sicherheit, da nur Websites angreifbar sind, die dynamisch etwa mit PHP-Scripts erzeugt werden. Statische HTML-Seiten lassen sich bei jedem Webhoster nutzen. Ein kostenloses Angebot gibt es bei Github . Github richtet sich hauptsächlich an Open- Source-Entwickler, ist jedoch für jede Art von Websites inklusive Blogs geeignet. Der Umfang der Website darf jedoch ein GB nicht überschreiten und eine rein kommerzielle Nutzung ist nicht erlaubt.

Einfache Websites bei Github

Github ist ein Dienst für Entwickler, die den Quellcode ihrer Projekte veröffentlichen und teilen wollen. Es lässt sich aber auch eine Website einrichten, die dann über die Adresse https://[Benutzername].github.io erreichbar ist. Die besteht im einfachsten Fall aus einigen Textdateien, in die sich Formatanweisungen für Überschriften, Fettungen oder Listen einbauen lassen. Zum Einsatz kommt dabei Markdown, das mit seiner minimalen Syntax leicht zu erlernen ist. Wer Kenntnisse in HTML und CSS besitzt, kann auch HTML-Dateien bei Github hochladen. Einfacher ist es jedoch, auf vorgefertigte Themes zurückzugreifen und diese für die eigenen Bedürfnisse anzupassen. Gehen Sie auf https://github.com und erstellen Sie nach einem Klick auf „Sign up“ ein Benutzerkonto.

Der gewählte Benutzernamen ist Bestandteil Ihrer Github-URLs. Wählen Sie diesen daher mit Bedacht. Nach der Anmeldung klicken Sie auf „Create a repository“. Unter „Repository name“ tippen Sie 

[Benutzer].github.io

ein. Den Platzhalter „[Benutzer]“ ersetzen Sie durch Ihren tatsächlichen Github-Benutzernamen. Setzen Sie ein Häkchen vor „Initialize this repository with a README“ und klicken Sie auf „Create repository“.

Bearbeiten Sie die Datei „README.md“ nach einem Klick auf das Stiftsymbol und bauen Sie einen Beispieltext ein. Eine Übersicht mit den verwendbaren Markdown-Kommandos finden Sie unter https://github.github.com/gfm . Die folgenden Zeilen erzeugen ein HTML-Dokument mit einer Überschrift 1 (<h1>), einer Überschrift 2 (<h2>) und einem Text mit der Auszeichnung „Fett“ (<em>).

# Meine neue Website 
Text
## Überschrift 2 
**Fetter Text**

Achten Sie auf die Leerzeichen hinter „#“ und „##“. Eine Vorschau der Seite sehen Sie nach einem Klick auf „Preview changes“. Speichern Sie die Seite per Klick auf „Commit Changes“.

Es kann etwas dauern, bis Github die Website erstellt hat. Ist der Vorgang abgeschlossen, sehen Sie rechts unten unter „Environment“ den Link „github-pages“. Nach einem Klick darauf erfahren Sie, wann der Inhalt veröffentlicht wurde. Rufen Sie dann https://[Benutzer].github.io auf. Github erzeugt die Website neu, nachdem Sie eine Datei geändert und gespeichert haben. Dabei gibt es ein Limit von zehn Änderungen pro Stunde.

Lesetipp: Die besten kostenlosen Cloud-Speicher aus Deutschland

Bilder in eine Webseite einbauen

Formatieren mit Markdown: Die Dokumentation https://github.github.com/gfm erläutert die Markdown-Syntax, liefert Tipps und zahlreiche Beispiele für die Gestaltung der Webseiten.
Vergrößern Formatieren mit Markdown: Die Dokumentation https://github.github.com/gfm erläutert die Markdown-Syntax, liefert Tipps und zahlreiche Beispiele für die Gestaltung der Webseiten.

Sollen Bilder auf der Webseite erscheinen, laden Sie diese zuerst hoch. Für mehr Übersicht sollten Sie Bilder in einem eigenen Ordner unterbringen. Klicken Sie auf „Add File –› Create New File". Dann tippen Sie images/.gitkeep ein und klicken auf „Commit new file“. Es öffnet sich der Ordner „images“ und Sie klicken auf „Add file –› Upload files“. Ziehen Sie die gewünschten Dateien vom Dateimanager auf den markierten Bereich.

Öffnen Sie dann „Readme.md“ zum Bearbeiten. Für ein Bild setzen Sie eine Zeile in der Form 

![Alt-Text](images/EinBild.jpg "Bild-Titel")

ein. Die Pfadangabe zum Bild erfolgt relativ zum Ort von „Readme.md“. In unserem Beispiel liegt die Datei „EinBild.jpg“ im Ordner „images“.

HTML neben Markdown verwenden

Github verarbeitet auch HTML-Code in einer Markdown-Datei. Bei Bedarf lässt sich über den „img“-Tag ein Bild einbauen und die Größe der Darstellung ändern:

<img src="images/EinBild.jpg" alt="Alt-Text" width="250" title="BildTitel"/>

Achten Sie darauf, dass vor dem abschließenden „/>“ kein Leerzeichen stehen darf. Durch die Angabe hinter „width=“ reduziert der Browser die angezeigte Bildgröße auf 250 Pixel. Per HTML-Code ist es auch möglich, Bilder von Text umfließen zu lassen:

<div style="float: left"> <img src="images/EinBild.jpg_ klein.jpg" alt="Lorem ipsum"/></div>

Komplexere Websites mit Themes gestalten

Mehr Themes: Bei https://jamstackthemes.dev/ finden Sie zahlreiche Jekyll-Themes. Die Dateien übernehmen Sie in das eigene Repositorium und führen die gewünschten Änderungen durch.
Vergrößern Mehr Themes: Bei https://jamstackthemes.dev/ finden Sie zahlreiche Jekyll-Themes. Die Dateien übernehmen Sie in das eigene Repositorium und führen die gewünschten Änderungen durch.

Github erzeugt die Webseiten mit Jekyll , einem Generator für statische Webseiten. Das Tool bietet zahlreiche Optionen und lässt sich auch ohne Github auf dem Linux-PC einsetzen (siehe Kasten). Über vorgefertigte Vorlagen können Sie Websites für jeden Anspruch erstellen, beispielsweise Portfolios oder Blogs. Die Konfiguration erfolgt über „Settings“ und Klick auf „Choose a theme“ unter „GitHub Pages“.

Anhand der Vorschau entscheiden Sie sich für ein Theme und klicken auf „Select Theme“. Wer hier nicht fündig wird, geht auf https://jamstackthemes.dev/ssg/jekyll . Hier stehen mehrere Hundert Themes zur Auswahl inklusive Livedemo. Per Klick auf „Github“ gelangen Sie jeweils zum zugehörigen Github-Repositorium, das Hinweise zur Installation und Konfiguration bietet. Es ist am flexibelsten, das Theme-Repositorium per Klick auf „Fork“ in die eigene Github-Instanz zu übernehmen.

Sie können dann die Dateien nach Wunsch anpassen, was jedoch eine gewisse Einarbeitungszeit erfordert. Ändern Sie den Namen des Repositoriums über „Settings“ auf „[Benutzer].github.io“.

Apple hat in dieser Woche das letzte Apple-Event abgehalten und nicht nur einen extrem leistungsstarken Chip vorgestellt, sondern auch gleich drei neue Macs: MacBook Air, MacBook Pro und einen neuen Mac mini. Außerdem plant WhatsApp, noch in diesem Monat ein neues Feature einzuführen, das Nachrichten automatisch löscht, Sony entwickelt nun auch Drohnen und Dennis erklärt euch, wie Forscher der Uni Augsburg mit einer App anhand der Stimme erkennen wollen, ob man sich mit Corona infiziert hat.
ALLE INFOS ZUM NACHLESEN
NEWS DER WOCHE
Air, Pro und mini: Apple stellt neue Macs vor
► Alle Infos zum neuen MacBook Air:
www.macwelt.de/news/Macbook-Air-M1-Ein-Meisterstueck-mit-offenen-Fragen-10919388.html
► Alle Infos zum neuen MacBook Pro:
www.macwelt.de/news/Macbook-Pro-13-mit-M1-Ein-Tick-guenstiger-und-um-Laengen-lauffaehiger-10919393.html
► Alle Infos zum neuen Mac mini:
www.macwelt.de/produkte/Schneller-und-guenstiger-Neuer-Mac-Mini-mit-ARM-CPU-10919399.html
► macOS Big Sur: Was ist neu?
www.macwelt.de/ratgeber/Das-ist-neu-in-macOS-11-Big-Sur-Menue-und-Dock-10918918.html
► WhatsApp führt “ablaufende Nachrichten” ein
www.pcwelt.de/news/WhatsApp-startet-selbstloeschende-Nachrichten-so-geht-s-10916393.html
► AirPeak: Sony entwickelt eigene Drohne:
www.pcwelt.de/news/Airpeak-Sony-entwickelt-eigene-Drohne-10918788.html

APP DER WOCHE
► Corona-App soll Infektion an Sprache erkennen
www.macwelt.de/news/Corona-App-soll-Infektion-an-Sprache-erkennen-10916787.html

PC-WELT Marktplatz

2548502