Veröffentlichen Ihrer Website
Sobald Sie den Code geschrieben und die Dateien, die Ihre Website ausmachen, organisiert haben, müssen Sie alles online stellen, damit es gefunden werden kann. Dieser Artikel erklärt, wie Sie Ihre Beispiel-Website mit wenig Aufwand online stellen können.
Hinweis:
Sie benötigen eine Beispiel-Website auf Ihrem lokalen Computer, um 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 durcharbeiten, beginnend mit Wie wird Ihre Website aussehen?.
Voraussetzungen: | Grundkenntnisse über Ihr Betriebssystem, die grundlegende Software, die Sie zum Erstellen einer Website verwenden, und Dateisysteme. |
---|---|
Lernziele: |
|
Was sind die Optionen?
Das Veröffentlichen 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 vorgestellt, die für viele Leser sofort funktionieren kann.
Hosting und einen Domainnamen erhalten
Um mehr Kontrolle über den Inhalt und das Erscheinungsbild Ihrer Website zu haben, wählen die meisten Profis/Geschäftsleute den Kauf von Webhosting und einem Domainnamen:
- Webhosting ist gemieteter Speicherplatz auf einem Webserver eines Hosting-Unternehmens. Sie platzieren Website-Dateien auf dem Webserver. Der Webserver stellt den Website-Inhalt den Besuchern zur Verfügung.
- Ein Domainname ist die eindeutige Adresse, unter der Ihre Website gefunden wird, wie
https://www.mozilla.org
oderhttps://www.bbc.co.uk
. Sie können Ihren Domainnamen bei einem Domain-Registrar für beliebig viele Jahre mieten.
Wenn Sie Ihr Webhosting und den Domainnamen vom selben Unternehmen beziehen, werden sie in der Regel automatisch so konfiguriert, dass sie miteinander kommunizieren. Wenn Sie sie jedoch von unterschiedlichen Unternehmen beziehen oder Ihr Hosting zu einem anderen Unternehmen ändern möchten, müssen Sie einige Konfigurationen durchführen, um den Domainnamen auf den richtigen Server zu verweisen. Dies erfolgt in der Regel, indem Sie sich bei der Website Ihres Domain-Registrars anmelden und die Nameserver Ihrer Domain auf die vom Hosting-Unternehmen bereitgestellten einstellen.
Unternehmen verwenden verschiedene Mechanismen, um Dateien auf ihre Webserver zu übertragen. Viele haben mehr als eine Option; typische Optionen sind:
- Eine Drag-and-Drop-Oberfläche (ein Beispiel hierfür sehen Sie später im Abschnitt Veröffentlichen über GitHub).
- Ein File Transfer Protocol (FTP)-Programm. FTP-Programme variieren stark, aber im Allgemeinen müssen Sie sich mit den von Ihrem Hosting-Unternehmen bereitgestellten Details (in der Regel 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 Gewähren des Zugangs für das Hosting-Unternehmen, damit es den Quellcode abrufen, (falls nötig) bauen und veröffentlichen kann.
- Einige Unternehmen bieten Befehlszeilentools an, um Ihre Dateien zu übertragen.
Tipps zur Suche nach Hosting und Domains
- MDN fördert keine spezifischen kommerziellen Hosting-Unternehmen oder Domain-Registrar. 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 Heim- oder Büro-Internet Service Provider kann einige eingeschränkte Hosting-Möglichkeiten für eine kleine Website bieten. 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 ihrer Reichweite eingeschränkt sein, sind aber 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 Programmier"-Site. Sie ermöglicht es Ihnen, Code-Repositories zur Speicherung im Git Versionskontrollsystem hochzuladen. Sie können dann an Codeprojekten zusammenarbeiten, und das System ist standardmäßig open-source, das heißt, jeder auf der Welt kann Ihren GitHub-Code finden, verwenden, daraus lernen und ihn verbessern. GitHub hat eine sehr nützliche Funktion namens GitHub Pages, die es Ihnen ermöglicht, den Website-Code live im Web zu veröffentlichen.
- 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, dass Sie eine mehrschichtige Webanwendung von Grund auf neu erstellen oder eine statische Website hosten. Weitere Informationen finden Sie unter Wie hostet man seine Website mit Google App Engine?.
Diese Optionen sind in der Regel kostenlos, mit einem 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, die dann gerendert und in einem Ausgabepaneel angezeigt werden. Diese Tools sind in der Regel leicht zu benutzen, großartig zum Lernen, gut zum Teilen von Code (zum Beispiel, wenn Sie eine Technik teilen oder Hilfe bei der Fehlersuche von Kollegen in einem anderen Büro erfragen möchten) und kostenlos (für grundlegende Funktionen). Sie hosten Ihre gerenderte Seite an einer eindeutigen Webadresse. Die Funktionen sind jedoch begrenzt, und diese Apps bieten oft keinen Hostingraum für Assets (wie Bilder).
Probieren Sie einige dieser Beispiele aus, um herauszufinden, welches für Sie am besten funktioniert:
Veröffentlichen über GitHub
Schauen wir uns nun an, wie Sie Ihre Seite über GitHub Pages veröffentlichen können.
-
Melden Sie sich zunächst bei GitHub an und verifizieren Sie 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 den Namen username.github.io ein, wobei username Ihr Benutzername ist. Zum Beispiel würde unser Freund Bob Smith bobsmith.github.io eingeben.
- Klicken Sie auf die Schaltfläche 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.
-
An diesem Punkt sollten Sie in der Lage sein, Dateien aus Ihrem lokalen Dateisystem in das Webpage-Fenster zu ziehen und dort abzulegen, um sie in das GitHub-Repository hochzuladen. Gehen Sie dazu wie folgt vor:
- Öffnen Sie ein Datei-Explorer/Finder-Fenster auf Ihrem Computer.
- Stellen Sie sicher, dass Sie das Datei-Explorer- und das Webbrowser-Fenster sehen können – positionieren Sie sie nebeneinander auf Ihrem Bildschirm.
- 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. - 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 aus Ihrem Dateiexplorer über den Bereich "Drag files here to add them to your repository" der GitHub-Seite.
- Der Rahmen und der Text des Bereichs ändern sich, um anzuzeigen, dass ein Ablegen möglich ist. Lassen Sie die Dateien an diesem Punkt fallen.
- Klicken Sie auf die Schaltfläche 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 online ist. Wenn Ihre Website nicht sofort angezeigt wird, warten Sie einige Minuten und versuchen Sie es erneut.
Um mehr zu erfahren, sehen Sie sich GitHub Pages Hilfe an.
Weiterführende Literatur
- 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 etwas weiter geht und einige zusätzliche Techniken zeigt.