Ihre Website veröffentlichen

Welche Optionen gibt es?

Das Veröffentlichen einer Website ist ein komplexes Thema, da es viele Möglichkeiten dafür gibt. Dieser Artikel versucht nicht, alle möglichen Methoden zu dokumentieren. Stattdessen erläutert er die Vor- und Nachteile von drei Ansätzen, die für Anfänger praktisch sind. Anschließend wird eine Methode Schritt für Schritt erläutert, die für viele Leser sofort funktionieren kann.

Hosting und einen Domainnamen erwerben

Um mehr Kontrolle über Inhalte und das Erscheinungsbild der Website zu haben, entscheiden sich die meisten Fachleute und Unternehmen dafür, Webhosting und einen Domainnamen zu kaufen:

• Webhosting ist gemieteter Speicherplatz auf dem Webserver eines Hosting-Unternehmens. Sie legen die Dateien der Website auf dem Webserver ab. Der Webserver stellt Besuchern die Inhalte der Website bereit.
• Ein Domainname ist die eindeutige Webadresse, unter der Personen Ihre Website finden, beispielsweise https://www.mozilla.org oder https://www.bbc.co.uk. Sie können Ihren Domainnamen für beliebig viele Jahre bei einem Domain-Registrar mieten.

Wenn Sie Ihr Webhosting und Ihren Domainnamen vom selben Unternehmen beziehen, werden sie in der Regel automatisch so konfiguriert, dass sie miteinander kommunizieren. Wenn Sie sie jedoch von verschiedenen Unternehmen beziehen oder Ihr Hosting zu einem anderen Unternehmen wechseln möchten, müssen Sie einige Einstellungen vornehmen, damit der Domainname auf den richtigen Server verweist. Dadurch sehen Personen Ihre Website, wenn sie zu dieser Webadresse navigieren. Dies geschieht in der Regel, indem Sie sich auf der Website Ihres Domain-Registrars anmelden und die Nameserver Ihrer Domain auf diejenigen einstellen, die von Ihrem Hosting-Unternehmen bereitgestellt werden.

Unternehmen verwenden verschiedene Mechanismen, um Dateien auf ihre Webserver zu übertragen. Viele bieten mehr als eine Option an; typische Optionen sind:

• Eine Drag-and-Drop-Oberfläche (ein Beispiel dafür sehen Sie später unter Veröffentlichen über GitHub).
• Ein Programm für das File Transfer Protocol (FTP). FTP-Programme unterscheiden sich stark, aber im Allgemeinen müssen Sie sich mit Angaben verbinden, die Ihr Hosting-Unternehmen bereitstellt (typischerweise Benutzername, Passwort, Hostname). Anschließend zeigt das Programm Ihre lokalen Dateien und die Dateien des Webservers in zwei Fenstern an und bietet Ihnen eine Möglichkeit, Dateien in beide Richtungen zu übertragen.
• Den Quellcode der Website in einem GitHub-Repository (siehe unten) speichern und dem Hosting-Unternehmen Zugriff gewähren, damit es die Quellen abrufen, bei Bedarf erstellen und veröffentlichen kann.
• Einige Unternehmen stellen Befehlszeilenwerkzeuge bereit, mit denen Sie Ihre Dateien übertragen können.

Tipps zum Finden von Hosting und Domains

• MDN bewirbt keine bestimmten kommerziellen Hosting-Unternehmen oder Domain-Registrare. Um Hosting-Unternehmen und Registrare zu finden, suchen Sie einfach nach „Webhosting“ und „Domainnamen“. Alle Registrare bieten eine Funktion, mit der Sie prüfen können, ob der gewünschte Domainname verfügbar ist.
• Ihr Internetanbieter zu Hause oder im Büro bietet möglicherweise begrenztes Hosting für eine kleine Website an. Der verfügbare Funktionsumfang wird begrenzt sein, könnte aber für Ihre ersten Experimente perfekt sein.
• Es sind auch kostenlose Dienste wie Neocities, Google Sites und WordPress verfügbar. Solche Dienste können einen begrenzten Umfang haben, reichen aber für erste Experimente aus.

Ein Online-Werkzeug verwenden

Einige Werkzeuge ermöglichen es Ihnen, Ihre Website online zu veröffentlichen:

• GitHub ist eine Website für „Social Coding“. Sie ermöglicht Ihnen, Code-Repositories zur Speicherung im Versionskontrollsystem Git hochzuladen. Anschließend können Sie an Codeprojekten zusammenarbeiten, und das System ist standardmäßig Open Source, was bedeutet, dass jeder auf der Welt Ihren GitHub-Code finden, verwenden, daraus lernen und ihn verbessern kann. GitHub verfügt über eine sehr nützliche Funktion namens GitHub Pages, mit der Sie Website-Code live im Web bereitstellen können.
• Netlify ist eine Webhosting-Plattform, die Hosting für statische Websites direkt aus Ihrem GitHub-Repository bereitstellt. Außerdem bietet sie eine Reihe zusätzlicher Funktionen, beispielsweise Deployment-Vorschauen, serverlose Funktionen und Formularverarbeitung.
• Fly.io ist eine Plattform, mit der Sie Anwendungen und Datenbanken in der Nähe Ihrer Benutzer bereitstellen können. Dies eignet sich besser, wenn Sie eine Webanwendung haben, die Backend-Dienste benötigt.

