Website lokal testen, Vorgehensweise bei relativen Pfadangaben mit Slash am Anfang

  • HTML

Es gibt 9 Antworten in diesem Thema. Der letzte Beitrag () ist von Marcus Gräfe.

    Website lokal testen, Vorgehensweise bei relativen Pfadangaben mit Slash am Anfang

    Ich erstelle gerade eine Website, die ich zunächst lokal testen möchte, weil das ständige Hochladen nach jeder Änderung zu aufwendig ist.

    Grundsätzlich arbeite ich natürlich mit relativen Pfadangaben, damit alles immer gefunden wird, egal wo die Website liegt.

    Nun kann ich aber, wenn ich lokal arbeite, keinen Slash am Anfang einer Pfadangabe machen, weil dies ins jeweilige Stammverzeichnis führen würde, Beispiel: <link rel="stylesheet" href="/css/main.css" />. Liegt die Website auf dem Desktop, so würde er nun die CSS-Datei unter C:\css suchen, was natürlich Blödsinn ist.

    Ich kann aber auch nicht <link rel="stylesheet" href="css/main.css" /> (ohne Slash) machen, weil die referenzierende HTML-Seite u. U. in einem Unterverzeichnis ist.

    Kein Problem, dachte ich, arbeite ich einfach mit base. Beispiel: <base href="file:///C:/Users/Marcus Gr%C3%A4fe/Desktop/Website" />.

    Das löst aber nicht das Problem, dass die Anweisung background-image: url("/images/background.svg") in der CSS-Datei ins Wurzelverzeichnis will, denn da wird base offenbar ignoriert.

    Nun könnte ich zwar einen lokalen Webserver aufsetzen, aber dann müsste ich die Dateien trotzdem dorthin kopieren. Dann kann ich die auch direkt hochladen. Zudem sind in meinem lokalen Server diverse Websites (z. B. VB-Paradise als Testkopie) in Unterverzeichnissen, d. h. da würde ich gar nicht im Wurzelverzeichnis arbeiten.

    Lange Rede, kurzer Sinn: Wie geht ihr vor, wenn ihr eine Website lokal testen möchtet? Gibt es überhaupt eine Lösung für mein Problem?
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

    Ich arbeite da meist mit einem lokalen Webserver (apache) mit Virtual Hosts und setz den DocumentRoot auf das Entwicklungsverzeichnis.

    Relative-Pfadangaben (also die, die nicht mit einem Slash oder dem Schema beginnen) sind immer relativ zum HTML-Dokument. Analog sind Angaben im CSS relativ zur CSS-Datei.

    Beispiel:

    Quellcode

    1. foo/bar/
    2. index.html
    3. css/
    4. main.css
    5. images/
    6. background.svg


    index.html: <link rel="stylesheet" href="css/main.css">
    main.css: background-image:url("../images/background.svg");

    Solange die Struktur innerhalb von foo/bar erhalten bleibt (Lokal und Webserver), funktioniert die Seite sowohl über das file- als auch über das http-Protokol. Unabhängig, ob das ganze in einem zusätzlichen Unterordner liegt oder nicht.

    Zur eigentlichen Frage: Ich verwende meist ein Alias (Aufruf ist also immer http://localhost/projekt-name/...) und arbeite soweit möglich immer mit relativen Angaben.
    Absolute Pfadangaben werden nur über die serverseitige-Programmiersprachen erstellt, aber niemals hart hinterlegt.

    Ich würde auch einen lokalen Webserver empfehlen. Wenn du eventuell ein nas bei dir hast, kannst du auch dort den Webserver einrichten und mit samba oder anderen Dateidiensten direkt in Windows das nas "mappen" (mit fällt gerade das deutsche Wort nicht ein). So arbeite ich und es ist echt total einfach.
    Die beste maschinelle Übersetzung der Welt - DeepL Übersetzer
    Alle Zitate, die ich seit dem 1.9.2017 übersetzt habe, wurden vollautomatisch mit DeepL übersetzt.


    Ich habe "Wampserver" bei mir installiert (quasi wie XAMPP, nur in meinen Augen besser). Es gab ein paar Startschwierigkeiten wegen Leerzeichen und Umlauten im Pfad, aber letztendlich hat es geklappt. Allerdings habe ich mich nun letztendlich, da die Website aus nicht so sehr vielen Seiten besteht, für Angaben wie z. B. ../images/bild.png entschieden. Dann muss ich zwar höllisch aufpassen, aber wie gesagt, die Seitenanzahl ist überschaubar.

    Danke für eure Tipps!

    Trotzdem hier noch, für evtl. zukünftige Suchenden, meine Einstellungen für den lokalen Webserver mit einem eigenen Pfad und einer Testdomain:

    c:\wamp64\bin\apache\apache2.4.23\conf\extra\httpd-vhosts.conf

    Quellcode

    1. <VirtualHost *:80>
    2. ServerName my-domain.local
    3. DocumentRoot "C:/Users/MARCUS~1/Desktop/Websit~1/my-domain"
    4. <Directory "C:/Users/MARCUS~1/Desktop/Websit~1/my-domain/">
    5. Options +Indexes +Includes +FollowSymLinks +MultiViews
    6. AllowOverride All
    7. Require local
    8. </Directory>
    9. </VirtualHost>

    C:\Windows\System32\drivers\etc\hosts

    Quellcode

    1. 127.0.0.1 my-domain.local
    Besucht auch mein anderes Forum:
    Das Amateurfilm-Forum

Facebook
Telefonspende