path: root/files/de/learn/common_questions/upload_files_to_a_web_server/index.html

---
title: Wie lädst Du deine Dateien auf einem Webserver hoch?
slug: Learn/Common_questions/Upload_files_to_a_web_server
tags:
  - FTP
  - GitHub
  - Uploading
  - rsync
  - sftp
translation_of: Learn/Common_questions/Upload_files_to_a_web_server
---
<div class="summary">
<p>Dieser Artikel zeigt dir wie Du deine Seite online mithilfe von Dateiübertragungs-Tools veröffentlichen kannst.</p>
</div>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Vorraussetzungen:</th>
   <td>Du musst wissen <a href="https://developer.mozilla.org/en-US/Learn/What_is_a_web_server">was ein Webserver ist</a> und <a href="https://developer.mozilla.org/en-US/Learn/Understanding_domain_names">wie Domainnamen funktionieren</a>. Du musst ebenfalls wissen wie man eine <a href="/en-US/Learn/Set_up_a_basic_working_environment">einfache Umgebung einrichtet</a> und wie man <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">eine einfache Webseite schreibt</a>.</td>
  </tr>
  <tr>
   <th scope="row">Ziel:</th>
   <td>Lerne wie man Dateien mithilfe von verschiedenen Dateiübertragungs Tools auf einem Server hochlädt.</td>
  </tr>
 </tbody>
</table>

<h2 id="Zusammenfassung">Zusammenfassung</h2>

<p>Falls Du eine einfache Webseite erstellt hast (siehe <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> für ein Beispiel), willst Du diese wahrscheinlich auf einem Webserver online stellen. In diesem Artikel diskutieren wir darüber wie man dies mit Verwendung verschiedener Optionen wie SFTP-Klienten, Rsync and GitHub macht.</p>

<h2 id="SFTP">SFTP</h2>

<p>Es gibt mehrere SFTP-Klienten. Unsere Demo umfasst <a href="https://filezilla-project.org/">FileZilla</a>, da es kostenlos und verfügbar ist für Windows, macOS und Linux. Um FileZilla zu installieren, gehe zur <a href="https://filezilla-project.org/download.php?type=client">FileZilla Download-Seite</a>, klicke auf die große Download-Schaltfläche und installiere dann mithilfe der Installationsdatei auf dem üblichen Weg.</p>

<div class="note">
<p><strong>Bemerkung</strong>: Natürlich gibt es eine Menge anderer Möglichkeiten. Siehe <a href="/en-US/Learn/How_much_does_it_cost#Publishing_tools.3A_FTP_client">Publishing tools</a> für mehr Informationen.</p>
</div>

<p>Öffne das FileZilla Programm. So sollte es in etwa aussehen:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15767/filezilla-ui.png" style="display: block; height: 451px; margin: 0px auto; width: 690px;"></p>

<h3 id="Einloggen">Einloggen</h3>

<p>Für dieses Beispiel nehmen wir an, dass unser Hosting-Anbieter (der Service welcher unseren HTTP Web-Server hosten wird) eine fiktive Firma namens "Example Hosting Provider" ist, dessen URLs so aussehen: <code>mypersonalwebsite.examplehostingprovider.net</code>.</p>

<p>Wir haben soeben einen Account eröffnet und diese Informationen von ihnen erhalten:</p>

<blockquote>
<p>Gratulation zum Eröffnen eines Accounts bei Example Hosting Provider.</p>

<p>Ihr Account ist: <code>demozilla</code></p>

<p>Ihre Webseite wird sichtbar sein unter <code>demozilla.examplehostingprovider.net</code></p>

<p>Um diesen Account zu veröffentlichen, verbinden Sie sich durch SFTP mit den folgenden Zugangsdaten:</p>

<ul>
 <li>SFTP-Server: <code>sftp://demozilla.examplehostingprovider.net</code></li>
 <li>Benutzername: <code>demozilla</code></li>
 <li>Passwort: <code>quickbrownfox</code></li>
 <li>Port: <code>5548</code></li>
 <li>Um etwas im Netz zu veröffentlichen, legen Sie ihre Dateien in den <code>Public/htdocs</code> Ordner.</li>
</ul>
</blockquote>

<p>Lasse uns zuerst einen Blick auf <code>http://demozilla.examplehostingprovider.net/</code> werfen — wie Du sehen kannst, ist dort bisher nichts:</p>

<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="border-style: solid; border-width: 1px; display: block; height: 233px; margin: 0 auto; width: 409px;"></p>

<div class="note">
<p><strong>Bemerkung</strong>: Abhängig von deinem Hosting-Anbieter wirst Du die meiste Zeit eine Seite sehen die so etwas wie “Diese Website wird gehosted von [Hosting Service].” anzeigt, wenn Du deine Webadresse zum ersten mal besuchst.</p>
</div>

<p>Um deinen SFTP-Klienten mit dem Remoteserver zu verbinden, folge diesen Schritten:</p>

<ol>
 <li>Wähle <em>File &gt; Site Manager...</em> vom Hauptmenü.</li>
 <li>Im <em>Site Manager</em> Fenster, klicke auf die <em>New Site</em> Schaltfläche, dann fülle den Seitennamen als <strong>demozilla</strong> im angegebenen Feld aus.</li>
 <li>Fülle den SFTP-Server, welcher dein Host bereitgestellt hat in das <em>Host:</em> Feld.</li>
 <li>In dem <em>Logon Type:</em> Drop-down-Menü, wähle <em>Normal</em>, dann fülle deinen angegebenen Nutzernamen und Passwort in die entsprechenden Felder.</li>
 <li>Fülle den korrent Port aus und andere Informationen.</li>
</ol>

