Eine Reise für Anfänger zum Starten einer Website

Im September 2018 war ich nur wenige Monate auf meiner Reise, um Webentwicklung zu lernen. Da es mir bei vielen neuen Entwicklern so geht, war es für mich eine große Aufgabe, nicht nur die erforderlichen Grundkenntnisse zu erlernen, sondern auch mit der sich schnell entwickelnden Branche Schritt zu halten. Gerade als ich das Niveau erreichte, auf dem ich das Gefühl hatte, eine einfache Website erstellen zu können, erkannte ich, dass dies nur der erste Schritt war.

Ein paar HTML-Seiten, die lokal auf meinem Laptop gespeichert waren, zu öffnen, fühlte sich meilenweit davon entfernt an, jemandem sagen zu können: „Hey, schau dir meine Website an, live im Internet!“

Aber ich habe es geschafft! Und das Beste daran ist, dass es nicht so beängstigend, schwierig oder teuer war, wie es sich zuerst anfühlte.

Alles begann damit, dass ich Chris eine E-Mail schickte, mit der er einen großartigen Artikel schrieb, der alles in einfacher Sprache erklärte.

Zu diesem Zeitpunkt hatte ich keine vollständig kodierte Website – nur eine Idee für eine einfache Seite, die ich benutzte, um mich währenddessen selbst zu unterrichten. Ich nutzte den Fortschritt meiner Seite als Ansporn, um zu lernen, wie ich schneller eine Live-Website bekomme. Aber ich bin sicher, Sie könnten das Ganze auch mit einem HTML-Dokument machen, auf dem nur „Hallo, Welt!“ steht.

Ich habe meine Seite mit Gatsby erstellt, einem statischen Website-Generator, der von React angetrieben wird. Der Aufbau einer Website mit diesen Tools auf modulare Weise fühlte sich für mich sehr natürlich an. Das Konzept wiederverwendbarer Teile ist mir aus meiner Karriere als Produktdesigner und Maschinenbauingenieur vertraut. Es bedeutet, dass man in Phasen bauen kann, wie mit Legosteinen, Stein für Stein, bis man schließlich ein lebensgroßes Schloss hat, zu dem man Freunde einladen kann!

Dies ist keine Anleitung. Dies ist meine persönliche Erfahrung bei der Umwandlung einer Website von meinem Laptop ins Internet. Hoffentlich gibt es Ihnen etwas Hoffnung, dass es auch für jemanden möglich und erreichbar ist, der keine formelle Ausbildung in Webentwicklung hat und dies erst seit 12 Monaten tut!

Domain-Registrare

Bevor ich überhaupt eine Domain kaufte, schien es eine ziemlich ernste Sache zu sein. Eine Domain zu besitzen bedeutet, dafür verantwortlich zu sein. Leute werden diese Adresse aufrufen und schließlich Inhalte sehen, die Sie dort hinterlegt haben.

Ich weiß nicht, ob jeder die gleiche Erfahrung macht, aber ich habe wochenlang auf einen Domainnamen gewartet, bevor ich mich dafür entschied. Es wurde mir eine Zeit lang fast zur Obsession, online nach Akronym-Generatoren zu suchen, um schlau zu sein, Stunden auf dictionary.com zu verbringen, um nach Synonymen zu suchen, die cool waren. Am Ende habe ich mich für meinen Namen und das, was ich tue, entschieden: joshlong.design. Ich muss immer noch ein wenig lächeln, wenn ich meinen Namen in der Adressleiste sehe.

Seitdem ich Chris' Artikel gelesen habe, habe ich tatsächlich zwei Domains von zwei verschiedenen Anbietern gekauft: eine .com und eine .design. Mir ist bewusst, dass ich Chris' Rat, Domains bei einem einzigen Registrar zu konsolidieren, widersprochen habe, aber ich musste mich umsehen, um ein gutes Geschäft für meine .design-Domain zu bekommen. Ich besitze nur zwei Domainnamen – und für einen davon habe ich noch keine Pläne – daher ist es keine große Aufgabe, den Überblick zu behalten, wo ich sie gekauft habe. Tatsächlich erinnere ich mich nicht mehr daran, wann ich das letzte Mal auf die Domain zugreifen und sie verwalten musste, die ich täglich nutze!

Der Kauf eines Domainnamens war so einfach wie jede andere Online-Shopping-Transaktion. Nichts wirklich Großes oder Beängstigendes daran. Ich habe meine .com-Domain über Namecheap und meine .design-Domain über Google Domains gekauft, und der Prozess war bei beiden ziemlich ähnlich. Alles, was sie brauchten, waren mein Name, meine Adresse und meine Zahlungsinformationen. Ziemlich Standardkram!

