Webseite lokal erstellen

This is an old revision of the document!

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 <body> Tags hinzu:

    <h1>Hello</h1>
    Bla bla.
    <h2>World</h2>
    Und eine Liste
    <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
    </ul>

Speichern Sie die Datei.

Ö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.

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.

Der Befehl scp dient zum kopieren von Dateien zum oder vom Server:

scp index.html ofi:hello/.

Ö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.

ssh ofi "find /srv/www/ofi/2025/2aLS -name hello -type d -exec stat --printf '%y %U\n' \{\}/index.html \;  2>/dev/null | sort"

Erklärung:

find durchsucht Verzeichnisse und Unterverzeichnisse nach Dateinamen und Ordnern
- mit Namen hello von Typ Directory (d).
- mit den gefundenen Verzeichnissen werden Modifikationsdatum und zugehöriger Besitzer der Datei index.html in diesem Verzeichnis ausgegeben.
2>/dev/null leitete alle Fehlermeldungen in die Datei /dev/null um (so quasi das digitale Nirvana).
sort nach Modifikationsdatum (ist zwar alphabetisch, mit diesem Datumsformat funktioniert das aber).

Webseite lokal erstellen

Kopieren der Seite auf den Webserver

Anlegen eines Verzeichnisses auf dem Server

Kopieren der Datei index.html

Testen

Wer hat schon fertig?

https://fginfo.ksbg.ch Fachgruppe Informatik der KSBG