====== Webseite lokal erstellen ====== * Legen Sie an einem geeigneten Ort ein neues Verzeichnis mit Namen ''hello'' an (alles Kleinbuchstaben, keine Leerschläge oder Sonderzeichen). * Starten Sie VisualStudioCode und öffnen Sie das neue Verzeichnis (File -> Open Folder) * Legen Sie eine neue Datei mit Namen ''index.html'' an. * Schreiben Sie ein Ausrufezeichen ''!'' und akzeptieren Sie den Vorschlag ''Emmet Abbreviation'' * Ändern Sie den Titel und fügen folgende HTML-Code zwischen den ''
'' Tags hinzu:
Hello
Bla bla.
World
Und eine Liste
- Foo
- Bar
- Baz
Speichern Sie die Datei.
===== Kopieren der Seite auf den Webserver =====
Öffnen Sie in VisualStudioCode ein Terminal (Menu Terminal -> New Terminal).
Das Terminal wird somit gleich im Verzeichnis ''hello'' geöffnet. Damit entfällt das Navigieren mit ''cd'' ins Verzeichnis.
==== Anlegen eines Verzeichnisses auf dem Server ====
Damit wir auf dem Server etwas Ordnung haben, erstellen wir auf dem Server erst einmal ein Verzeichnis ''hello'', indem wir erst mit ''ssh'' eine Kommandozeile auf dem Server öffnen und dort mit ''mkdir'' ein Verzeichnis anlegen. Mit ''pwd'' sehen Sie den vollen Pfad auf dem Server. Das letzte Verzeichnis (Ziffern und Buchstaben a-f) wird dann in der URL erscheinen. Danach die Verbindung wieder schliessen (''exit''):
ssh ofi
mkdir hello
pwd
exit
Das muss pro Verzeichnis natürlich nur ein einziges Mal erfolgen.
==== Kopieren der Datei index.html ====
Der Befehl ''scp'' dient zum kopieren von Dateien zum oder vom Server:
scp index.html ofi:hello/.
==== Testen ====
Öffnen Sie https://ofi.tech-lab.ch/2025/2aLS/ und navigieren Sie in Ihr Verzeichnis. Wenn Sie dieses nicht mehr kennen, geben Sie folgendes auf der Kommandozeile ein:
Das führt genau ein Kommando auf dem Webserver aus und beendet die Verbindung wieder.
ssh ofi pwd
Ändern Sie dann die Adress-Zeile im Browser ab, indem Sie noch ''hello/'' hinten anfügen. Damit sollte Ihre Webseite sichtbar werden.
==== Wer hat schon fertig? ====
ssh ofi "stat --printf '%y %U\n' /srv/www/ofi/2025/2aLS/*/hello/index.html | sort"
Erklärung:
* stat ist ein «besseres ''ls''» was
* Modifikationsdatum (%y) und zugehöriger Besitzer (%U) der Datei index.html in diesem Verzeichnis ausgegeben (plus ein Zeilenumbruch ''\n'').
* ''sort'' nach Modifikationsdatum (ist zwar alphabetisch, mit diesem Datumsformat funktioniert das aber).