Wie erstelle ich eine kostenlose Website mit benutzerdefiniertem Domainnamen, Hosting und SSL-Verschlüsselung?

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 ein Weg, um gestalte deine nächste Website mit einem benutzerdefinierten Domainnamen, lebenslangem kostenlosem Hosting und absolut kostenloser SSL-Verschlüsselung. Wütend! Was könnte man sonst noch verlangen?

Es ist selbstverständlich, dass eine Website Ihre Wachstumszahlen erheblich steigert, und heute ist es eher eine Investition als ein Luxus. Dies gilt nicht nur für Unternehmen, sondern auch Einzelpersonen können von einer persönlichen Website stark profitieren.

Ob Sie einen Domainnamen registrieren, die Inhalte Ihrer Website hosten, die Website erstellen oder SSL-Verschlüsselung aktivieren, sollten Sie bereit sein, Ihre Taschen zu leeren. Zusätzlich zu den Schmerzen treten einige dieser Ausgaben immer wieder auf und dauern ewig an.

Was wäre, wenn ich Ihnen sagen würde, dass Sie eine kostenlose Website erstellen können, während Sie alle oben genannten entscheidenden Schritte zum Erstellen dieser Website auch kostenlos ausführen? So weltfremd es klingen mag, all dies können Sie als Student kostenlos tun.

Wenn Sie GitHub kennen, kennen Sie vielleicht GitHub Pages. Die Nutzung des Dienstes, der mit jedem GitHub-Konto geliefert wird, ist kostenlos. Mit GitHub Pages kann jeder Benutzer eine kostenlose Website erstellen und hosten, aber es gibt einen großen Vorbehalt. Die Domainnamen dieser kostenlosen Websites enden im Wesentlichen mit github.io, was die Professionalität Ihrer Website ruiniert.

What is the GitHub Student Developer Pack?

Weniger Benutzer 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 Vorbehalte von GitHub-Seiten zu sprechen. Ich habe versprochen, dass Sie eine kostenlose Website mit dem benutzerdefinierten Domainnamen erstellen können, und so können Sie dies tun.

GitHub bietet jedem Studenten, der sich für einen Studien- oder Diplomstudiengang eingeschrieben hat, die Möglichkeit, ein fantastisches Kit mit praktischen Online-Tools zu nutzen, das als GitHub Student Developer Pack bekannt ist. Das Paket enthält Pro-Abonnements und atemberaubende Rabatte auf beliebte Tools wie canva, Namecheap, Microsoft Azure, Discord, Name.com und StreamYard, unter einer Unmenge anderer.

In diesem Artikel verwenden wir Namecheap, um eine kostenlose benutzerdefinierte Domain zu registrieren und GitHub-Seiten zum Hosten unserer Website zu verwenden. Wir werden uns dann Möglichkeiten ansehen, Ihre HTML-, CSS- und JavaScript-Dateien zu entwerfen und auf GitHub-Seiten hochzuladen. Eventuell werden wir auch die SSL-Verschlüsselung für die Website aktivieren, aber zuallererst müssen wir uns für das Student Developer Pack registrieren.

Wie beantrage ich 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 Studenten-E-Mail-Adresse endet normalerweise mit dem Domänennamen Ihrer Universität, z. B. imastudent@mywvm.wvm.edu. 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-Ausbildung und klicken Sie auf die Option Anmelden.

Sie können sich mit Ihren Zugangsdaten 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: Als nächstes registrieren Sie sich mit Ihrer Studenten-E-Mail und erstellen ein Konto.

Schritt 3: Wenn Sie aufgefordert werden, „Was beschreibt Ihren akademischen Status am besten?“ wählen Sie Student.

Schritt 4: Füllen Sie nun die erforderlichen Felder mit Details zum Namen Ihrer Schule und Ihrem Verwendungszweck von GitHub aus.

Schritt 5: Senden Sie abschließend Ihre Bewerbung über die Option „Senden Sie Ihre Daten“.

