Veröffentlichung Ihrer Website
Sobald Sie den Code geschrieben und die Dateien organisiert haben, aus denen Ihre Website besteht, müssen Sie alles online stellen, damit die Menschen sie finden können. Dieser Artikel erklärt, wie Sie Ihre Beispiel-Website mit geringem Aufwand online stellen können.
Hinweis:
Sie benötigen eine Beispiel-Website, die auf Ihrem lokalen Computer verfügbar ist, um den Anweisungen in diesem Artikel folgen zu können. Sie sollte mindestens eine gültige index.html
-Datei enthalten. Falls Sie dies noch nicht getan haben, empfehlen wir Ihnen, eine zu erstellen, indem Sie die vorherigen Artikel in diesem Modul durchgehen, beginnend mit Wie wird Ihre Website aussehen?.
Voraussetzungen: | Grundlegende Vertrautheit mit dem Betriebssystem Ihres Computers, der grundlegenden Software, die Sie zum Erstellen einer Website verwenden werden, und Dateisystemen. |
---|---|
Lernziele: |
|
Was sind die Optionen?
Die Veröffentlichung einer Website ist ein komplexes Thema, da es viele Möglichkeiten 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 Anfänger praktisch sind. Anschließend wird eine Methode durchgegangen, die für viele Leser sofort funktionieren kann.
Hosting und Domainnamen erwerben
Um mehr Kontrolle über Inhalte und das Erscheinungsbild der Website zu haben, wählen die meisten Fachleute/Unternehmen den Kauf von Webhosting und einem Domainnamen:
- Webhosting ist angemieteter Speicherplatz auf einem Webserver eines Hosting-Unternehmens. Sie platzieren die Website-Dateien auf dem Webserver. Der Webserver stellt den Website-Inhalt den Besuchern der Website zur Verfügung.
- Ein Domainname ist die eindeutige Webadresse, unter der Menschen Ihre Website finden, wie z.B.
https://www.mozilla.org
oderhttps://www.bbc.co.uk
. Sie können Ihren Domainnamen für so viele Jahre mieten, wie Sie möchten, von einem Domain-Registrar.
Wenn Sie Ihr Webhosting und Ihren Domainnamen von demselben Unternehmen erhalten, sind sie in der Regel automatisch so konfiguriert, dass sie miteinander kommunizieren. Wenn Sie sie jedoch von verschiedenen Unternehmen erhalten oder Ihr Hosting zu einem anderen Unternehmen ändern möchten, müssen Sie einige Einstellungen vornehmen, um den Domainnamen auf den richtigen Server zu verweisen. Dies geschieht in der Regel durch Einloggen auf der Website Ihres Domain-Registrars und das Festlegen der Nameserver Ihrer Domain auf die von Ihrem Hosting-Unternehmen bereitgestellten.
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 hierfür sehen Sie später im Abschnitt Veröffentlichung über GitHub).
- Ein File Transfer Protocol (FTP)-Programm. FTP-Programme unterscheiden sich stark, aber im Allgemeinen müssen Sie sich mit den von Ihrem Hosting-Unternehmen bereitgestellten Angaben mit Ihrem Webserver verbinden (typischerweise Benutzername, Passwort, Hostname). 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 Behalten des Website-Quellcodes in einem GitHub-Repository (siehe unten) und das Gewähren von Zugriff für das Hosting-Unternehmen, damit es den Quellcode abrufen, bei Bedarf bauen und veröffentlichen kann.
- Einige Unternehmen stellen Kommandozeilenwerkzeuge zur Verfügung, die Sie zum Übertragen Ihrer Dateien verwenden können.
Tipps zur Suche nach Hosting und Domains
- MDN fördert keine spezifischen kommerziellen Hosting-Unternehmen oder Domainnamen-Registrar. Um Hosting-Unternehmen und Registrar zu finden, suchen Sie einfach nach "Webhosting" und "Domainnamen". Alle Registrar bieten eine Funktion an, um zu überprüfen, ob der gewünschte Domainname verfügbar ist.
- Ihr Heim- oder Büro-Internetdienstanbieter bietet möglicherweise eingeschränktes Hosting für eine kleine Website. Das verfügbare Funktionsset ist begrenzt, könnte aber 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 begrenzt sein, sind aber ausreichend 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 "soziales Codieren"-Plattform. Sie ermöglicht es Ihnen, Code-Repositories für die Speicherung im Git-Versionskontrollsystem hochzuladen. Sie können dann an Code-Projekten 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 bietet eine sehr nützliche Funktion namens GitHub Pages, die es Ihnen ermöglicht, Website-Code live im Web zu zeigen.
- Google App Engine ist eine leistungsstarke Plattform, die es Ihnen ermöglicht, Anwendungen auf der Infrastruktur von Google zu erstellen und zu betreiben – egal, ob Sie eine mehrschichtige Webanwendung von Grund auf neu erstellen oder eine statische Website hosten müssen. Siehe Wie hostet man seine Website auf Google App Engine? für weitere Informationen.
Diese Optionen sind in der Regel kostenlos, mit einem begrenzten Funktionsumfang.
Verwendung einer webbasierten IDE wie CodePen
Es gibt eine Vielzahl von Web-Apps, die eine Website-Entwicklungsumgebung emulieren und es Ihnen ermöglichen, HTML, CSS und JavaScript zu schreiben, die dann gerendert und in einem Ausgabefenster angezeigt werden. Im Allgemeinen sind diese Tools einfach zu bedienen, 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 anfragen möchten) und kostenlos (für grundlegende Funktionen). Sie hosten Ihre gerenderte Seite unter einer einzigartigen Webadresse. Allerdings sind die Funktionen begrenzt, und diese Apps bieten oft keinen Hosting-Bereich für Assets (wie Bilder).
Probieren Sie einige dieser Beispiele aus, um herauszufinden, welches am besten für Sie funktioniert:
Veröffentlichung über GitHub
Schauen wir uns nun an, wie Sie Ihre Website über GitHub Pages veröffentlichen.
-
Zuerst melden Sie sich bei GitHub an und verifizieren Ihre E-Mail-Adresse.
-
Als Nächstes müssen Sie ein Repository erstellen, um Dateien zu speichern. Auf dieser Seite:
- 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.
- Klicken Sie auf den Button Create Repository am unteren Rand der Seite.
-
Auf der nächsten Seite finden Sie den Link uploading an existing file und klicken darauf. Dies sollte Sie zur Datei-Upload-Seite bringen.
-
Zu diesem Zeitpunkt sollten Sie in der Lage sein, Dateien von Ihrem lokalen Dateisystem auf die Webseite zu ziehen und abzulegen, um sie in das GitHub-Repository hochzuladen. Um dies zu tun:
- Öffnen Sie ein Datei-Explorer-/Finder-Fenster auf Ihrem Computer.
- Stellen Sie sicher, dass Sie sowohl das Datei-Explorer- als auch das Webbrowser-Fenster sehen können — positionieren Sie sie nebeneinander auf Ihrem Bildschirm.
- Navigieren Sie im Datei-Explorer-Fenster zum Ordner, der Ihre Beispiel-Website enthält.
Hinweis: Stellen Sie sicher, dass Ihr Ordner eine
index.html
-Datei enthält. - Wählen Sie alle Dateien Ihrer Beispiel-Website aus (zum Beispiel mit der Tastenkombination Strg + A oder Cmd + A auf macOS).
- Ziehen Sie die Dateien von Ihrem Datei-Explorer über den Abschnitt "Drag files here to add them to your repository" auf der GitHub-Seite.
- Der Rahmen des Abschnitts und der Text ändern sich, um anzuzeigen, dass ein Ablegen möglich ist. Lassen Sie die Dateien an diesem Punkt los.
- Klicken Sie auf den Button Commit changes am unteren Rand der Seite.
-
Navigieren Sie mit Ihrem Browser zu username.github.io, um Ihre Website online zu sehen. Zum Beispiel, für den Benutzernamen chrisdavidmills, gehen Sie zu chrisdavidmills.github.io.
Hinweis: Es kann einige 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 Literatur
- Was ist ein Webserver
- Verstehen von Domainnamen
- Wie viel kostet es, etwas im Web zu tun?
- Eine Website bereitstellen: Ein schönes Tutorial von Codecademy, das weiter geht und einige zusätzliche Techniken zeigt.