Diese Optionen sind im Allgemeinen kostenlos, mit einem begrenzten Funktionsumfang.

Eine webbasierte IDE wie CodePen verwenden

Es gibt eine Reihe von Web-Apps, die eine Website-Entwicklungsumgebung nachbilden und Ihnen ermöglichen, HTML, CSS und JavaScript zu schreiben, die dann gerendert und in einem Ausgabebereich angezeigt werden. Im Allgemeinen sind diese Werkzeuge einfach zu verwenden, hervorragend zum Lernen geeignet, gut zum Teilen von Code (beispielsweise wenn Sie eine Technik mit Kollegen in einem anderen Büro teilen oder sie um Hilfe beim Debugging bitten möchten) und kostenlos (für grundlegende Funktionen). Sie hosten Ihre gerenderte Seite unter einer eindeutigen Webadresse. Die Funktionen sind jedoch begrenzt, und diese Apps bieten häufig keinen Hosting-Speicherplatz für Assets wie Bilder.

Probieren Sie einige dieser Beispiele aus, um herauszufinden, welches für Sie am besten geeignet ist:

• Scrimba ^{MDN-Lernpartner}
• JSFiddle
• JSBin
• CodePen

Veröffentlichen über GitHub

Schauen wir uns nun an, wie Sie Ihre Website über GitHub Pages veröffentlichen.

1. Registrieren Sie sich zunächst bei GitHub und bestätigen Sie Ihre E-Mail-Adresse.

2. Als Nächstes müssen Sie ein Repository erstellen, um Dateien zu speichern. Auf dieser Seite:

   1. Geben Sie im Feld Repository name username.github.io ein, wobei username Ihr Benutzername ist. Unser Freund Bob Smith würde beispielsweise bobsmith.github.io eingeben.
   2. Klicken Sie unten auf der Seite auf die Schaltfläche Create repository.

3. Suchen Sie auf der nächsten Seite den Link uploading an existing file und klicken Sie darauf. Dadurch sollten Sie zur Seite zum Hochladen von Dateien gelangen.

4. Nun sollten Sie Dateien aus Ihrem lokalen Dateisystem per Drag-and-Drop auf die Webseite ziehen können, um sie in das GitHub-Repository hochzuladen. Gehen Sie dazu wie folgt vor:

   1. Öffnen Sie auf Ihrem Computer ein Fenster des Dateiexplorers/Finder.
   2. Stellen Sie sicher, dass Sie sowohl die Fenster des Dateiexplorers als auch des Webbrowsers sehen können — positionieren Sie sie nebeneinander auf Ihrem Bildschirm.
   3. Navigieren Sie im Fenster des Dateiexplorers zum Ordner, der Ihre Beispielwebsite enthält.

      Hinweis: Stellen Sie sicher, dass Ihr Ordner eine Datei index.html enthält.

   4. Wählen Sie alle Dateien Ihrer Beispielwebsite aus, beispielsweise mit dem Tastaturkürzel Ctrl + A oder unter macOS mit Cmd + A.
   5. Ziehen Sie die Dateien aus Ihrem Dateiexplorer auf den Abschnitt „Drag files here to add them to your repository“ auf der GitHub-Seite.
   6. Der Rahmen und der Text des Abschnitts ändern sich, um anzuzeigen, dass ein Ablegen möglich ist. Legen Sie die Dateien nun ab.
   7. Klicken Sie unten auf der Seite auf die Schaltfläche Commit changes.

5. Navigieren Sie in Ihrem Browser zu username.github.io, um Ihre Website online zu sehen. Für den Benutzernamen chrisdavidmills navigieren Sie beispielsweise zu chrisdavidmills.github.io.

   Hinweis: Es kann einige Minuten dauern, bis Ihre Website online verfügbar ist. Falls Ihre Website nicht sofort angezeigt wird, warten Sie einige Minuten und versuchen Sie es erneut.

Weitere Informationen finden Sie in der GitHub-Pages-Hilfe.

Weiterführende Literatur

• Was ist ein Webserver?
• Domainnamen verstehen
• Wie viel kostet es, etwas im Web zu tun?
• Eine Website bereitstellen: Ein gutes Tutorial von Codecademy, das etwas weiter geht und einige zusätzliche Techniken zeigt.

• Zurück
• Übersicht: Ihre erste Website
• Weiter