Wie laden Sie Ihre Dateien auf einen Webserver hoch?

Dieser Artikel zeigt Ihnen, wie Sie Ihre Website online stellen, indem Sie Dateiübertragungswerkzeuge nutzen.

Voraussetzungen: Sie müssen wissen, was ein Webserver ist und wie Domain-Namen funktionieren. Sie müssen auch wissen, wie Sie eine grundlegende Umgebung einrichten und wie Sie eine einfache Webseite schreiben.
Ziel: Erlernen Sie, wie Sie Dateien mit den verschiedenen verfügbaren Dateiübertragungswerkzeugen auf einen Server übertragen.

Zusammenfassung

Wenn Sie eine einfache Webseite erstellt haben (siehe HTML-Grundlagen für ein Beispiel), möchten Sie sie wahrscheinlich online auf einem Webserver bereitstellen. In diesem Artikel besprechen wir, wie Sie dies mit verschiedenen verfügbaren Optionen wie SFTP-Clients, RSync und GitHub tun können.

SFTP

Es gibt mehrere SFTP-Clients. In unserer Demo behandeln wir FileZilla, da es kostenlos und für Windows, macOS und Linux verfügbar ist. Um FileZilla zu installieren, gehen Sie zur Download-Seite von FileZilla, klicken Sie auf den großen Download-Button und installieren Sie es wie gewohnt aus der Installationsdatei.

Hinweis: Natürlich gibt es viele andere Optionen. Weitere Informationen finden Sie unter Publishing-Tools.

Öffnen Sie die FileZilla-Anwendung; Sie sollten etwas wie dies sehen:

Screenshot der Benutzeroberfläche der FileZilla FTP-Anwendung. Das Host-Eingabefeld ist fokussiert.

Anmelden

In diesem Beispiel nehmen wir an, dass unser Hosting-Anbieter (der Dienst, der unseren HTTP-Webserver hosten wird) ein fiktives Unternehmen "Example Hosting Provider" ist, dessen URLs wie folgt aussehen: mypersonalwebsite.examplehostingprovider.net.

Wir haben gerade ein Konto eröffnet und diese Informationen von ihnen erhalten:

Herzlichen Glückwunsch zur Eröffnung eines Kontos bei Example Hosting Provider.

Ihr Konto ist: demozilla

Ihre Website ist sichtbar unter demozilla.examplehostingprovider.net

Um auf dieses Konto zu veröffentlichen, verbinden Sie sich bitte über SFTP mit den folgenden Anmeldedaten:

  • SFTP-Server: sftp://demozilla.examplehostingprovider.net
  • Benutzername: demozilla
  • Passwort: quickbrownfox
  • Port: 5548
  • Um im Web zu veröffentlichen, legen Sie Ihre Dateien in das Verzeichnis Public/htdocs.

Sehen wir uns zuerst http://demozilla.examplehostingprovider.net/ an — wie Sie sehen können, ist dort bisher nichts zu sehen:

Unsere persönliche demozilla Webseite, im Browser betrachtet: Sie ist leer

Hinweis: Je nach Ihrem Hosting-Anbieter werden Sie die meiste Zeit zunächst eine Seite sehen, auf der etwas wie "Diese Website wird gehostet von [Hosting-Dienst]." steht, wenn Sie zuerst Ihre Webadresse aufrufen.

Um Ihren SFTP-Client mit dem entfernten Server zu verbinden, befolgen Sie diese Schritte:

  1. Wählen Sie Datei > Seitenmanager… aus dem Hauptmenü.
  2. Drücken Sie im Seitenmanager-Fenster die Neue Seite-Taste und füllen Sie dann den Seitennamen als demozilla in den bereitgestellten Raum aus.
  3. Geben Sie den SFTP-Server, den Ihr Host bereitgestellt hat, im Host:-Feld ein.
  4. Wählen Sie im Anmeldetyp: Dropdown Normal aus und füllen Sie Ihren bereitgestellten Benutzernamen und Passwort in die entsprechenden Felder aus.
  5. Geben Sie den richtigen Port und andere Informationen ein.

Ihr Fenster sollte etwa so aussehen:

Screenshot der Standard-Landingpage einer fiktiven Webseite, wenn das Dateiverzeichnis leer ist

Drücken Sie nun Verbinden, um sich mit dem SFTP-Server zu verbinden.

Hinweis: Stellen Sie sicher, dass Ihr Hosting-Anbieter eine SFTP (Secure FTP)-Verbindung zu Ihrem Hosting-Bereich anbietet. FTP ist von Natur aus unsicher, und Sie sollten es nicht verwenden.

Hier und dort: lokale und entfernte Ansicht

Sobald die Verbindung hergestellt ist, sollte Ihr Bildschirm in etwa so aussehen (wir haben uns mit einem eigenen Beispiel verbunden, um Ihnen eine Vorstellung zu geben):

SFTP-Client zeigt Website-Inhalte an, sobald er mit dem SFTP-Server verbunden ist. Lokale Dateien sind links. Entfernte Dateien sind rechts.