<p>Dein Fenster sollte nun in etwa so aussehen:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15769/site-manager.png" style="display: block; height: 561px; margin: 0px auto; width: 684px;"></p>

<p>Klicke jetzt <em>Verbinden</em> um zum SFTP-Server zu verbinden.</p>

<p>Bemerkung: Stelle sicher, dass dein Hosting-Anbieter eine SFTP (Secure FTP)-Verbindung zu deinem Webspace anbietet. FTP ist grundsätzlich unsicher und Du solltest es nicht verwenden.</p>

<h3 id="Hier_und_dort_Lokale_und_remote_Ansicht">Hier und dort: Lokale und remote Ansicht</h3>

<p>Einmal verbunden, sollte dein Bildschirm etwa so aussehen (wir haben uns mit einem eigenen Beispiel verbunden um dir einen Eindruck zu geben):</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15768/connected.png" style="border-style: solid; border-width: 1px; display: block; height: 199px; margin: 0px auto; width: 700px;"></p>

<p>Lasse uns prüfen was du siehst:</p>

<ul>
 <li>On the center left pane, you see your local files. Navigate into the directory where you store your website (e.g. <code>mdn</code>).</li>
 <li>On the center right pane, you see remote files. We are logged into our distant FTP root (in this case, <code>users/demozilla</code>)</li>
 <li>You can ignore the bottom and top panes for now. Respectively, these are a log of messages showing the connection status between your computer and the SFTP server, and a live log of every interaction between your SFTP client and the server.</li>
</ul>

<h3 id="Uploading_to_the_server">Uploading to the server</h3>

<p>Our example host instructions told us "To publish on the web, put your files into the <code>Public/htdocs</code> directory." You need to navigate to the specified directory in your right pane. This directory is effectively the root of your website — where your <code>index.html</code> file and other assets will go.</p>

<p>Once you've found the correct remote directory to put your files in, to upload your files to the server you need to drag-and-drop them from the left pane to the right pane.</p>

<h3 id="Sind_sie_wirklich_online">Sind sie wirklich online?</h3>

<p>So far, so good, but are the files really online? You can double-check by going back to your website (e.g. <code>http://demozilla.examplehostingprovider.net/</code>) in your browser:</p>

<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="border-style: solid; border-width: 1px; display: block; height: 442px; margin: 0 auto; width: 400px;"></p>

<p>Und <em lang="fr">voilà</em>! Unsere Webseite ist live!</p>

<h2 id="Rsync">Rsync</h2>

<p>{{Glossary("Rsync")}} is a local-to-remote file synchronizing tool, which is generally available on most Unix-based systems (like macOS and Linux), but Windows versions exist too.</p>

<p>It is seen as a more advanced tool than SFTP, beause by default it is used on the command line. A basic command looks like so:</p>

<pre class="brush: bash">rsync [-options] SOURCE user@x.x.x.x:DESTINATION</pre>

<ul>
 <li><code>-options</code> is a dash followed by a one or more letters, for example <code>-v</code> for verbose error messages, and <code>-b</code> to make backups. You can see the full list at the <a href="https://linux.die.net/man/1/rsync">rsync man page</a> (search for "Options summary").</li>
 <li><code>SOURCE</code> is the path to the local file or directory that you want to copy files over from.</li>
 <li><code>user@</code> is the credentials of the user on the remote server you want to copy files over to.</li>
 <li><code>x.x.x.x</code> is the IP address of the remote server.</li>
 <li><code>DESTINATION</code> is the path to the location you want to copy your directory or files to on the remote server.</li>
</ul>

<p>You'd need to get such details from your hosting provider.</p>

<p>For more information and further eamples, see <a href="https://www.atlantic.net/hipaa-compliant-cloud-hosting-services/how-to-use-rsync-copy-sync-files-servers/">How to Use Rsync to Copy/Sync Files Between Servers</a>.</p>

<p>Of course, it is a good idea to use a secure connection, like with FTP. In the case of Rsync, you specify SSH details to make the connection over SSH, using the <code>-e</code> option. For example:</p>

<pre class="brush: bash">rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION</pre>

<p>You can find more details of what is needed at <a href="https://www.digitalocean.com/community/tutorials/how-to-copy-files-with-rsync-over-ssh">How To Copy Files With Rsync Over SSH</a>.</p>

<h3 id="Rsync_GUI_Tools">Rsync GUI Tools</h3>

<p>As with other command line tools, GUI tools also exist for Rsync, for those who are not as comfortable with using the command line. <a href="https://acrosync.com/mac.html">Acrosync</a> is one such tool, and it is available for Windows and macOS.</p>

<p>Again, you would have to get the connection credentials from your hosting provider, but this way you'd have a GUI to enter them in.</p>

<h2 id="GitHub">GitHub</h2>

<p>GitHub erlaubt Die Webseiten via <a href="https://pages.github.com/">GitHub pages</a> (gh-pages) zu veröffentlichen.</p>

<p>We've covered the basics of using this in the <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a> article from our <a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the Web</a> guide, so we aren't going to repeat it all here.</p>

<p>However, it is worth knowing that you can also host a website on GitHub, but use a custom domain with it. See <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Using a custom domain with GitHub Pages</a> for a detailed guide.</p>

<h2 id="Andere_Methoden_um_Dateien_hochzuladen">Andere Methoden um Dateien hochzuladen</h2>

<p>The FTP protocol is one well-known method for publishing a website, but not the only one. Here are a few other possibilities:</p>

<ul>
 <li><strong>Web interfaces</strong>. An HTML interface acting as front-end for a remote file upload service. Provided by your hosting service.</li>
 <li><strong>{{Glossary("WebDAV")}}</strong>. An extension of the {{Glossary("HTTP")}} protocol to allow more advanced file management.</li>
</ul>