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 andere darauf zugreifen können. 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 vorhergehenden Artikel in diesem Modul durcharbeiten, beginnend mit Wie wird Ihre Website aussehen?.
Voraussetzungen: | Grundlegende Vertrautheit mit Ihrem Computer-Betriebssystem, der grundlegenden Software, die Sie zum Erstellen einer Website verwenden werden, und Dateisystemen. |
---|---|
Lernziele: |
|
Welche Optionen gibt es?
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 praktikabel sind. Anschließend wird eine Methode durchgegangen, die sofort für viele Leser funktionieren kann.
Hosting und einen Domainnamen erhalten
Um mehr Kontrolle über den Inhalt und das 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 Hostingunternehmens. Sie platzieren Website-Dateien auf dem Webserver. Der Webserver stellt Website-Inhalte für die Besucher bereit.
- Ein Domainname ist die einzigartige Webadresse, unter der Menschen Ihre Website finden, wie
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 vom selben Unternehmen beziehen, werden sie normalerweise automatisch so konfiguriert, dass sie miteinander kommunizieren. Wenn Sie sie jedoch von verschiedenen Unternehmen beziehen oder Ihr Hosting zu einem anderen Unternehmen wechseln möchten, müssen Sie einige Einstellungen vornehmen, um den Domainnamen auf den richtigen Server zu verweisen. Dies ist notwendig, damit die Leute Ihre Website sehen, wenn sie zu dieser Webadresse navigieren. Dies wird in der Regel durch das Einloggen auf der Website Ihres Domain-Registrars und das Einstellen der Nameserver auf die von Ihrem Hostingunternehmen bereitgestellten Nameserver durchgeführt.
Unternehmen verwenden verschiedene Mechanismen, um Dateien auf ihre Webserver zu übertragen. Viele bieten mehr als eine Option an; typische Optionen umfassen:
- Eine Drag-and-Drop-Oberfläche (ein Beispiel dafür sehen Sie im Abschnitt Veröffentlichen über GitHub weiter unten).
- Ein File Transfer Protocol (FTP) Programm. FTP-Programme variieren stark, aber im Allgemeinen müssen Sie sich mit den vom Hostingunternehmen bereitgestellten Details (typischerweise Benutzername, Passwort, Hostname) mit Ihrem Webserver verbinden. Dann zeigt das Programm Ihre lokalen Dateien und die Dateien des Webservers in zwei Fenstern an und bietet eine Möglichkeit, Dateien hin- und herzutransferieren.
- Das Halten des Website-Quellcodes in einem GitHub-Repository (siehe unten) und das Zugreifen des Hostingunternehmens darauf, damit sie den Quellcode abrufen, bei Bedarf bauen und veröffentlichen können.
- Einige Unternehmen stellen Kommandozeilen-Tools zur Verfügung, die Sie verwenden können, um Ihre Dateien zu übertragen.
Tipps zur Auswahl von Hosting und Domains
- MDN bewirbt keine spezifischen kommerziellen Hostingunternehmen oder Domain-Registrare. Um Hostingunternehmen 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 heimischer oder geschäftlicher Internetdienstanbieter bietet möglicherweise 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 sind möglicherweise im Umfang begrenzt, aber sie sind ausreichend für erste Experimente.
Verwenden 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 Codierungsseite". Es ermöglicht 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 ihn verbessern kann. GitHub bietet eine sehr nützliche Funktion namens GitHub Pages, die es Ihnen ermöglicht, Website-Code live im Internet zu präsentieren.
- Google App Engine ist eine leistungsstarke Plattform, die es Ihnen ermöglicht, Anwendungen auf der Infrastruktur von Google zu erstellen und zu betreiben — ob Sie eine mehrstufige Webanwendung von Grund auf neu erstellen oder eine statische Website hosten müssen. Weitere Informationen finden Sie unter Wie hosten Sie Ihre Website auf Google App Engine?.
Diese Optionen sind in der Regel kostenlos, jedoch mit einem begrenzten Funktionsumfang.
Verwenden einer webbasierten IDE wie CodePen
Es gibt eine Reihe von Web-Apps, die eine Website-Entwicklungsumgebung nachbilden und Ihnen ermöglichen, HTML, CSS und JavaScript zu schreiben, das dann gerendert und in einem Ausgabebereich angezeigt wird. Im Allgemeinen sind diese Werkzeuge einfach zu bedienen, ideal zum Lernen, gut zum Teilen von Code (zum Beispiel, wenn Sie eine Technik teilen oder um Hilfe bei der Fehlersuche von Kollegen in einem anderen Büro bitten möchten) und kostenlos (für grundlegende Funktionen). Sie hosten Ihre gerenderte Seite unter einer eindeutigen Webadresse. Die Funktionen sind jedoch oft begrenzt und diese Apps bieten oft keinen Speicherplatz für Ressourcen (wie Bilder).
Versuchen Sie, mit einigen dieser Beispiele zu experimentieren, um herauszufinden, welches am besten für Sie funktioniert:
Veröffentlichen über GitHub
Lassen Sie uns nun untersuchen, wie Sie Ihre Website über GitHub Pages veröffentlichen.
-
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 username.github.io ein, wobei username Ihr Benutzername ist. Unser Freund Bob Smith würde beispielsweise bobsmith.github.io eingeben.
- Klicken Sie unten auf der Seite auf die Schaltfläche Create repository.
-
Auf der nächsten Seite finden Sie den Link uploading an existing file und klicken 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. Dazu:
- Öffnen Sie ein Dateiexplorer/Finder-Fenster auf Ihrem Computer.
- Stellen Sie sicher, dass Sie das Dateiexplorer- und das Webbrowser-Fenster sehen können — positionieren Sie sie nebeneinander auf Ihrem Bildschirm.
- Navigieren Sie im Dateiexplorer 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 (z. B. mit der Tastenkombination Strg + A oder Befehl + A auf macOS).
- Ziehen Sie die Dateien von Ihrem Dateiexplorer über den Abschnitt "Drag files here to add them to your repository" der GitHub-Seite.
- Der Rahmen und der Text des Abschnitts ändern sich, um anzuzeigen, dass ein Drop möglich ist. Lassen Sie die Dateien an diesem Punkt los.
- Klicken Sie unten auf der Seite auf die Schaltfläche Commit changes.
-
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 ein paar Minuten dauern, bis Ihre Website online ist. Wenn Ihre Website nicht sofort angezeigt wird, warten Sie ein paar Minuten und versuchen Sie es erneut.
Um mehr zu erfahren, sehen Sie sich die GitHub Pages Help an.
Weiterführende Literatur
- Was ist ein Webserver
- Domainnamen verstehen
- Wie viel kostet es, etwas im Web zu machen?
- Deploy a Website: Ein schönes Tutorial von Codecademy, das ein wenig weiter geht und einige zusätzliche Techniken zeigt.