GitHub und lokaler Webserver

Die Webseite lokal starten

Die Seite besteht aus statischen HTML-, CSS- und JavaScript-Dateien. Weil Navigation und Footer als gemeinsame Komponenten nachgeladen werden, sollte sie über einen kleinen Webserver und nicht direkt per Doppelklick geöffnet werden.

Schritt 1

Projekt von GitHub herunterladen

Variante A: Download als ZIP

  1. Das GitHub-Repository der Webseite öffnen.
  2. Auf die grüne Schaltfläche Code klicken.
  3. Download ZIP auswählen.
  4. Die heruntergeladene ZIP-Datei vollständig entpacken.

Diese Variante benötigt kein Git und ist für einen ersten Test am einfachsten.

Variante B: Mit Git klonen

Auf der GitHub-Seite unter Code die HTTPS-Adresse kopieren und im Terminal verwenden:

git clone <HTTPS-ADRESSE-DES-REPOSITORYS> cd <NAME-DES-REPOSITORYS>

Der Vorteil: Spätere Aktualisierungen können mit git pull eingespielt werden.

Schritt 2

Den richtigen Projektordner erkennen

Der Webserver muss in dem Ordner gestartet werden, in dem sich index.html befindet. Dort sollten unter anderem folgende Dateien und Ordner liegen:

index.html rechner.html rechner-anleitung.html lokal-starten.html components/ css/ js/ assets/
Nicht im übergeordneten Download-Ordner starten

Nach dem Entpacken entsteht manchmal ein zusätzlicher Ordner. Wechsle so lange in die Unterordner, bis index.html direkt sichtbar ist.

Windows

Schnellstart mit dem Python-Webserver

Für einen lokalen Test ist der in Python enthaltene HTTP-Server ausreichend.

1. Python prüfen

py --version

Wird eine Versionsnummer angezeigt, ist Python vorhanden. Falls der Befehl nicht gefunden wird, Python installieren und beim Setup die Option zum Hinzufügen zum PATH aktivieren.

2. PowerShell im Projektordner öffnen

Im Explorer den Ordner mit index.html öffnen. Anschließend in die Adresszeile powershell eingeben und Enter drücken. Alternativ per cd in den Ordner wechseln.

3. Webserver starten

py -m http.server 8000 --bind 127.0.0.1

4. Webseite öffnen

http://127.0.0.1:8000/

Zum Beenden im PowerShell-Fenster Strg+C drücken.

Alternative Befehle

Je nach Installation kann statt py auch python oder python3 erforderlich sein.

Windows dauerhaft

Bereitstellung über IIS

Für einen dauerhaft laufenden lokalen Windows-Webserver kann der in Windows integrierte Internet Information Services verwendet werden.

  1. „Windows-Features aktivieren oder deaktivieren“ öffnen.
  2. Internetinformationsdienste und darunter Statischer Inhalt aktivieren.
  3. Den vollständigen Projektordner beispielsweise nach C:\inetpub\wwwroot\21meetup kopieren.
  4. Im Browser http://localhost/21meetup/ öffnen.

Wer die Seite nur gelegentlich testet, benötigt IIS nicht; der Python-Befehl ist einfacher und verändert das System weniger.

Linux

Schnellstart mit Python

1. In den Projektordner wechseln

cd /pfad/zum/einundzwanzig-meetup-website

2. Python prüfen

python3 --version

3. Falls nötig Python installieren

Debian / Ubuntu
sudo apt update sudo apt install python3
Fedora
sudo dnf install python3
Arch Linux
sudo pacman -S python

4. Webserver starten

python3 -m http.server 8000 --bind 127.0.0.1

5. Webseite öffnen

http://127.0.0.1:8000/

Zum Beenden im Terminal Strg+C drücken.

Linux dauerhaft

Statischer Webserver mit Nginx

Für einen dauerhaft laufenden Server im Heimnetz ist Nginx geeignet. Das folgende Beispiel verwendet Debian oder Ubuntu.

1. Nginx installieren

sudo apt update sudo apt install nginx

2. Projekt kopieren

sudo mkdir -p /var/www/21meetup sudo cp -a . /var/www/21meetup/ sudo chown -R www-data:www-data /var/www/21meetup

Die Befehle müssen im Projektordner ausgeführt werden. Der Punkt in cp -a . bedeutet „gesamten aktuellen Ordnerinhalt“.

3. Nginx-Konfiguration anlegen

sudo nano /etc/nginx/sites-available/21meetup

Folgenden Inhalt einfügen:

server { listen 80; server_name _; root /var/www/21meetup; index index.html; location / { try_files $uri $uri/ =404; } }

4. Seite aktivieren

sudo ln -s /etc/nginx/sites-available/21meetup /etc/nginx/sites-enabled/21meetup sudo nginx -t sudo systemctl reload nginx

Danach ist die Seite über die IP-Adresse des Linux-Rechners erreichbar. Besteht bereits eine andere Nginx-Seite auf Port 80, muss die Konfiguration an die vorhandene Umgebung angepasst werden.

Heimnetz

Die Seite auf anderen Geräten öffnen

Der Schnellstart bindet aus Sicherheitsgründen nur an den lokalen Rechner. Für Smartphones oder andere Geräte im selben vertrauenswürdigen Heimnetz kann der Server auf allen Netzwerkschnittstellen lauschen.

Windows
py -m http.server 8000 --bind 0.0.0.0
Linux
python3 -m http.server 8000 --bind 0.0.0.0

Die lokale IP-Adresse lässt sich unter Windows mit ipconfig und unter Linux mit ip addr anzeigen. Auf dem anderen Gerät wird anschließend beispielsweise folgende Adresse geöffnet:

http://192.168.1.50:8000/
Nur im vertrauenswürdigen lokalen Netz

Der Python-Testserver bietet keine Anmeldung und keine TLS-Verschlüsselung. Er sollte nicht direkt ins Internet weitergeleitet werden.

Updates

Eine neue Version einspielen

Bei Git-Klon

git pull

Danach den Browser mit Strg+F5 beziehungsweise einem Hard Reload neu laden, damit ältere CSS- oder JavaScript-Dateien nicht aus dem Cache verwendet werden.

Bei ZIP-Download

  1. Neue ZIP-Version herunterladen.
  2. Vorherige lokale Änderungen sichern.
  3. Neue Version in einen frischen Ordner entpacken.
  4. Eigene Anpassungen gezielt übernehmen.
Fehlerbehebung

Typische Probleme

ProblemWahrscheinliche UrsacheLösung
Navigation oder Footer fehlenDie HTML-Datei wurde per file:// geöffnet.Einen lokalen HTTP-Server starten und http://127.0.0.1:8000/ verwenden.
„Address already in use“Port 8000 wird bereits benutzt.Einen anderen Port wählen, zum Beispiel 8080.
Seite nicht erreichbarServer beendet, falscher Ordner oder falscher Port.Terminal offen lassen, Startbefehl erneut prüfen und auf index.html im aktuellen Ordner achten.
Live-Preis bleibt leerKeine Internetverbindung, API blockiert oder Werbe-/Scriptfilter greift ein.Bitcoin-Preis manuell eintragen; die restliche Berechnung funktioniert weiterhin lokal.
Änderungen sind nicht sichtbarBrowser-Cache verwendet alte Dateien.Hard Reload mit Strg+F5 oder Cache für die Seite leeren.
Andere Geräte erreichen den Server nichtServer bindet nur an 127.0.0.1 oder Firewall blockiert den Port.Mit --bind 0.0.0.0 starten und Firewall-Regel nur für das lokale Netz prüfen.