Ich erinnere mich nicht, dass Google mir viele zusätzliche Pakete verkaufen wollte. Sie schienen damit zufrieden zu sein, dass ich nur eine Domain kaufe, obwohl sie mir kostenlosen WHOIS-Schutz angeboten haben, den ich gerne angenommen habe, da ich meine Kontaktdaten nicht frei zugänglich für jeden haben wollte, der neugierig ist. Wie Chris jedoch warnte, versuchte der andere Registrar, den ich nutzte, *wirklich* hart, mir Extras wie Hosting, E-Mail, ein VPN (was auch immer das ist!) und SSL-Zertifikate zu verkaufen.

Ich habe keine dieser Extras in Anspruch genommen. Ich hatte bereits einen Hosting-Plan, und Sie können eine Weiterleitung über Gmail verwenden, um eine E-Mail-Adresse vom Typ `[email protected]` zu „fälschen“. Ich habe ehrlich gesagt keine Ahnung, warum ich ein VPN brauchen würde, und das Hosting, das ich in Anspruch nehmen wollte, gab mir ein kostenloses SSL-Zertifikat über Let's Encrypt. Also nur der Domainname, bitte!

Hosting

Wie Chris vorschlug, war die Auswahl eines Hosters etwas kniffliger als die Auswahl und der Kauf eines Domainnamens. Aber am Ende hat mich die Webtechnologie, die ich zum Erstellen meiner Website verwendet habe, in eine bestimmte Richtung gelenkt.

Meine Website ist mit Gatsby erstellt, was bedeutet, dass sie direkt statische Assets ausgibt, im Grunde als HTML- und JavaScript-Dateien. Das bedeutet, dass ich keinen Hoster brauchte, der einen Server anbietet (in meiner superklugen, autoritativen Stimme), insbesondere nicht für WordPress mit einer MySQL-Datenbank und einem Apache-Server, 6 Kerne @ 3,6 GHz, 4GB RAM, 5TB Bandbreite, 5 IP-Adressen und 500GB SSD-Speicher usw.

All dieser Fachjargon geht mir völlig über den Kopf. Alles, was ich tun wollte, war, meine Dateien ins Internet hochzuladen und zu meiner Domain zu gehen, um sie alle kompiliert und glänzend zu sehen. Sollte einfach sein, oder?

Nun, es stellte sich heraus, dass es tatsächlich so einfach war. Da in letzter Zeit so viel darüber geredet wurde, dachte ich, ich schaue mir Netlify an.

Netlify wird von Gatsby empfohlen. Sie haben eine wirklich gute Dokumentation, und für meine Zwecke hatte ich das Gefühl, dass ich bequem innerhalb der kostenlosen Stufe bleiben könnte, die sie anbieten. Tatsächlich nutze ich derzeit 0,08 % pro Monat der gesamten Bandbreite, die die kostenlose Stufe bietet. Gewonnen! Obwohl das vielleicht bedeutet, dass ich nicht genug tue, um Leute auf meine Website zu locken...

Ein kurzer Exkurs zu GitHub: Ich bin kein Experte dafür und kenne die Etikette, die damit verbunden ist, nicht wirklich. Alles, was ich getan habe, war, mich anzumelden, ein neues Repository zu erstellen und den Anweisungen zu folgen, die sie mir geben. Danach habe ich jedes Mal, wenn ich eine Änderung an meiner Website vorgenommen habe, die Schaltflächen in meinem Code-Editor (VS Code) verwendet, um meine Änderungen zu committen und zu pushen. Es funktioniert, aber ich habe keine Ahnung, ob es die richtige oder beste Vorgehensweise ist! Ich fange jetzt jedoch an, Git über die Befehlszeile zu verstehen. Ich hatte überhaupt keine Ahnung, wie man das macht, als ich anfing, aber ich habe mich trotzdem durchgemogelt – und Sie können das auch!

Zurück zu Netlify.

Ich habe ein Konto eröffnet (keine Kreditkartendaten erforderlich) und eine neue Seite zu Netlify hinzugefügt, indem ich ihr das GitHub-Repository mitgeteilt habe, in dem sie gespeichert war. Wenn Sie Ihr Repository verbunden haben, können Sie beobachten, wie Netlify seine Arbeit erledigt und Ihre Website bereitstellt.

Nachdem meine Website unter der zufällig generierten URL von Netlify bereitgestellt wurde, folgte ich deren Anweisungen, um eine anderswo registrierte Domain hinzuzufügen. Sie machen es so einfach!

Ich gehe davon aus, dass die Anweisungen für verschiedene Hoster unterschiedlich sind, aber im Grunde gab mir Netlify einige Serveradressen, zu denen ich dann zu meinem Domain-Registrar zurückkehren musste, um sie einzugeben. Diese Adressen werden als Nameserver bezeichnet, also halten Sie Ausschau nach diesem Wort!

