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 andere es finden können. Dieser Artikel erklärt, wie Sie Ihre Beispielwebsite mit geringem Aufwand online schalten können.
Hinweis:
Sie benötigen eine Beispielwebsite 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 Computerbetriebssystem, die grundlegende Software, die Sie zum Erstellen einer Website verwenden werden, und Dateisysteme. |
---|---|
Lernziele: |
|
Welche Optionen gibt es?
Die Veröffentlichung einer Website ist ein komplexes Thema, weil 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 praktikabel sind. Anschließend wird eine Methode beschrieben, die für viele Leser sofort funktionieren kann.
Hosting und einen Domainnamen bekommen
Um mehr Kontrolle über Inhalt und Erscheinungsbild der Website zu haben, entscheiden sich die meisten Profis/Unternehmen dafür, Webhosting und einen Domainnamen zu kaufen:
- Webhosting ist gemieteter Speicherplatz auf dem Webserver eines Hosting-Unternehmens. Sie laden die Website-Dateien auf den Webserver. Der Webserver stellt den Website-Besuchern die Website-Inhalte bereit.
- Ein Domainname ist die eindeutige Webadresse, unter der Menschen Ihre Website finden, wie zum Beispiel
https://www.mozilla.org
oderhttps://www.bbc.co.uk
. Sie können Ihren Domainnamen für so viele Jahre mieten, wie Sie wollen, von einem Domainregistrar.
Wenn Sie Ihr Webhosting und Ihren Domainnamen von derselben Firma beziehen, werden sie in der Regel automatisch so konfiguriert, dass sie miteinander kommunizieren. Sollte dies jedoch von verschiedenen Firmen stammen oder wenn Sie Ihr Hosting zu einer anderen Firma wechseln möchten, müssen Sie ein wenig einrichten, um den Domainnamen auf den richtigen Server zu verweisen. Dies geschieht normalerweise, indem Sie sich auf der Website Ihres Domainregistrars anmelden und die Nameserver auf die von Ihrem Hosting-Anbieter bereitgestellten ändern.
Unternehmen nutzen verschiedene Mechanismen, um Dateien auf ihre Webserver zu übertragen. Viele bieten mehrere Optionen an; typische Optionen umfassen:
- Eine Drag-and-Drop-Oberfläche (ein Beispiel sehen Sie später beim Veröffentlichen ü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-Anbieter bereitgestellten Details (normalerweise 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 herzuschieben.
- Den Quellcode der Website in einem GitHub-Repository aufzubewahren (siehe unten) und dem Hosting-Anbieter Zugriff zu gewähren, damit dieser den Quellcode abrufen, bei Bedarf bauen und veröffentlichen kann.
- Einige Unternehmen stellen Kommandozeilen-Tools bereit, die Sie verwenden können, um Ihre Dateien zu übertragen.
Tipps zur Suche nach Hosting und Domains
- MDN bewirbt keine spezifischen kommerziellen Hosting-Unternehmen oder Domainregistrare. Um Hosting-Unternehmen und Registrare zu finden, suchen Sie einfach nach „Webhosting“ und „Domainnamen“. Alle Registrare werden eine Funktion haben, die Ihnen erlaubt zu überprüfen, ob der gewünschte Domainname verfügbar ist.
- Ihr Internetdienstanbieter zu Hause oder im Büro könnte eine begrenzte Hosting-Option für eine kleine Website bieten. Die verfügbaren Funktionen werden 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 im Umfang begrenzt sein, sind aber für erste Experimente gut geeignet.
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 Coding“-Plattform. Sie ermöglicht es Ihnen, Code-Repositories zur 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, davon lernen und verbessern kann. GitHub hat eine sehr nützliche Funktion namens GitHub Pages, die es Ihnen ermöglicht, Website-Code live im Internet zugänglich zu machen.
- Google App Engine ist eine leistungsstarke Plattform, die es Ihnen ermöglicht, Anwendungen in Googles Infrastruktur 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 in der Regel kostenlos, mit einem begrenzten Funktionsumfang.
Verwendung einer webbasierten IDE wie CodePen
Es gibt eine Reihe von Webanwendungen, die eine Website-Entwicklungsumgebung emulieren und es Ihnen erlauben, HTML, CSS und JavaScript zu schreiben, die dann gerendert und in einem Ausgabebereich angezeigt werden. Diese Tools sind im Allgemeinen einfach zu bedienen, großartig zum Lernen, gut zum Teilen von Code (zum Beispiel, wenn Sie eine Technik mit Kollegen in einem anderen Büro teilen oder Debugging-Hilfe anfordern möchten) und kostenlos (für Grundfunktionen). Sie hosten Ihre gerenderte Seite unter einer einzigartigen Webadresse. Allerdings sind die Funktionen begrenzt, und diese Apps bieten oft keinen Hosting-Speicherplatz für Assets (wie Bilder).
Versuchen Sie, mit einigen dieser Beispiele zu experimentieren, um herauszufinden, welches am besten für Sie funktioniert:
Veröffentlichung über GitHub
Untersuchen wir nun, wie Sie Ihre Website über GitHub Pages veröffentlichen können.
-
Melden Sie sich zunächst bei GitHub an und bestätigen 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 benutzername.github.io ein, wobei benutzername Ihr Benutzername ist. Unser Freund Bob Smith würde zum Beispiel bobsmith.github.io eingeben.
- Klicken Sie auf die Schaltfläche Create repository am unteren Rand der Seite.
-
Finden Sie auf der nächsten Seite den Link uploading an existing file und klicken Sie darauf. Dies sollte Sie zur Dateiupload-Seite bringen.
-
An diesem Punkt sollten Sie in der Lage sein, Dateien von Ihrem lokalen Dateisystem auf die Webseite zu ziehen und abzulegen, um sie im 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 — platzieren Sie sie nebeneinander auf Ihrem Bildschirm.
- Navigieren Sie das Datei-Explorer-Fenster zum Ordner, der Ihre Beispielwebsite enthält.
Hinweis: Stellen Sie sicher, dass Ihr Ordner eine
index.html
-Datei enthält. - Wählen Sie alle Dateien Ihrer Beispielwebsite aus (zum Beispiel mit dem Tastenkürzel Ctrl + A, oder Cmd + A auf macOS).
- Ziehen Sie die Dateien von Ihrem Datei-Explorer über den Bereich „Drag files here to add them to your repository“ auf 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 dieser Stelle fallen.
- Klicken Sie auf die Schaltfläche Commit changes am unteren Rand der Seite.
-
Navigieren Sie Ihren Browser zu benutzername.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 geschaltet wird. Wenn Ihre Website nicht sofort angezeigt wird, warten Sie einige Minuten und versuchen Sie es erneut.
Um mehr zu erfahren, sehen Sie sich die GitHub Pages Hilfe an.
Weiterführende Lektüre
- Was ist ein Webserver
- Domainnamen verstehen
- Wie viel kostet es, etwas im Internet zu machen?
- Deploy a Website: Ein toller Leitfaden von Codecademy, der ein wenig weiter geht und einige zusätzliche Techniken zeigt.