Beste Antwort
Das GitHub Student Developer Pack stellt die Ressourcen für bereit Richten Sie Ihre eigene firstnamelastname.me Domain kostenlos. Im Rest meiner Antwort schimpfe ich darüber, warum es anfangs schwierig für mich war, warum es für Sie möglicherweise ein Hindernis war, eine eigene Website zu erstellen. Ich füge einen kurzen, etwas umfassenden Leitfaden hinzu, der für ein studentisches Publikum gedacht ist wenig bis gar kein technisches Wissen, um eine ziemlich öffentliche persönliche Website für sich selbst zu erstellen (die angezeigt werden sollte, wenn jemand Ihren Namen googelt).
Warum es wirklich schwierig ist, eine eigene Website zu erstellen
Um zu wissen, wie Websites funktionieren: Als High-School-Technikbegeisterter war ich immer neugierig zu wissen, wie Websites funktionieren, und wirklich beeindruckt von Menschen, die ihre eigenen hatten. Von außen schien alles so einfach zu sein, aber wenn ich „wie funktionieren Websites“ googelte und tiefer grub, verlor ich mich inmitten seltsamer Abkürzungen und kompliziert klingender Dinge. TCP, UDP, IP, DNS, IPv6, HTML, JS, CSS – die Liste geht weiter. Die Aufgabe, diese abstrusen Konzepte auf greifbare Dinge in Computern abzubilden, von denen ich wusste, war ziemlich schwierig und eines dieser Dinge, die eine enorme Motivation zum Sitzen und Durchlaufen erfordern. P. >
Bei der Entscheidung, nur eine Website zu erstellen, um herauszufinden, wie sie funktionieren: Es gibt eine Frage, die Sie möglicherweise bei einigen wählerischen Technologiefirmen stellen und in der finden Annalen von Glassdoor –
Was passiert, wenn Sie „google [dot] com“ in Ihren Webbrowser eingeben? ( Google-Interview Frage: Was passiert, wenn Sie tippen …)
Schon in der Mitte des Informatikstudiums am College war ich ein wenig besorgt darüber, wie wenig sie mir darüber erzählten. Frustriert war das Zurückgreifen bei Google, wie man eine Website erstellt. Mit der Menge an Marketinggeldern stieß ich auf eine Vielzahl von Websites und Begriffen, die ich immer noch nicht allzu gut verstehen konnte – Domains, Hosting, GoDaddy, HostGator, Routing, CSS, HTML, Javascript, jQuery, WordPress , Blogger usw. Das zeigt es mir jetzt:
Um ehrlich zu sein, klangen all diese Namen sehr betrügerisch. y für mich, und ihre Unverständlichkeit übertraf meine Motivation. Ich wollte nur meine eigene Website mit meinem Namen haben – debarghyadas.com [Selbstwerbung ignorieren] und Erfahren Sie, wie Sie Inhalte darauf platzieren.
Wenn Sie zu billig sind, um Dinge im Internet zu kaufen: Als ich einige davon mit dem Kopf umwickelt habe Es machte ein wenig Sinn. Um eine Website zu erstellen, müsste ich eine „Domain“, einen Website-Namen und ein „Hosting“ kaufen, einen Ort, der den Inhalt meiner Website enthält und ihn „bedient“. zu dieser Domain. Kauf. Kein schönes Wort angesichts meiner nicht so tiefsitzenden Genügsamkeit. Für as Als Student, der von Freeware lebt, war ich nicht besonders daran interessiert, Geld auszugeben, um abstrakte Dinge zu kaufen. Ich habe Jahre gebraucht, um 1 US-Dollar für WhatsApp zu bezahlen, als es trivial war, 4 US-Dollar auf diesen üppigen Schokoladenmousse-Kuchen mit Vanilleeis zu sprengen.
Komm schon – könntest du noch mehr Betrug sein? „Wir essen die Konkurrenz auf“? Okay, Gator.
Für viele Studenten (und Menschen) ist Geld eine ziemliche Eintrittsbarriere. Der Kauf einer Domain (bei GoDaddy) kostet ungefähr 10 US-Dollar pro Jahr und der Kauf von Hosting bei HostGator in ähnlicher Höhe. Und es ging darum, sich durch zahlreiche Produkte zu arbeiten, die Sie nicht verstehen konnten. Es ärgerte mich, dass Sie auch jährlich zahlen mussten – es war kein einmaliger Kauf.
Als ich nicht billig war, um mich zu motivieren: Schließlich verteilte ich durch einen langen, mühsamen Prozess das Geld und überzeugte mich davon Die Investition würde mich motivieren, die notwendigen Fähigkeiten zu erlernen. Ich meine, jeder hat immer gesagt, HTML sei einfach und das ist es auch, aber mit HTML erstellte Websites sehen auch wie Scheiße aus. Es gab viel Verwirrung.
Irgendwann hatte ich jedoch Recht – die Investition in eine Domain und das Hosting für 5 Jahre haben mich dazu gebracht, herauszufinden, wie die Dinge funktionierten, und ich habe eine persönliche Website herausgebracht und sie wiederholt, wann immer ich welche hatte Freizeit.
Eine etwas umfassende Anleitung zum kostenlosen Erstellen Ihrer eigenen Website
Aufrufen des GitHub Student Developer Pack .Ja, es enthält eine Menge Dinge, die ich noch nie benutzt habe, aber was es nicht direkt bewirbt (und wahrscheinlich sollte), ist, dass es alle Tools bietet, um Ihre Website auf Ihrer Domain kostenlos zum Laufen zu bringen! Es klingt zu schön, um jetzt wahr zu sein.
Handwerkszeug Hier „ist eine allgemeine Richtlinie. I. Ich habe es nicht persönlich ausprobiert, aber ich stelle mir vor, dass dies ein guter Weg ist, um Dinge zu erledigen. Sie müssen (oder sollten) die folgenden kostenpflichtigen Dienste nutzen, die das Student Developer Pack (kostenlos) bietet:
1. Private Github-Repositorys [optional]
2. Namecheap .me Domain
3. Namecheap SSL [optional]
4. DigitalOcean-Hosting
Außerdem
1. Bootstrap
2. Mehrere Online-Tutorials und Tools – JSfiddle 3. Einige Online-Vorlagenseiten – StartBootstrap , BootstrapZero
Was tun mit diesen Tools? Ich werde versuchen, diese Kurzanleitung so einfach wie möglich zu halten . Es ist einfach, große Begriffe zu streichen, wenn Sie wissen, was sie bedeuten, kann aber eine große Abschreckung für ahnungslose Leser sein. Ich könnte expliziter sein und diese erweitern, wenn dies gewünscht wird.
1. Richten Sie ein privates Github Repository [optional]
Wenn Sie es sind Wenn man viel Code für ein Projekt schreibt, gibt es viele Dinge, die schief gehen können.
- Es kann von Ihrem Computer gelöscht werden und Sie werden geschraubt.
- Sie können versuchen, eine neue Funktion hinzuzufügen, ohne die alte Version zu sichern, und in einen Zustand gelangen, in dem Sie sich befinden Vergessen Sie, wie viele Strg + Zs (Undos) Sie für welche Dateien benötigen, um wieder funktionsfähig zu sein.
- Sie können mehrere Personen separat auf ihren eigenen Computern daran arbeiten lassen und haben keine Ahnung, wie Sie beide integrieren können Version des Projekts.
Ein n00b-Codierer könnte vorschlagen, Dropbox zu verwenden, um Codeprojekte freizugeben und zu synchronisieren, und wenn Sie dies tun „Wenn Sie selbst daran arbeiten, könnte dies eine anständige Lösung sein. Sie werden jedoch immer noch mit dem zweiten Problem in der obigen Liste konfrontiert sein und es wird wirklich verrückt, wenn mehrere Personen gleichzeitig versuchen, an derselben Codebasis zu arbeiten.
Git (und früher SVN und Mercurial für Hipster) werden verwendet, um Ihren Code zu „versionieren“. Beachten Sie, dass Git kein Github ist. Das heißt, Sie können Änderungen vornehmen und sie „stromaufwärts“ verschieben Die Interwebs, in denen sie dauerhaft (kostenlos) in Ihrem „Repository“ gespeichert sind. Git ist auch ein reines Befehlszeilenprogramm. Sie müssen also einen dieser schwarzen, beängstigend aussehenden Hacker-Bildschirme auf Ihrem Desktop öffnen und Befehle eingeben Es ist nicht trivial zu verwenden. Github lässt sich in git integrieren und ermöglicht es Ihnen, die Repositorys anzuzeigen, die Sie in den Upstream verschoben haben, und bietet eine Reihe von GUIs für Git-Aufgaben (die sich wie eine normale Anwendung auf Ihrem Computer verhalten). Sie können Ihre Codebasen (Repositorys) im Internet über Ihren Browser durchsuchen, Änderungen vornehmen, Änderungen am letzten Prüfpunkt (Commit) rückgängig machen usw.
Github stellte immer kostenlose öffentliche Repositorys zur Verfügung – was bedeutete, dass jeder Ihren Code sehen und verwenden konnte (ja, es gibt Open Source-Lizenzen, aber Sie wissen, was ich meine). Wenn Sie wirklich hart daran arbeiten, wahnsinnig coole Scheiße zu entwerfen und die Informatik neu zu erfinden, nimmt Ihr Kumpel einfach Ihren Code und verwendet ihn für seine eigene Website. Mit dem Bildungspaket können Sie jetzt 5 kostenlose private Repositories erhalten (obwohl Github diesen Service zuvor auch für .edu-Studenten bereitgestellt hat). Sehen Sie sich die Online-Tutorials an und finden Sie heraus, wie Sie ein privates Github-Repository für Ihren Website-Code einrichten.
2. Holen Sie sich Ihre kostenlose Namecheap .me Domain
Für die längste Zeit war GoDaddy der einzige Domainverkäufer, den ich kannte. Der Name kam mir immer zwielichtig vor, obwohl ich schließlich nachgab, dort eine Domain zu kaufen. Jetzt, im Zeitalter von Startups, haben wir eine bessere, sauberere und billigere Alternative – Namecheap.Namecheap war immer billig, aber jetzt können Sie eine Domain kostenlos bekommen! Holen Sie sich jetzt kostenlos Ihre firstnamelastname.me Domain, bevor Ihr sehr gebräuchlicher Name gestohlen wird (falls dies noch nicht geschehen ist). Versuchen Sie, nicht zurückzukehren bis in die 90er Jahre E-Mail-Tage und kaufen Sie eine raj2kul4skul.me . Don „t. Bitte. Die einzige Person, die beeindrucken wird, sind Freunde, ohne die Sie besser dran sind.
Habe ich schon erwähnt, dass es kostenlos ist?
3 . Holen Sie sich Namecheap SSL [optional]
Dies ist optional und ich habe es noch nicht für meine Website (da es bei GoDaddy immer noch Geld kostet). SSL (Secure Sockets Layer) ist eine schicke Sache Das bedeutet im Grunde, dass Ihr Webinhalt „sicher“ bereitgestellt werden kann. Sie erhalten auch diese coole grüne Sperre auf Ihrer Website, haben eine https Website anstelle von http und Fühlen Sie sich wirklich cool und authentisch:
Ohne zu technisch zu werden, müssen Sie Folgendes wissen: Dies ist nicht unbedingt erforderlich für Ihre persönliche Website, auf der ich bezweifle, dass Sie Dinge tun, die solch strenge Sicherheit erfordern. Wenn Sie jedoch etwas über das Web lernen, können Sie es auch. Ist es doch kostenlos?
4. Einrichten Digital Ocean Hosting.
Namecheap: GoDaddy :: DigitalOcean: HostGator.
Namecheap ist für GoDaddy genauso wie DigitalOcean für HostGator – ein legitimerer, billigerer, besser gestalteter und benutzerfreundlicherer Start Alternative. Was wird eine Domain beim Kauf für den Benutzer bereitstellen (anzeigen)? Ihre Website, richtig? Aber Sie können nicht einfach sagen, nehmen Sie diese Dateien auf meinen Computer und zeigen Sie sie ihnen. Nun, Sie können und so. Mit DigitalOcean erhalten Sie kostenloses „Hosting“. DigitalOcean nennt eine Hosting-Instanz ein „Droplet“.
Dies bedeutet, dass Sie Ihre Website auf eine virtuelle Maschine (sprich: einen Computer) hochladen und Ihre Namecheap-Domain angeben können Um den Inhalt von diesem Computer aus bereitzustellen. Ohne zu sehr ins Detail zu gehen, passiert in der Mitte eine Menge Dinge, die DigitalOcean erledigen sollte – Dinge wie das Konfigurieren und Auswählen eines Webservers – nginx oder Apache und Weiterleiten von Anforderungen in Ihrer Domain speziell an Ihre Dateigruppe.
5. Erstellen der eigentlichen Website.
Nun kommt der Teil „HTML schreiben“. Das Erstellen einer Website hat unterschiedliche Schwierigkeitsgrade – vom Anzeigen der Text „Hallo Welt“ in Arial zum Erstellen eines Facebook oder Google. Normalerweise ein int Eine eraktive Anwendung, die Daten benötigt und den Status enthält, ist schwer zu erstellen.
Was Sie tun werden, wird wahrscheinlich eine statische Site erstellen (eine Reihe derselben Texte / Bilder, die jedes Mal für alle bereitgestellt werden). Dies ist viel einfacher. Ich werde es wahrscheinlich nicht tun und kann „kein vollständiges Tutorial dafür schreiben, aber was Studenten im Allgemeinen tun, ist zu lernen und die folgenden Dinge zu verwenden –
- HTML – Dies ist der tatsächliche Inhalt von Text / Links / Bildern / Videos.
- CSS – Dadurch sieht der obige Inhalt hübsch aus.
- Javascript (JS) – Dies ermöglicht dynamische Elemente und hübsche Animationen. Angenommen, Sie möchten eine Schaltfläche erstellen, die ein Bild lädt, das nicht „t“ war in Ihrem HTML oder fügen Sie Inhalte dynamisch zu Ihrem HTML hinzu. Dann verwenden Sie JS. Eine kurze Geschichte – JS wurde damals in ungefähr 10 Tagen gehackt, und es enthält viele Fehler und kann sehr ausführlich und unhandlich sein, wenn Sie viel davon schreiben. Normalerweise verwendet ein Anfänger eine Bibliothek wie jQuery, um sie weniger ausführlich und einfach zu gestalten (obwohl jQuery mit all seinen $ -Zeichen zunächst auch einschüchternd wirken kann).
- Bootstrap – Bootstrap ist ein Frontend-Framework von Twitter. Rohes HTML kommt mit ziemlich schlecht aussehenden Dingen. Die HTML-Schaltfläche ist nicht darstellbar, und das Schreiben von CSS erfordert Zeit und Experimente (ich meine, seien wir real – niemand „kennt“ CSS WIRKLICH). Beim Bootstrap werden einige Dateien heruntergeladen, eine Zeile zu Ihrem HTML-Code hinzugefügt und möglicherweise einige gelesen Dokumentation und Hinzufügen einiger von ihnen bereitgestellter CSS-Klassen – und voila! Ihre Website sieht nicht nur automatisch viel hübscher aus, sondern kann auch für Mobilgeräte kompatibel gemacht werden (wiederum ein nicht triviales Unterfangen).
6. Online-Bereitstellung Ihrer Website (Bereitstellung) Sobald Sie mit dem Erstellen und Testen Ihrer Website lokal (auf Ihrem eigenen Computer) fertig sind, aktivieren Sie Ihren lokalen Host (lokaler Webserver – google es.Möglicherweise benötigen Sie dies nicht für statische Websites. Wenn Sie Ihr CSS mit den sehr nützlichen Chrome Developer Tools testen und mischen und mit Ihrer Ausgabe zufrieden sind, können Sie zu Digital Ocean wechseln, Ihre Website komprimieren und an Ihre senden Server. Wenn Sie alles richtig gemacht haben, warten Sie einige Sekunden und gehen Sie zu Ihrem firstnamelastname.me , und Sie sollten Ihren Inhalt sehen. Und alle anderen sollten es auch können.
7. Machen Sie Ihre großartige Website durchsuchbar (SEO)
Ein letzter Schritt ist SEO – Suchmaschinenoptimierung. Das Endziel ist es, hoffentlich einen ungewöhnlichen Namen zu haben und Ihre Website zu einem der besten Ergebnisse zu machen, wenn jemand Ihren Namen googelt. Dies kann einige Zeit dauern (kann aber jetzt zu monetären Kosten erfolgen). Es gibt eine Reihe von Möglichkeiten, dies zu tun, und Sie können für alle googeln. Es gibt Möglichkeiten, Ihr Facebook damit zu verknüpfen, Ihr altes G + -Konto, das Sie nie damit verwenden, und benutzerdefinierte Metadaten hinzuzufügen, die in Ihrer Google-Suche angezeigt werden usw. usw. Letztendlich sollten Sie innerhalb weniger Wochen, sofern Ihr Name nicht sehr häufig oder leider mit einer berühmten Person identisch ist, eines der wenigen Top-Ergebnisse bei Google sein.
Verschiedene Dinge, die Sie wissen sollten
Wenn Sie Verknüpfungen zum Erstellen einer hübschen Seite verwenden: Je nachdem, wie viel Arbeit Sie in Ihre Website investieren möchten, können Sie jederzeit eine praktische Bootstrap-Vorlage online abrufen oder Ihre eigenen CSS-Klassen von Hand erstellen, wenn Sie eine möchten einzigartiges Aussehen, oder halten Sie es einfach und entscheiden Sie sich für einfaches HTML / CSS (was eine große Anzahl von Akademikern tut). Beispiel: Jon Kleinbergs Homepage .
Wenn Sie PHP nicht kennen müssen und andere ausgefallene Dinge: Da Sie „eine statische Site entwerfen“, gibt es keine Kenntnisse über ausgefallene Dinge wie das Erstellen eines Backends, das Erstellen vieler Seiten und das Vorhandensein von Datenbanken. Ja, ich spreche mit Ihnen Leute, die PHP und MySQL ohne guten Grund verwenden möchten (auch wenn Sie es brauchen, versuchen Sie, sich von PHP fernzuhalten). Es gibt eine Reihe großartiger Backend-Frameworks, mit denen andere Arten komplizierter Websites erstellt werden können, von Ruby on Rails (in Ruby) bis Django (in Python) bis Spielen! (in Java & Scala) leichte wie CherryPy (in Python) oder Flask (in Python). Tatsächlich gibt es Frameworks für nahezu jede Sprache, die Sie sich vorstellen können – Vergleich von Webanwendungs-Frameworks , aber brennen Sie sich noch nicht aus, indem Sie sie verwenden / kennenlernen.
Weitere Dinge, die Sie zu Ihrer Website hinzufügen sollten: Andere Dinge, die Sie möglicherweise für Ihre persönliche Website tun möchten –
- Komprimieren Sie Ihre Bilder , wenn Sie viele davon verwenden, Ihre Website Das Laden dauert lange.
- Verwenden Sie soziale Plugins von Facebook / Quora / Twitter
- Google Analytics hinzufügen (dies ist eigentlich fast ein Muss). Mit Google Analytics können Sie unter anderem sehen, wie viele Personen Ihre Website besuchen, woher sie stammen usw. Es ist (hoffentlich) ein guter Motivator, um Ihre Website zu aktualisieren und auf dem neuesten Stand zu halten Sehr einfach zu bedienen – Sie müssen lediglich einige Codezeilen kopieren und in Ihre Seite einfügen.
- Minimieren Sie Ihre Skripte. Viele JS und CSS einer Site können weiterhin für jeden sichtbar sein, der Ihre Site besucht Sie haben etwas schrecklich Interessantes getan, das Sie verbergen und Ihr JS / CSS minimieren möchten. Andernfalls wird der Zweck eines privaten Repositorys ruiniert. Außerdem wird Ihre Site dadurch schneller.
- Verschlüsseln Sie Ihren HTML-Code . Wenn Sie wirklich nicht möchten, dass die Leute sehen, wie Sie Ihre Website erstellt haben, gibt es solche Möglichkeiten zum Verschlüsseln Ihres HTML-Codes. Wenn Sie also auf die Schaltfläche „Quelltext anzeigen“ klicken, wird auf Ihrer Webseite nichts Interessantes angezeigt.
Beim Schreiben dieser Antwort: Viele Leute fragen sich, wie sie ihre eigene Website erstellen sollen. Ich dachte, es wäre nützlich, ein kurzes (umstrittenes), leicht verständliches kleines Tutorial zu schreiben, um allen zu helfen. Es ist wirklich eines dieser einfachen Dinge, auf die Sie sich konzentrieren müssen. Oh, und habe ich schon erwähnt, dass es jetzt kostenlos ist?