Sobald ich meine Netlify-Nameserver in Google Domains eingegeben hatte, wusste Google, wo es suchen musste, um Leute dorthin zu schicken, die meinen Domainnamen in die Adressleiste ihres Browsers eingeben. Alles, was ich danach tun musste, war, auf ein bisschen Internetmagie im Hintergrund zu warten. Das hat bei mir etwa drei Stunden gedauert, kann aber von dem, was ich höre, anywhere von 10 Minuten bis 24 Stunden dauern.

Nachdem das erledigt war, konnte ich meinen neuen, glänzenden Domainnamen in die Adressleiste eingeben und – zack – ich sehe meine eigene Website, live im Internet gehostet!

Content-Management-Systeme

Die Welt der Content-Management-Systeme (CMS) ist riesig und verwirrend, aber sie kann auch völlig irrelevant für Sie sein, wenn Sie es wollen. Ich fühlte mich so befreit, als ich erkannte, dass ich mich nicht darum kümmern musste. Es war eine Sache weniger auf meiner To-Do-Liste.

Meine Gatsby-Seiten-Beiträge und -Seiten (meine Inhalte) waren nur ein Verzeichnis von Markdown-Dateien und mein CMS war mein Texteditor. Chris und Dave sprachen über die Idee davon in einer aktuellen Folge von ShopTalk Show.

Da ich eine Standardstruktur für verschiedene Arten von Beiträgen und Seiten haben wollte, begann ich schließlich mit NetlifyCMS, einem Open-Source- CMS, das sehr schnell in Ihre Website integriert werden kann. (Chris hat auch kürzlich ein Video über NetlifyCMS für seine confer-reference site gemacht... sehen Sie, was ich da gemacht habe?!) Jetzt kann ich Blogbeiträge und Entwürfe von überall auf der Welt erstellen, direkt von meiner Website, solange ich eine Internetverbindung habe!

Asset-Hosting (CDNs)

Ein Content Delivery Network (CDN), wie Chris in seinem Artikel erklärte, ist im Grunde ein Ort im Internet, an dem Sie die Dateien speichern, die Ihre Website zum Ausführen benötigt, HTML, CSS, Bilder usw. Wenn Ihre Website sie benötigt, geht sie zum CDN und holt die Dateien, die Ihre Website verwenden kann.

Nach allem, was ich gelesen habe, ist die Verwendung eines CDN eine gute Praxis, und aufgrund der Hosting-Entscheidung, die ich getroffen habe, ist dies nichts, worüber ich mir Sorgen machen muss – es ist bei Netlify als Standard enthalten, kostenlos!

Netlify hat ein eigenes CDN, in dem alle Dateien Ihrer Website gespeichert sind. Wenn jemand Ihre Website besucht, greift Netlify auf sein CDN zu und ruft die Dateien ab. Das ist erstaunlich schnell und lässt Ihre Website viel reibungsloser navigieren.

Es ist eine lange Reise, aber Sie können es schaffen!

Es gab einen Punkt, bevor ich mich auf die Reise machte, meine Website online zu stellen, an dem ich mich davon überzeugte, dass es in Ordnung ist, nur lokale Websites zu haben, da meine Karriere nicht im Bereich Webentwicklung liegt. Der Grund dafür war, dass der Weg schwierig, lang und teuer zu sein schien.

Tatsächlich war es nichts davon! Sie könnten eine Website für 0,99 £ (ca. 1,25 $ für Sie Amerikaner) oder weniger online stellen, wenn Sie ein Angebot für einen Domainnamen finden. Der Domainname war meine einzige Ausgabe, da ich den Weg für Hosting, Asset-Management und Content-Management gewählt habe.

Auf einer sehr grundlegenden Ebene sieht der Weg so aus...

Code > Buy Domain > Find/Buy Hosting > Update Nameservers > Upload Code > Live!

Wenn Sie zufällig denselben Anbieter zum Kauf Ihres Domainnamens und Ihres Hostings verwenden, können Sie den Nameserver-Schritt überspringen. (Netlify verkauft auch Domains!)

Es ist definitiv für jeden möglich, seine Website online zu stellen. Es gibt einen Prozess, dem Sie folgen müssen, aber wenn Sie sich Zeit nehmen, kann er relativ unkompliziert sein. Es ist ein wirklich wunderbares Gefühl, etwas, das man gebaut hat, vor Menschen zu präsentieren, und es ist ehrlich gesagt etwas, von dem ich dachte, ich würde es nie können. Aber es liegt definitiv in jedermanns Reichweite!

Etwas, das ich während dieses Prozesses (und Tausender Google-Suchen) wirklich zu schätzen gelernt habe, ist die Bereitschaft aller in der Web-Community, zusammenzuarbeiten und zu helfen, mich und meine Fragen zu akzeptieren, während ich versuchte zu lernen, was ich tat. Das ist etwas, das ich mir in meiner eigenen Branche mehr wünschen würde.

Ich würde gerne die Erfahrungen anderer beim Start ihrer ersten Website hören. Was waren Ihre Stolpersteine und Triumphe? War es so beängstigend, wie es sich anfangs anfühlte?