Veröffentlichen

Du hast lange an einer Website gearbeitet. Wie kommt sie nun “ins Internet” und wird für alle erreichbar? Deine Website muss auf einem für das Internet zugänglichen Server (Hosting) gespeichert werden. Dort ist sie dann über eine URL erreichbar. Die URL gibst du im Adressfeld deines Browsers ein.

Voraussetzungen

Domain

Eine Domain ist ein einzigartiger Name, den du für deine Website kaufen kannst. Vielleicht hast du schon einmal etwas über eine IP-Adresse gehört. Ähnlich wie deine Postanschrift auf einem Couvert werden Datenpakete mit einer IP-Adresse versehen, die den Empfänger eindeutig identifizieren. Ein Domainname verweist auf eine IP-Adresse und bestimmt somit, wo deine Website auffindbar ist.

Domains können unterschiedliche Endungen haben. Diese Endungen heissen Top-Level-Domains (TLD). Beispiele dafür sind .com, .ch, .io, .co.uk, .pizza oder auch .design. Zusätzlich zu dieser kleinen Auswahl gibt es noch viele hundert weitere Top-Level-Domains.

Eine Domain kannst du häufig in Kombination mit einem Hostingpaket kaufen, mehr Informationen findest du dazu im nächsten Abschnitt.

Hosting

Hosting bezeichnet den Ort, wo deine Website gespeichert wird und somit für das Internet verfügbar gemacht wird. Ein Hostingpaket bezeichnet die Kombination aus Speicherplatz auf einem Server und optionalen Zusatztechnologien. Etwa Datenbanken, One-Click-Installationen für bekannte Software, Domains, E-Mail-Postfächer etc. Für kleine Projekte gibt es kostenlose Hostingpakete. Bei rechenintensiven, grossen Applikation mit vielen Usern können die monatlichen Kosten schnell drei- oder gar vierstellig sein.

Zuverlässige Anbieter in der Schweiz sind etwa Cyon oder Hostpoint.

Für eine Website, wie du sie in diesem Kurs gebaut hast, reicht ein kostenloses Hosting wie Netlify völlig aus. Auch freehostingnoads.net wäre eine mögliche Alternative. Insbesondere dann, wenn du eine eigene Domain verwenden möchtest.

Verschiedene Deploymentmethoden

Drag and Drop Aufgabe

Die denkbar einfachste Möglichkeit eine Website kostenlos im Internet zu veröffentlichen bieten dir Anbieter wie Netlify oder Tiiny Host. Dabei kannst du die Inhalte und Unterordner deiner Website einfach in das Browserfenster ziehen. Domain und Hosting wird automatisch für dich generiert.

Hinweis

Falls du deine Seite mit Netlify Drop veröffentlichen möchtest, erstelle einen Account und logge dich bitte erst ein! Beachte ausserdem, dass diese Art des Deployments (Auslieferung/Veröffentlichung) zwar kostenlos, aber auch eingeschränkt ist. Sobald du eine grössere, dynamische Website veröffentlichen möchtest, oder einen eigenen Domain-Namen verwenden möchtest entstehen Kosten.

FTP/SFTP

FTP (File Transfer Protocol) wird benutzt, um Dateien auf einen Server hoch- und runterzuladen. Mit einem FTP-Programm kannst du auf diesen Server zugreifen und dort wie in deinem Dateisystem auf deinem Computer Ordner und Dateien erstellen, umbenennen, verschieben etc. FTP gilt heute als veraltet, weil es häufig keine kryptografischen Sicherheitsalgorithmen besitzt. Solltest du noch FTP benutzen müssen, dann verwende immer SFTP (Secure File Transfer Protocol).

Bekannte FTP-Programme sind z.B. Transmit(MacOS), Cyberduck (MacOS) oder FileZilla (MacOS/Windows).

Continuous Integration mit Git

Git bezeichnet eine Technologie der Versionsverwaltung, die von Anbietern wie Github, Gitlab oder Bitbucket genutzt wird. Eine “Version” ist ein Abbild einer Software. Wenn eine Software beispielsweise 20 Updates erhalten hat, dann hat diese Software 20 Versionen. Git speichert diese Versionen und erlaubt somit, bei Fehlern eine vorherige Version wiederherstellen zu können.

Ausserdem ermöglicht Git Backups (Sicherungskopien) anzulegen, kollaborativ an Software zu arbeiten und gilt heute als Industriestandard eines modernen Entwicklungsprozesses.

Software wird mit Git in einem sogenannten Repository (Aufbewahrungsort) gespeichert. Der offizielle, voll funktionsfähige Zustand einer Software wird auch “Master” genannt. Von diesem Master können Kopien zur weiteren Softwareentwicklung erstellt werden, die du dir wie kleine Äste weggehend von einem Baumstamm vorstellen kannst. Diesen Vorgang nennt man “branching” und den Software-Ast nennt man “Branch”. In der Zeichnung unten wird der Branch als “Feature” bezeichnet. Sobald alle Qualitätskriterien dieser veränderten Software erfüllt sind, kann dieser Branch zurück in den Master geführt werden (Merge). Der Master enthält nun die Softwareänderung und ist verbessert worden.

Bild: Noble Desktop

Continuous Integration (CI) bezeichnet das kontinuierliche Hinzufügen von kleinen Fragmenten zu einer Software. Sobald ein Teil einer Software fertig ist und der Code in der Git-Versionsverwaltung eingecheckt wurde, durchläuft es einen automatisierten Prozess (Pipeline), der die Qualität des Codes sicherstellt. Die Pipeline enthält beispielsweise automatisierte Funktionstests und überwacht wichtige Softwaremetriken. Eine Softwaremetrik wäre beispielsweise, dass überwacht wird, nicht die Ladegeschwindigkeit der Website über eine gewisse Grenze zu erhöhen.