Sie sollten eine Bestätigungs-E-Mail bezüglich des Entwicklerpakets erhalten, wenn Ihr Antrag von GitHub genehmigt wird. Der Vorgang dauert in der Regel einige Tage, kann aber zu Stoßzeiten stark variieren.

Wie beantrage ich 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, Sie können sich wie folgt für das Studentenpaket bewerben:

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 Kamera-Option 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 Verwendungszweck von GitHub ein.

Schritt 4: Reichen Sie Ihre Bewerbung ein.

How to register your custom domain using Namecheap?

Ich gehe davon aus, dass Sie Ihr GitHub Education-Konto eingerichtet haben. Die folgenden Schritte beinhalten die Verwendung von Namecheap, um Ihre kostenlose benutzerdefinierte Domain zu registrieren und ü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 einjährige Domainnamenregistrierung auf der .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 zu Ihrem GitHub-Konto zu autorisieren. Autorisieren Sie Namecheap und fahren Sie mit dem nächsten Schritt fort.

Nach erfolgreicher Autorisierung sollte die Meldung „Wir haben Ihr Studentenpaket erfolgreich mit GitHub verifiziert“ sehen.

Schritt 4: Suchen Sie Ihre bevorzugte Domain über die Suchleiste und klicken Sie auf Suchen.

Auf dem nächsten Bildschirm sollte die Verfügbarkeit des Domainnamens angezeigt werden. 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 Domainnamen erfolgreich registriert und die GitHub-Seiten als Ihr 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 Themen 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 mit Web Dev auskennen und wissen, wie Sie sich durchcodieren, 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.

Wenn Sie jedoch wenig bis gar keine Informationen über Web Dev haben, sind Sie bei uns genau richtig. Sie können die folgenden Schritte ausführen und Ihre eigene Website mit etwas grundlegendem HTML erstellen:

Schritt 1: Gehen Sie zu HTML5 NACH OBEN und scrollen Sie zu dem Website-Design, das Ihnen gefällt. Sie können jedes andere vorgefertigte Thema 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.

Im extrahierten Ordner sollten Dateien namens index.html und generic.html sowie Ordner wie Assets und Bilder angezeigt werden.

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 Ihrem Browser in Echtzeit 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 ist ganz Ihren Vorlieben überlassen, aber so habe ich das „Massively“-Design von HTML5 UP angepasst und in ein Portfolio umgewandelt. Sie können sich davon inspirieren lassen oder Ihre Website ganz selbst gestalten. Es ist deine Entscheidung!

Ändern der Titel- und Absatz-Tags

Zu Beginn meines Anpassungsprozesses habe ich das Title-Tag „Massively“ geändert. Der 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 in etwas zu ändern, das Ihrer Website ähnelt.

Ich habe das Title-Tag in „Samyak Goswami | . geändert Tech Content Writer“, da es ideal zu meinem Portfolio passte. Als nächstes änderte ich den Intro-Bereich der Website, der lautete: „This is Massively“ (enthalten im H1-Tag) und machte ihn aus offensichtlichen Gründen zu „Samyak's Portfolio“. Anschließend änderte ich den Text unten in den Absatz-Tags in „Ein Schaufenster meiner Projekte und meiner Fähigkeiten“.

Im Abschnitt Navigation (Nav) in der Indexdatei habe ich zwei der drei im List-Tag enthaltenen Navigationsschaltflächen weggelassen. 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 beschloss, 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 Listen-Tags mit Twitter, Instagram und mehr scrollen.

Beachten Sie, dass diese Social-Media-Symbole keine Links enthalten, 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 das Paragraph-Tag in „Ich bin ein Technik-Enthusiast…“. Ich würde vorschlagen, dass Sie das H2-Tag mit etwas ändern, das dem Inhalt Ihrer Homepage und dem Absatz-Tag entspricht, das dies erklärt.

Wir kommen jetzt zum wichtigsten Teil dieser Anpassung; Ändern des Inhalts der Artikelkacheln.

