Veröffentlichung Ihrer Website

Was sind die Optionen?

Die Veröffentlichung einer Website ist ein komplexes Thema, da es viele Wege gibt, dies zu tun. Dieser Artikel versucht nicht, alle möglichen Methoden zu dokumentieren. Stattdessen erklärt er die Vor- und Nachteile von drei Ansätzen, die für Einsteiger praktisch sind. Dann geht er einen Ansatz durch, der sofort für viele Leser funktionieren kann.

Hosting und einen Domainnamen erwerben

Um mehr Kontrolle über den Inhalt und das Erscheinungsbild der Website zu haben, wählen die meisten Fachleute/Unternehmen den Kauf von Webhosting und einem Domainnamen:

• Webhosting ist gemieteter Speicherplatz auf dem Webserver eines Hosting-Unternehmens. Sie legen die Website-Dateien auf den Webserver. Der Webserver stellt den Website-Besuchern die Inhalte der Website bereit.
• Ein Domainname ist die eindeutige Webadresse, unter der man Ihre Website finden kann, wie https://www.mozilla.org oder https://www.bbc.co.uk. Sie können Ihren Domainnamen so viele Jahre mieten, wie Sie möchten, von einem Domain-Registrar.

Wenn Sie Ihr Webhosting und Ihren Domainnamen vom selben Unternehmen beziehen, sind sie in der Regel automatisch so konfiguriert, dass sie miteinander funktionieren. Wenn Sie sie jedoch von unterschiedlichen Unternehmen beziehen oder Ihr Hosting zu einem anderen Unternehmen wechseln möchten, müssen Sie einen kleinen Setup-Aufwand betreiben, um den Domainnamen auf den richtigen Server zu verweisen. Dies geschieht in der Regel, indem Sie sich auf der Website Ihres Domain-Registrars anmelden und die Nameserver Ihrer Domain auf die von Ihrem Hosting-Anbieter bereitgestellten einstellen.

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 hierzu sehen Sie weiter unten im Abschnitt Veröffentlichung über GitHub).
• Ein File Transfer Protocol (FTP)-Programm. FTP-Programme variieren stark, aber generell müssen Sie sich mit den von Ihrem Hosting-Unternehmen bereitgestellten Daten (typischerweise Benutzername, Passwort, Hostname) mit Ihrem Webserver verbinden. Dann zeigt das Programm Ihnen Ihre lokalen Dateien und die Dateien des Webservers in zwei Fenstern an und bietet eine Möglichkeit, Dateien hin und her zu übertragen.
• Das Halten des Quellcodes der Website in einem GitHub-Repository (siehe unten) und die Erteilung des Zugriffs an das Hosting-Unternehmen, damit es den Quellcode abrufen, bei Bedarf erstellen und veröffentlichen kann.
• Einige Unternehmen stellen Befehlszeilenwerkzeuge zur Verfügung, mit denen Sie Ihre Dateien übertragen können.

Tipps zur Auswahl 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 haben eine Funktion, mit der Sie überprüfen können, ob der gewünschte Domainname verfügbar ist.
• Ihr Internetdienstanbieter zu Hause oder im Büro bietet möglicherweise ein begrenztes Hosting für eine kleine Website an. Der verfügbare Funktionsumfang wird begrenzt sein, aber es könnte perfekt für Ihre ersten Experimente sein.
• Es gibt auch kostenlose Dienste wie Neocities, Google Sites und WordPress. Solche Dienste können in ihrem Umfang beschränkt sein, aber sie sind gut genug für erste Experimente.

Verwendung eines Online-Tools wie GitHub oder Google App Engine

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

• GitHub ist eine "soziale Programmierungs"-Seite. Sie ermöglicht es Ihnen, Code-Repositories im Git Versionskontrollsystem zu speichern. Sie können dann 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 hat eine sehr nützliche Funktion namens GitHub Pages, mit der Sie Website-Code live im Web anzeigen können.
• Google App Engine ist eine leistungsstarke Plattform, die Ihnen ermöglicht, Anwendungen auf der Infrastruktur von Google zu erstellen und auszuführen — egal, ob Sie eine mehrstufige Webanwendung von Grund auf neu erstellen oder eine statische Website hosten möchten. Weitere Informationen finden Sie unter Wie hostet man seine Website auf Google App Engine?.