Sobald die Softwareänderung durch die Pipeline gelaufen ist und alle Tests bestanden hat, wird sie “deployed” und das Update ist für User verfügbar. Das Update ist nun live. Sollte ein Test in der Pipeline fehlschlagen, so gibt es eine Fehlermeldung und du kannst deinen Code nachbessern.

SSH

SSH bedeutet “Secure Shell” und ist ein Netzwerkprotokoll. Mit diesem kannst du über eine verschlüsselte Verbindung auf einen entfernten Rechner zugrreifen, z.B. ein Hosting.

Mit SSH kannst du meistens dasselbe tun wie mit FTP. Meistens noch mehr. Der Unterschied zu FTP liegt darin, dass SSH meist über die Konsole (Anwendung “Terminal” bei MacOS) und mit bestimmten Textbefehlen verwendet wird. FTP funktioniert meistens mit einem GUI (Grafische Benutzeroberfläche).

Der kostenlose Anbieter surge.sh ermöglicht es dir, deine Website mit dieser Methode zu veröffentlichen.

Website veröffentlichen

Die folgenden Schritte zeigen dir, wie du deine Website mit surge.sh veröffentlichen kannst.

Schritt 1: Node.js installieren

Node.js ist eine Open Source (frei verfügbare) Software um eine Serverinfrastruktur aufzubauen. Da surge.sh ohne Node.js nicht funktioniert, musst du dies auf deinem Gerät installieren.

Link

Node.js herunterladen

Node.js LTS herunternladen.

Installation durchführen.

Schritt 2: Terminal in VSCode öffnen

Sobald du Node.js installiert hast, öffne VSCode und wähle oben im Menü Terminal den ersten Eintrag New Terminal aus.

Achtung! Verwende den richtigen Ordner

Damit das Veröffentlichen richtig funktioniert ist es wichtig, dass im angezeigten Pfad des Terminals nun der Hauptordner deines Portfolios angezeigt wird. Zum Beispiel:

deinName@deinMacbook portfolio % 

Falls du deinen Vornamen für den Ordner verwendet hast, könnte das so aussehen:

deinName@deinMacbook vorname % 

Schritt 3: surge.sh installieren

Als nächstes gibst du folgenden Befehl im Terminal ein und drückst anschliessend Enter:

MacOS

sudo npm install --global surge

Passwort eingeben (MacOS)

Anschliessend musst du das Passwort deines Gerätes eingeben. Bitte beachte, dass dieses Passwort beim tippen nicht angezeigt wird. Gibt es einfach ”blind” ein und drücke Enter.

Windows

npm install --global surge

Arbeitest du auf einem Windows-Gerät, dann musst du kein Passwort eingeben. Sollte dennoch ein Fehler angezeigt werden, schliesse VSCode. Anschliessend machst du einen Rechtsklick auf das Icon von VSCode und wählst ”Als Administrator ausführen”. Danach solltest du Schritt 2 und 3 ausführen können.

Schritt 4: Bei surge.sh veröffentlichen

Nachdem du surge.sh erfolgreich installiert hast, kannst du nun deine Website veröffentlichen.

Gib nun folgende Zeile in das Terminal ein und folge den Anweisungen:

surge

Gib nun deine E-Mail-Adresse ein und wähle ein Passwort, welches du für deinen surge.sh Account verwenden möchtest.

E-Mail-Adresse bestätigen

Damit du dich später wieder bei surge.sh einloggen und Änderungen vornehmen kannst, musst du die E-Mail bestätigen, die dir surge.sh zusendet.

Als nächstes fragt dich surge.sh, welcher Projektordner veröffentlicht werden soll. Überprüfe im angezeigten Pfad, dass dein root-Ordner (siehe Schritt 2) verwendet wird. Ist dies der Fall, drücke Enter um fortzufahren.

Nun generiert surge.sh für dich automatisch eine Domain. Obwohl du diese auch ändern könntest, solltest du diesen Vorschlag einfach unverändert annehmen indem du dies mit Enter bestätigst.

Nun wird deine Website im Internet veröffentlicht. Hat alles geklappt, kannst du deine Seite anschliessend unter dem im Terminal angezeigten Link aufrufen.

Etwa so sollte das Terminal nach allen Schritten aussehen.

Schritt 5: Änderungen erneut hochladen

Es ist gut möglich, dass du nach der ersten Veröffentlichung weitere Änderungen an deiner Seite vornehmen möchtest. Etwa um nach dem Testing Fehler zu beheben. Bei surge.sh gibt es dazu zwei Möglichkeiten. Die erste wäre einfach erneut surge ins Terminal zu schreiben. Dadurch wird jedoch ein neuer Link generiert. Besser ist es deshalb die bereits veröffentlichte Website mit folgender Anweisung zu überschreiben:

surge /projektpfad deine-domain.surge.sh

Der Projektpfad und deine surge.sh Domain wurde dir ja bereits im Terminal angezeigt. Du kannst diese also einfach kopieren, um die Zeile oben nicht komplett manuell schreiben zu müssen.

Pfeiltasten im Terminal benutzen

Du kannst mit der Pfeiltaste nach oben im Terminal immer die zuletzt geschriebenen Anweisungen erneut aufrufen. So musst du nicht bei jeder Veröffentlichung die Zeilen manuell eintippen.

Website löschen

Falls du deine Website später wieder löschen möchtest kannst du dies mit folgender Zeile im Terminal tun:

surge teardown

Anschliessend kannst du das zu löschende Projekt auswählen und das Entfernen mit Enter bestätigen.

Passende Challenges

• #27 Git Deployment (Veröffentliche deine Website mit Git)