Veröffentlichung Ihrer Website

Sobald Sie den Code geschrieben und die Dateien organisiert haben, die Ihre Website ausmachen, müssen Sie alles online stellen, damit die Leute sie finden können. Dieser Artikel erklärt, wie Sie Ihre Beispielseite mit wenig Aufwand online stellen können.

Voraussetzungen: Grundlegende Vertrautheit mit Ihrem Computer-Betriebssystem, der Basissoftware, die Sie zum Erstellen einer Website verwenden, und Dateisystemen.
Lernziele:
  • Die grundlegenden Werkzeuge und Konzepte beim Veröffentlichen einer Website — Hosting, Domains, FTP-Programme.
  • Welche alternativen Hosting-Optionen verfügbar sind, zum Beispiel Google App Engine, GitHub, und CodePen.
  • Veröffentlichung einer Website mit GitHub Pages.
  • Hosting, wie man es erwirbt und wie man eine Website online stellt.
  • TLDs und wie man eine Domain registriert.

Welche Optionen gibt es?

Die Veröffentlichung einer Website ist ein komplexes Thema, da es viele Wege gibt, sie anzugehen. Dieser Artikel versucht nicht, alle möglichen Methoden zu dokumentieren. Stattdessen werden die Vor- und Nachteile von drei Ansätzen erläutert, die für Anfänger praktisch sind. Anschließend wird ein Verfahren beschrieben, das sofort für viele Leser funktionieren kann.

Hosting und einen Domainnamen erhalten

Um mehr Kontrolle über Inhalt und Erscheinungsbild der Website zu haben, wählen die meisten Menschen, Webhosting und einen Domainnamen zu kaufen:

  • Webhosting ist gemieteter Speicherplatz auf dem Webserver eines Hosting-Unternehmens. Sie laden die Website-Dateien auf den Webserver hoch. Der Webserver stellt den Website-Besuchern die Inhalte zur Verfügung.
  • Ein Domainname ist die einzigartige Adresse, unter der Menschen Ihre Website finden, wie z.B. https://www.mozilla.org oder https://www.bbc.co.uk. Sie können Ihren Domainnamen von einem Domainregistrar für so viele Jahre mieten, wie Sie möchten.

Viele professionelle Websites gehen auf diese Weise online.

Zusätzlich benötigen Sie ein File Transfer Protocol (FTP)-Programm (siehe Wie viel kostet: Software für weitere Details), um die Website-Dateien tatsächlich auf den Server zu übertragen. FTP-Programme variieren stark, aber im Allgemeinen müssen Sie sich mit den von Ihrem Hosting-Unternehmen bereitgestellten Details (normalerweise Benutzername, Passwort, Hostname) mit Ihrem Webserver verbinden. Dann zeigt Ihnen das Programm Ihre lokalen Dateien und die Dateien des Webservers in zwei Fenstern und bietet eine Möglichkeit, Dateien hin und her zu transferieren.

Ein FTP-Client, der alle Dateien und Ordner einer Website zeigt und diese auf einen Server hochlädt

Tipps zur Suche nach Hosting und Domains

  • MDN fördert keine speziellen kommerziellen Hosting-Unternehmen oder Domainregistrare. Um Hosting-Unternehmen und Registrare zu finden, suchen Sie einfach nach "Webhosting" und "Domainnamen". Alle Registrare werden über eine Funktion verfügen, mit der Sie überprüfen können, ob der gewünschte Domainname verfügbar ist.
  • Ihr privater oder geschäftlicher Internetdienstanbieter bietet möglicherweise begrenztes Hosting für eine kleine Website an. Das verfügbare Funktionsset wird begrenzt sein, aber es könnte perfekt für Ihre ersten Experimente sein.
  • Es gibt auch kostenlose Dienste wie Neocities, Google Sites, Blogger und WordPress. Manchmal bekommt man, wofür man bezahlt, aber manchmal sind diese Ressourcen gut genug für Ihre ersten Experimente.
  • Viele Unternehmen bieten Hosting und Domains an.

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 Codierungs"-Seite. Sie ermöglicht es Ihnen, Code-Repositories für die Speicherung im Versionskontrollsystem Git hochzuladen. Sie können dann an Codeprojekten zusammenarbeiten und das System ist standardmäßig Open Source, was bedeutet, dass jeder in der Welt Ihren GitHub-Code finden, nutzen, davon lernen und verbessern kann. GitHub verfügt über 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 es Ihnen ermöglicht, Anwendungen auf der Infrastruktur von Google zu erstellen und auszuführen — sei es, um eine mehrstufige Webanwendung von Grund auf neu zu erstellen oder eine statische Website zu hosten. Weitere Informationen finden Sie unter Wie hosten Sie Ihre Website auf Google App Engine?.

Diese Optionen sind normalerweise kostenlos, aber Sie könnten das begrenzte Funktionsset überschreiten.

Verwendung eines webbasierten IDE wie CodePen

Es gibt eine Reihe von Web-Apps, die eine Website-Entwicklungsumgebung emulieren und es ermöglichen, HTML, CSS und JavaScript einzugeben und das Ergebnis dieses Codes als Website anzuzeigen — alles in einem Browser-Tab. Im Allgemeinen sind diese Tools relativ einfach, großartig zum Lernen, gut zum Teilen von Code (zum Beispiel, wenn Sie eine Technik teilen oder Hilfe beim Debuggen von Kollegen in einem anderen Büro fragen wollen) und kostenlos (für grundlegende Funktionen). Sie hosten Ihre gerenderte Seite unter einer eindeutigen Webadresse. Allerdings sind die Funktionen begrenzt und diese Apps bieten normalerweise keinen Hosting-Speicherplatz für Assets (wie Bilder).

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

Screenshot der webbasierten IDE JS Bin

Veröffentlichung über GitHub

Werfen wir nun einen Blick darauf, wie Sie Ihre Website einfach über GitHub Pages veröffentlichen können.

  1. Melden Sie sich zunächst bei GitHub an und verifizieren Sie Ihre E-Mail-Adresse.

  2. Als nächstes müssen Sie ein Repository erstellen, um Dateien zu speichern.

  3. Geben Sie auf dieser Seite im Feld Repository name den Namen username.github.io ein, wobei username ihr Benutzername ist. Zum Beispiel würde unser Freund Bob Smith bobsmith.github.io eingeben. Markieren Sie das Feld "Initialize this repository with a README". Klicken Sie dann auf Create repository. Ein Beispiel einer GitHub-Repository-Seite

  4. Ziehen Sie den Inhalt Ihres Website-Ordners in Ihr Repository und klicken Sie dann auf Commit changes.

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

  5. Navigieren Sie Ihren Browser zu username.github.io, um Ihre Website online zu sehen. Für den Benutzernamen chrisdavidmills gehen Sie zu chrisdavidmills.github.io.

    Hinweis: Es kann einige Minuten dauern, bis Ihre Website online ist. Wenn Ihre Website nicht sofort angezeigt wird, warten Sie ein paar Minuten. Versuchen Sie es erneut.

Um mehr zu erfahren, besuchen Sie GitHub Pages Hilfe.

Weiterführende Literatur