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.