Das Erstellen einer Website ist eine ernsthafte Investition; Sie müssen für jeden Schritt beim Erstellen einer Website bezahlen.
Möchten Sie eine kostenlose Website für persönliches oder berufliches Wachstum erstellen? Hier ist eine Möglichkeit, Ihre nächste Website mit einem benutzerdefinierten Domainnamen, lebenslangem kostenlosem Hosting und absolut kostenloser SSL-Verschlüsselung zu gestalten. Wütend! Was könnte man sonst noch verlangen?
Es versteht sich von selbst, dass eine Website Ihre Wachstumszahlen erheblich ankurbelt, und heute ist sie eher eine Investition als ein Luxus. Dies gilt nicht nur für Unternehmen, auch Privatpersonen können von einer persönlichen Website stark profitieren.
Egal, ob Sie einen Domainnamen registrieren, den Inhalt Ihrer Website hosten, die Website erstellen oder die SSL-Verschlüsselung aktivieren, Sie sollten bereit sein, Ihre Taschen zu leeren. Zu dem Schmerz kommt noch hinzu, dass einige dieser Ausgaben wiederkehren und für immer andauern.
Was wäre, wenn ich Ihnen sagen würde, dass Sie eine kostenlose Website erstellen könnten, während Sie alle oben genannten entscheidenden Schritte beim Erstellen von Websites auch kostenlos durchführen? So weltfremd es auch klingen mag, Sie können all dies kostenlos tun, wenn Sie Student sind.
Wenn Sie GitHub kennen, kennen Sie vielleicht GitHub Pages. Es ist kostenlos, den Dienst zu nutzen, der mit jedem GitHub-Konto geliefert wird. Mit GitHub Pages kann jeder Benutzer eine kostenlose Website erstellen und hosten, aber es gibt eine große Einschränkung. Die Domainnamen dieser kostenlosen Websites enden im Wesentlichen auf github.io, was die Professionalität Ihrer Website ruiniert.
Inhaltsverzeichnis
Was ist das GitHub Student Developer Pack?
Weniger Nutzer werden Ihre Website ernst nehmen und ein unnötig langer Domainname ist nie eine gute Idee. Aber hey! Wir sind nicht hier, um über die Vorteile oder Einschränkungen von GitHub-Seiten zu sprechen. Ich habe versprochen, dass Sie eine kostenlose Website mit dem benutzerdefinierten Domainnamen erstellen können, und hier ist, wie Sie es tun können.
GitHub bietet jedem Studenten, der in einem Studien- oder Diplomkurs eingeschrieben ist, die Möglichkeit, ein fantastisches Kit mit praktischen Online-Tools zu nutzen, das als GitHub Student Developer Pack bekannt ist. Das Paket enthält unter anderem Pro-Abonnements und atemberaubende Rabatte auf beliebte Tools wie Canva, Namecheap, Microsoft Azure, Discord, Name.com und StreamYard.
In diesem Artikel werden wir Namecheap verwenden, um eine kostenlose benutzerdefinierte Domain zu registrieren und GitHub-Seiten zum Hosten unserer Website zu verwenden. Anschließend sehen wir uns an, wie Sie Ihre HTML-, CSS- und JavaScript-Dateien entwerfen und auf GitHub-Seiten hochladen können. Irgendwann werden wir auch die SSL-Verschlüsselung für die Website aktivieren, aber in erster Linie müssen wir uns für das Student Developer Pack registrieren.
Wie bewerbe ich mich für das GitHub Student Developer Pack?
Der Registrierungsprozess für das Student Developer Pack läuft darauf hinaus, eine von der Universität gewährte Studenten-E-Mail-Adresse zu haben. Eine studentische E-Mail-Adresse endet normalerweise mit dem Domainnamen Ihrer Universität, z. [email protected] Es gibt andere Möglichkeiten, sich für das Paket zu registrieren, aber sie erfordern viel längere Überprüfungszeiten als die Verwendung einer Studenten-E-Mail. Wenn Sie Ihre studentische E-Mail-Adresse bereit haben, können Sie sich wie folgt für das Paket registrieren:
Schritt 1: Gehen Sie zu GitHub-Bildung und klicken Sie auf die Option Anmelden.
Sie können sich mit Ihren Anmeldeinformationen anmelden, wenn Sie das Paket bereits haben. Andernfalls können Sie die folgenden Schritte ausführen.
Klicken Sie im Anmeldefenster auf die Option Konto erstellen.
Schritt 2: Registrieren Sie sich als nächstes mit Ihrer Studenten-E-Mail und erstellen Sie ein Konto.
Schritt 3: Wenn Sie gefragt werden „Was beschreibt Ihren akademischen Status am besten?“, stellen Sie sicher, dass Sie „Student“ auswählen.
Schritt 4: Füllen Sie nun die erforderlichen Felder mit Details zum Namen Ihrer Schule und dem Zweck der Verwendung von GitHub aus.
Schritt 5: Abschließend reichen Sie Ihre Bewerbung über die Option „Informationen übermitteln“ ein.
Sie sollten eine Bestätigungs-E-Mail bezüglich des Entwicklerpakets erhalten, wenn Ihre Anwendung von GitHub genehmigt wird. Der Vorgang dauert normalerweise einige Tage, aber die Zeit kann in Spitzenzeiten erheblich variieren.
Wie bewerbe ich mich für das GitHub Student Developer Pack ohne Studenten-E-Mail?
GitHub bietet Ihnen auch die Möglichkeit, das Paket mit einem gültigen Studentenausweis oder einem anderen Nachweis Ihres akademischen Status zu beantragen. Die einzigen Vorbehalte sind die lange Wartezeit und die höhere Ablehnungsquote. Wie auch immer, hier ist, wie Sie das Studentenpaket auf diese Weise beantragen können:
Schritt 1: Befolgen Sie die oben genannten Schritte, um ein Konto über Ihre persönliche E-Mail-Adresse zu erstellen.
Schritt 2: Laden Sie nun den Nachweis Ihres akademischen Status über die Kameraoption hoch oder laden Sie die Fotos über den Upload-Button direkt auf GitHub hoch.
Schritt 3: Geben Sie als Nächstes alle erforderlichen Details wie den Namen der Schule und den Zweck der Verwendung von GitHub ein.
Schritt 4: Senden Sie Ihre Bewerbung ab.
Wie registriere ich meine benutzerdefinierte Domain mit Namecheap?
Ich gehe davon aus, dass Sie Ihr GitHub Education-Konto eingerichtet und ausgeführt haben. Die folgenden Schritte beinhalten die Verwendung von Namecheap, um Ihre kostenlose benutzerdefinierte Domäne zu registrieren und sie über GitHub-Seiten zu hosten. Befolgen Sie diese Schritte, um Ihren bevorzugten Domainnamen zu registrieren:
Schritt 1: Melden Sie sich bei Ihrem GitHub Education-Konto an und gehen Sie zum Abschnitt Vorteile.
Sie sollten ein Web Dev Kit und ein Virtual Event Kit sehen.
Schritt 2: Gehen Sie zum Virtual Event Kit und scrollen Sie nach unten, um Namecheap zu finden.
GitHub bietet eine 1-Jahres-Domainnamenregistrierung auf .me TLD an, auf die Sie zugreifen können, indem Sie auf die Option Get Access klicken.
Schritt 3: Im folgenden Fenster werden Sie aufgefordert, die Verbindungsanfrage von Namecheap an Ihr GitHub-Konto zu autorisieren. Autorisieren Sie Namecheap und fahren Sie mit dem nächsten Schritt fort.
Nach erfolgreicher Autorisierung sollte eine Eingabeaufforderung mit der Aufschrift „Wir haben Ihr Studentenpaket erfolgreich mit GitHub verifiziert“ angezeigt werden.
Schritt 4: Finden Sie Ihre bevorzugte Domain über die Suchleiste und klicken Sie auf Suchen.
Sie sollten die Verfügbarkeit des Domainnamens auf dem nächsten Bildschirm sehen. Wenn Ihr Domainname verfügbar ist, können Sie ihn kostenlos kaufen.
Schritt 5: Bezahlen Sie mit der E-Mail-Adresse von GitHub Education und wählen Sie GitHub Pages als Ihre Hosting-Methode aus, während Sie fortfahren.
Nachdem Sie Ihren benutzerdefinierten Domänennamen erfolgreich registriert und die GitHub-Seiten als Hosting ausgewählt haben, sollte Namecheap automatisch ein Repository in Ihrem GitHub-Konto erstellen. Dieses Repository ist komplett leer und enthält nur eine README.md-Datei.
Sie können auf dieses Repository zugreifen, indem Sie sich bei Ihrem GitHub-Konto anmelden und auf den Abschnitt „Ihre Repositorys“ klicken. GitHub Pages bietet keine visuellen Tools und vorgefertigten Designs für Ihre Website; Sie müssen die gesamte Website manuell codieren und zugehörige Dateien in Ihr neu erstelltes GitHub-Repository hochladen.
Wie erstelle ich eine kostenlose Website und hoste sie auf GitHub-Seiten?
Wie oben erwähnt, müssen Sie alle HTML-, CSS- und JavaScript-Dateien für Ihre Website erstellen. Wenn Sie sich für Web Dev interessieren und wissen, wie man sich durch Codierung durcharbeitet, können Sie Ihre Dateien in Ihr GitHub-Repository hochladen und Ihre Website zum Laufen bringen. Sie können zu dem Abschnitt dieses Artikels scrollen, der sich mit dem Hochladen des Website-Codes auf GitHub-Seiten befasst.
Aber wenn Sie jemand sind, der wenig bis gar keine Informationen über Web Dev hat, sind Sie bei uns genau richtig. Sie können die unten angegebenen Schritte verwenden und Ihre eigene Website mit etwas grundlegendem HTML entwerfen:
Schritt 1: Gehen Sie zu HTML5 UP und scrollen Sie zu dem Website-Design, das Ihnen gefällt. Sie können jedes andere vorgefertigte Design von jeder Plattform auswählen. Hier habe ich „Massively“ von HTML5 UP gewählt, aber Sie können jedes Website-Design Ihrer Wahl herunterladen und anpassen.
Schritt 2: Extrahieren Sie die heruntergeladene ZIP-Datei Ihres bevorzugten Website-Designs.
Sie sollten Dateien mit den Namen index.html und generic.html sowie Ordner wie Assets und Bilder im extrahierten Ordner sehen.
Schritt 3: Öffnen Sie nun die extrahierten Dateien mit Visual Studio Code und wählen Sie die Datei index.html aus.
Schritt 4: Laden Sie die „Live Server“-Erweiterung im Visual Studio Code herunter und installieren Sie sie, falls Sie sie noch nicht haben.
Schritt 5: Wählen Sie die Datei index.html aus, klicken Sie mit der rechten Maustaste und wählen Sie die Option „In Live Server öffnen“. Mit dieser Option können Sie die Änderungen in Ihrer HTML-Datei in Echtzeit in Ihrem Browser visualisieren.
Wie passen Sie Ihr Website-Design an?
Ich werde den Prozess über diesen Punkt hinaus nicht als „Schritte“ zum Anpassen Ihrer Website bezeichnen. Das Anpassen der HTML-Dateien liegt ganz bei Ihnen, aber hier ist, wie ich das „Massively“-Design von HTML5 UP angepasst und in ein Portfolio umgewandelt habe. Sie können sich davon inspirieren lassen oder Ihre Website komplett selbst anpassen. Es ist deine Entscheidung!
Ändern der Titel- und Absatz-Tags
Zu Beginn meines Anpassungsprozesses änderte ich das Titel-Tag „Massively“. Das Titel-Tag Ihrer HTML-Datei bestimmt ihren Namen, während sie in einem Browser-Tab geöffnet wird. Der Standardtitel für Massively sollte „Massively by HTML5 UP“ lauten, und ich empfehle, ihn so zu ändern, dass er Ihrer Website ähnelt.
Ich habe den Titel-Tag in „Samyak Goswami | Tech Content Writer“, da es ideal zu meinem Portfolio passte. Als nächstes änderte ich den Intro-Abschnitt der Website, der sagte: „This is Massively“ (enthalten im H1-Tag) und machte ihn aus offensichtlichen Gründen zu „Samyaks Portfolio“. Anschließend änderte ich den Text unten in Absatz-Tags in „Ein Schaufenster meiner Projekte und meiner Fähigkeiten“.
Beim Navigieren zum Abschnitt Navigation (Nav) in der Indexdatei habe ich zwei der drei Navigationsschaltflächen ausgelassen, die im List-Tag enthalten sind. Ich wollte eine einseitige Website mit allen Details auf einer einzigen Seite erstellen, aber Sie können die Anzahl der Navigationsschaltflächen nach Belieben ändern.
Später habe ich den Text „This is Massively“ auf der Navigationsschaltfläche in „Meine Artikel“ geändert.
Ändern der Social-Media-Links und -Symbole
Sie müssen auch die verschiedenen Social-Media-Symbole auf dem Live-Server wie Twitter, Facebook, Instagram und GitHub sehen. Ich habe mich entschieden, Twitter und Facebook wegzulassen und Instagram und LinkedIn für meinen Anwendungsfall zu behalten.
Sie können die Social-Media-Symbole und ihre Links ändern, indem Sie zum Abschnitt Navigation (Nav) gehen und zu Tags mit Twitter, Instagram und mehr auflisten, die darin geschrieben sind.
Beachten Sie, dass an diese Social-Media-Symbole keine Links angehängt sind, da das href-Tag leer gelassen wird. Sie können dem href-Tag Links hinzufügen, indem Sie „#“ durch Ihren bevorzugten Link ersetzen.
Ändern des Inhalts der Homepage
Zuerst änderte ich das H2-Tag und machte es zu „Mein Name ist Samyak Goswami“ und änderte dann anschließend das Absatz-Tag zu „Ich bin ein Technik-Enthusiast …“. Ich würde vorschlagen, dass Sie das H2-Tag mit etwas ändern, das zum Inhalt Ihrer Homepage und dem Absatz-Tag passt, das es erklärt.
Wir kommen jetzt zum wichtigsten Teil dieser Anpassung; Ändern des Inhalts der Artikelkacheln.
Gehen Sie dazu zum Abschnitt Posts in der Indexdatei, und Sie sollten mehrere Code-Snippets sehen, die in Artikel-Tags enthalten sind. Sie können Links zu Ihren Storys hinzufügen, indem Sie den href-Abschnitt ändern, wie wir es beim Hinzufügen von Links zu Social-Media-Symbolen getan haben.
Später können Sie den Namen der Artikel ändern, indem Sie den Inhalt innerhalb der H2-Tags ändern. Sie können Ihren Artikeln auch eine Beschreibung hinzufügen, indem Sie das Absatz-Tag verwenden.
Wiederholen Sie den Vorgang für jeden Artikel, indem Sie Links hinzufügen, Namen ändern und eine Beschreibung für alle Ihre Artikel hinzufügen.
Hinzufügen von Bildern zu Ihren Websites
Sie müssen bemerkt haben, dass die Vorschau ganz anders aussieht als die Bilder auf der HTML5 UP-Website. Dies liegt an den ebenen und faden Fotos in der anpassbaren Datei. Lassen Sie uns unsere Website aufpeppen, indem Sie benutzerdefinierte Bilder hinzufügen.
Originalbilder
Navigieren Sie dazu in den Ordner, in den Sie zuvor die „Massively“-Zip-Datei entpackt haben. Öffnen Sie den extrahierten Ordner und gehen Sie zum Ordner Bilder. Sie sollten verschiedene Bilder mit den Namen bg, pic01, pic02 usw. sehen. Dies sind die Bilder, die mit unseren Artikeln im Artikel-Tag verknüpft sind.
Sie können entweder benutzerdefinierte Bilder hinzufügen und die Indexdatei mit den Namen dieser Bilder ändern oder die Bilder hinzufügen und sie ähnlich wie die Standardbilder benennen. Den Bildern identische Namen zu geben, erspart uns nachträgliches Ändern des Codes und viel Zeit.
Modifizierte Bilder
Ich schlage vor, dass Sie andere Abschnitte Ihrer Website, die nicht wichtig sind, Korrektur lesen und ändern. Hier ist das Portfolio, das ich mit den oben genannten Schritten erstellt habe: samyakgoswami.me.
Wie lade ich meinen Website-Code auf GitHub-Seiten hoch?
Nachdem Sie Ihre Website endgültig codiert und gestaltet haben, ist es an der Zeit, sie auf GitHub Pages hochzuladen und im Internet live zu schalten.
So können Sie Ihre Website auf GitHub Pages hochladen:
Schritt 1: Melden Sie sich bei Ihrem GitHub-Konto an und gehen Sie zum Abschnitt Meine Repositories.
Schritt 2: Sie sollten ein Repository mit dem Namen your_username.github.io sehen. Gehen Sie in dieses Repository.
Schritt 3: Sie sollten eine Option sehen, um Ihre eigene Datei zu erstellen oder Dateien in das GitHub-Repository hochzuladen.
Schritt 4: Wählen Sie alle fünf Dateien und Ordner aus; Assets, Bilder, Elemente, generisch, indizieren und per Drag & Drop in das Repository ziehen.
Nachdem die Dateien hochgeladen wurden, übertragen Sie den Code und warten Sie, bis GitHub Ihre Dateien verarbeitet.
Schritt 5: Navigieren Sie zu Einstellungen > GitHub-Seiten, um den Status Ihrer Website anzuzeigen. Sie sollten die Eingabeaufforderung „Ihre Website wird unter your_custom_domain veröffentlicht“ sehen.
Sie können jetzt zu Ihrer Webadresse gehen und selbst nach der Website suchen. Denken Sie daran, dass es einige Zeit dauern kann, bis die Website live geht.
Wie aktiviere ich die SSL-Verschlüsselung in GitHub-Seiten?
HTTP ist eine unsichere Methode zur Verwaltung von Benutzeranfragen auf Ihrer Website. Jeder mit böswilliger Absicht und fundiertem technischen Wissen kann die Interaktionen zwischen dem Benutzer und Ihrer Website abfangen. Andererseits bietet HTTPS all Ihren Besuchern eine viel sicherere Browsersitzung. GitHub-Seiten bieten kostenlose HTTPS-Verschlüsselung, und so können Sie sie nutzen:
Scrollen Sie im Repository zum Abschnitt Seiten.
Am Ende des Fensters sollte die Option „HTTPS erzwingen“ angezeigt werden. Die SSL-Verschlüsselung sollte live gehen, sobald Sie das Kontrollkästchen HTTPS erzwingen aktivieren.
Falls Sie feststellen, dass die Option HTTPS erzwingen für Ihre Domain nicht verfügbar ist, können Sie die SSL-Verschlüsselung mit den folgenden Schritten aktivieren:
Schritt 1: Melden Sie sich bei Ihrem Namecheap-Konto an und gehen Sie zum Abschnitt „Domainliste“.
Schritt 2: Navigieren Sie nun zu Manage Domain und anschließend zum Abschnitt „Advanced DNS“.
Sie sollten einige vorhandene CNAME- und A-Einträge sehen.
Fügen Sie die folgenden A-Einträge mit dem Host als „@“ und der IP-Adresse als „185.199.108.153“ hinzu. Der nächste mit dem Hostnamen „@“ und der IP-Adresse als „185.199.109.153“.
Folgen Sie dem Trend, bis Sie 4 A-Datensätze bis zur IP-Adresse „185.199.111.153“ haben.
Entfernen Sie alle vorherigen A-Einträge.
Schritt 3: Fügen Sie als Nächstes einen CNAME-Eintrag mit Host als „www“ und Wert als Ihren GitHub-Benutzernamen (Punkt) github (Punkt) io hinzu.
Entfernen Sie die vorherigen CNAME-Einträge. Am Ende sollten Ihre DNS-Einstellungen 4 A-Einträge und 1 CNAME-Eintrag haben.
Schritt 4: Gehen Sie nun zu den GitHub-Seiten im Abschnitt Einstellungen. Die Option HTTPS erzwingen sollte jetzt für Ihre Domain verfügbar sein.
Fazit 👈
GitHub bietet jedem Studenten eine fantastische Gelegenheit, eine kostenlose Website zu erstellen und zu verwalten. Obwohl Sie GitHub-Seiten nicht zum Hosten massiver Verkehrslasten verwenden können, werden alle Kontrollkästchen für eine kleine statische Website aktiviert. Der kostenlose benutzerdefinierte Domainname, das Hosting und die SSL-Verschlüsselung machen es noch schöner, es zu haben.
Jetzt können Sie „So wählen Sie einen Webhost für Ihre neue Website“ lesen.
Hier sind einige Tools zur Überwachung der Seitengeschwindigkeit, die Sie benachrichtigen, wenn Ihre Website ausfällt.