Rufen Sie dazu den Abschnitt Posts in der Indexdatei auf, und Sie sollten mehrere Code-Snippets sehen, die in Artikel-Tags enthalten sind. Sie können Ihren Stories Links 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 mithilfe des Absatz-Tags eine Beschreibung hinzufügen.

Wiederholen Sie den Vorgang für jeden Artikel, indem Sie Links hinzufügen, Namen ändern und allen Ihren Artikeln eine Beschreibung hinzufügen.

Hinzufügen von Bildern zu Ihren Websites

Sie müssen bemerkt haben, dass sich die Vorschau stark von den Bildern auf der HTML5 UP-Website unterscheidet. Dies liegt an den flachen und langweiligen Fotos in der anpassbaren Datei. Lassen Sie uns unsere Website aufpeppen, indem wir benutzerdefinierte Bilder hinzufügen.

Navigieren Sie dazu in den Ordner, in den Sie zuvor die ZIP-Datei „Massively“ 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 verlinkt 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 den Standardbildern benennen. Die Namensgebung der Bilder erspart uns nachträgliche Code-Änderungen und viel Zeit.

Ich schlage vor, dass Sie andere Abschnitte Ihrer Website, die nicht wichtig sind, Korrektur lesen und ändern.

Nachdem Sie Ihre Website endlich codiert und gestaltet haben, ist es an der Zeit, sie auf GitHub Pages hochzuladen und im Internet live zu stellen.

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 namens your_username.github.io sehen. Gehen Sie in dieses Repository.

Schritt 3: Sie sollten eine Option zum Erstellen einer eigenen Datei oder zum Hochladen von Dateien in das GitHub-Repository sehen.

Schritt 4: Wählen Sie alle fünf Dateien und Ordner aus; Assets, Bilder, Elemente, Generic, Index und ziehen Sie sie per Drag & Drop in das Repository.

Nachdem die Dateien hochgeladen wurden, übergeben Sie den Code und warten Sie, bis GitHub Ihre Dateien verarbeitet hat.

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 zum ersten Mal live geht.

How to enable SSL encryption in GitHub Pages?

HTTP ist eine unsichere Methode zur Verwaltung von Benutzeranfragen auf Ihrer Website. Jeder mit böswilligen Absichten und fundierten technischen Kenntnissen kann die Interaktionen zwischen dem Benutzer und Ihrer Website abfangen. Auf der anderen Seite bietet HTTPS allen Ihren Besuchern eine viel sicherere Browsersitzung. GitHub-Seiten bieten kostenlose HTTPS-Verschlüsselung, und so können Sie sie nutzen:

Scrollen Sie zum Abschnitt Seiten im Repository.

Am Ende des Fensters sollte die Option "HTTPS erzwingen" angezeigt werden. Der 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 „Domain-Liste“.

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 Host als „@“ und IP-Adresse als „185.199.108.153“ hinzu. Als nächstes mit dem Hostnamen „@“ und der IP-Adresse „185.199.109.153“.

Folgen Sie dem Trend, bis Sie 4 A-Einträge bis zur IP-Adresse „185.199.111.153“ haben.

Entfernen Sie alle vorherigen A-Einträge.

Schritt 3: Als nächstes fügen Sie 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.

Zusammenfassend

GitHub bietet jedem Studenten eine fantastische Möglichkeit, eine kostenlose Website zu erstellen und zu verwalten. Obwohl Sie GitHub-Seiten nicht zum Hosten massiver Verkehrslasten verwenden können, aktiviert es jedes Kontrollkästchen für eine kleine statische Website. Der kostenlose benutzerdefinierte Domainname, das Hosting und die SSL-Verschlüsselung machen es noch schöner.

Jetzt können Sie „How to“ lesen Wählen Sie einen Webhost für Ihre neue Website.“

Hier sind einige Tools zur Überwachung der Seitengeschwindigkeit, um Sie zu benachrichtigen wenn Ihre Website ausfällt.