Diese Optionen sind im Allgemeinen kostenlos und bieten einen begrenzten Funktionsumfang.

Verwendung einer webbasierten IDE wie CodePen

Es gibt eine Reihe von Web-Apps, die eine Website-Entwicklungsumgebung emulieren und es Ihnen ermöglichen, HTML, CSS und JavaScript zu schreiben, das dann gerendert und in einem Ausgabefenster angezeigt wird. Im Allgemeinen sind diese Tools einfach zu bedienen, ideal zum Lernen, gut zum Teilen von Code (zum Beispiel, wenn Sie eine Technik teilen oder Debug-Hilfe von Kollegen in einem anderen Büro anfordern möchten), und kostenlos (für grundlegende Funktionen). Sie hosten Ihre gerenderte Seite unter einer eindeutigen Webadresse. Allerdings sind die Funktionen begrenzt, und diese Apps bieten oft keinen Hosting-Platz für Assets (wie Bilder).

Versuchen Sie, mit einigen dieser Beispiele zu spielen, um herauszufinden, welches am besten für Sie funktioniert:

• Scrimba ^{MDN-Partner für Lernen}
• JSFiddle
• JSBin
• CodePen

Veröffentlichung über GitHub

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

1. Zuerst melden Sie sich bei GitHub an und bestätigen 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. Zum Beispiel würde unser Freund Bob Smith bobsmith.github.io eingeben.
   2. Klicken Sie auf die Schaltfläche Create repository am unteren Rand der Seite.

3. Auf der nächsten Seite finden Sie den Link uploading an existing file und klicken darauf. Dies sollte Sie zur Datei-Upload-Seite bringen.

4. An diesem Punkt sollten Sie in der Lage sein, Dateien von Ihrem lokalen Dateisystem per Drag-and-Drop auf die Webseite hochzuladen. Dazu:

   1. Öffnen Sie ein Datei-Explorer/Finder-Fenster auf Ihrem Computer.
   2. Stellen Sie sicher, dass Sie das Datei-Explorer- und das Webbrowserfenster sehen können — positionieren Sie sie nebeneinander auf Ihrem Bildschirm.
   3. Navigieren Sie im Datei-Explorer-Fenster zu dem Ordner, der Ihre Beispiel-Website enthält.

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

   4. Wählen Sie alle Dateien Ihrer Beispiel-Website aus (zum Beispiel mit der Tastenkombination Strg + A, oder Cmd + A auf macOS).
   5. Ziehen Sie die Dateien aus Ihrem Datei-Explorer über den Abschnitt "Drag files here to add them to your repository" der GitHub-Seite.
   6. Der Rand und der Text des Abschnitts ändern sich, um anzuzeigen, dass ein Abwurf möglich ist. Lassen Sie die Dateien an dieser Stelle fallen.
   7. Klicken Sie auf die Schaltfläche Commit changes am unteren Rand der Seite.

5. Navigieren Sie Ihren Browser zu username.github.io, um Ihre Website online zu sehen. Beispielsweise würde bei dem Benutzernamen chrisdavidmills auf chrisdavidmills.github.io navigiert.

   Hinweis: Es kann ein paar Minuten dauern, bis Ihre Website live geht. Wenn Ihre Website nicht sofort angezeigt wird, warten Sie ein paar Minuten und versuchen Sie es erneut.

Um mehr zu erfahren, siehe GitHub Pages Hilfe.

Weiterführende Lektüre

• Was ist ein Webserver
• Verständnis von Domainnamen
• Wie viel kostet es, etwas im Web zu tun?
• Deploy a Website: Ein schönes Tutorial von Codecademy, das ein bisschen weiter geht und einige zusätzliche Techniken zeigt.

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