Lassen Sie uns ansehen, was Sie sehen:

  • In der Mitte links sehen Sie Ihre lokalen Dateien. Navigieren Sie in das Verzeichnis, in dem Sie Ihre Website speichern (z. B. mdn).
  • In der Mitte rechts sehen Sie entfernte Dateien. Wir sind in unseren entfernten FTP-Root eingeloggt (in diesem Fall users/demozilla).
  • Sie können die unteren und oberen Bereiche vorerst ignorieren. Diese sind respektive ein Log von Nachrichten, die den Verbindungsstatus zwischen Ihrem Computer und dem SFTP-Server anzeigen, und ein Live-Log von jeder Interaktion zwischen Ihrem SFTP-Client und dem Server.

Hochladen auf den Server

Unsere Beispielanweisungen des Hosts sagten uns: "Um im Web zu veröffentlichen, legen Sie Ihre Dateien in das Verzeichnis Public/htdocs." Sie müssen im rechten Bereich zu dem angegebenen Verzeichnis navigieren. Dieses Verzeichnis ist effektiv das Root Ihrer Website — dort werden Ihre index.html-Datei und andere Ressourcen abgelegt.

Sobald Sie das richtige entfernte Verzeichnis gefunden haben, in das Sie Ihre Dateien legen möchten, ziehen Sie sie vom linken Bereich in den rechten Bereich, um Ihre Dateien auf den Server hochzuladen.

Sind sie wirklich online?

Bisher, so gut, aber sind die Dateien wirklich online? Sie können dies überprüfen, indem Sie in Ihrem Browser zu Ihrer Website zurückkehren (z. B. http://demozilla.examplehostingprovider.net/):

Los geht's: unsere Website ist live!

Und unsere Website ist live!

Rsync

Rsync ist ein lokales zu entferntes Datei-Synchronisierungstool, das normalerweise auf den meisten Unix-basierten Systemen (wie macOS und Linux) verfügbar ist, aber es gibt auch Windows-Versionen.

Es wird als ein fortschrittlicheres Werkzeug als SFTP angesehen, da es standardmäßig in der Befehlszeile verwendet wird. Ein einfacher Befehl sieht so aus:

bash
rsync [-options] SOURCE user@x.x.x.x:DESTINATION
  • -options ist ein Bindestrich gefolgt von einem oder mehreren Buchstaben, zum Beispiel -v für ausführliche Fehlermeldungen und -b um Sicherungen zu erstellen. Die vollständige Liste finden Sie auf der rsync Man-Seite (suchen Sie nach "Options summary").
  • SOURCE ist der Pfad zur lokalen Datei oder zum Verzeichnis, von dem Sie die Dateien kopieren möchten.
  • user@ sind die Anmeldedaten des Benutzers auf dem entfernten Server, zu dem Sie Dateien kopieren möchten.
  • x.x.x.x ist die IP-Adresse des entfernten Servers.
  • DESTINATION ist der Pfad zum Ort, an den Sie Ihr Verzeichnis oder Ihre Dateien auf dem entfernten Server kopieren möchten.

Solche Details müssten Sie von Ihrem Hosting-Anbieter erhalten.

Für mehr Informationen und weitere Beispiele, siehe Anleitung zur Nutzung von Rsync zum Kopieren/Syncen von Dateien zwischen Servern.

Natürlich ist es eine gute Idee, eine sichere Verbindung zu verwenden, wie bei FTP. Im Falle von Rsync geben Sie SSH-Details an, um die Verbindung über SSH mit der -e Option herzustellen. Zum Beispiel:

bash
rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION

Weitere Details zu den Anforderungen finden Sie unter Dateien mit Rsync über SSH kopieren.

Rsync GUI-Tools

Für Rsync sind GUI-Tools verfügbar (für diejenigen, die sich nicht so wohl fühlen, die Befehlszeile zu verwenden). Acrosync ist ein solches Tool und ist für Windows und macOS verfügbar.

Auch hier müssten Sie die Verbindungsauthentifizierungsdetails von Ihrem Hosting-Anbieter erhalten, aber auf diese Weise hätten Sie ein GUI, um sie einzugeben.

GitHub

GitHub ermöglicht es Ihnen, Websites über GitHub Pages (gh-pages) zu veröffentlichen.

Wir haben die Grundlagen zur Nutzung davon im Artikel Veröffentlichen Ihrer Website aus unserem Einstieg ins Web Leitfaden behandelt, so dass wir es hier nicht noch einmal wiederholen werden.

Es ist jedoch wissenswert, dass Sie auch eine Website auf GitHub hosten können, aber eine benutzerdefinierte Domain damit verwenden können. Siehe Verwendung einer benutzerdefinierten Domain mit GitHub Pages für einen detaillierten Leitfaden.

Andere Methoden zum Hochladen von Dateien

Das FTP-Protokoll ist eine bekannte Methode zum Veröffentlichen einer Website, aber nicht die einzige. Hier sind einige weitere Möglichkeiten:

  • Web-Schnittstellen. Eine HTML-Schnittstelle, die als Front-End für einen entfernten Datei-Upload-Dienst fungiert. Bereitgestellt durch Ihren Hosting-Dienst.
  • WebDAV. Eine Erweiterung des HTTP-Protokolls, um fortgeschrittenere Dateiverwaltung zu ermöglichen.