Starte deine Website kostenlos mit GitHub Pages

1. Einführung: Willkommen zu dem Kurs, in dem ich dir beibringe, wie du deine Website kostenlos mit GitHub Pages hosten kannst , mit deiner.com oder einer anderen Domain. Aber es gibt einen kleinen Haken. Sie können nur statische Websites hosten, die auf HTML, React, Angular oder ähnlichen Technologien basieren . Sie können jedoch auch API-Aufrufe durchführen, um anzuzeigen, ob Börsendiagramme usw. Im Wesentlichen können Sie keine dynamischen Websites hosten , die Datenbanken wie MySQL oder Technologien wie PHP, WordPress, Larval, Nun, musst du Git auf deinem System installiert haben , damit das funktioniert? Und die kurze Antwort lautet nein. Du brauchst nur deine statischen Webseiten-Dateien bereit? Eine Domain, die völlig optional ist, Ihre Website-URL sieht so aus. Wenn Sie keinen Domain-Benutzernamen haben.. io, und es wird so aussehen, wenn Sie dies tun. Und ein GitHub-Konto, das ist alles. Mein Name ist Shelby wird vermutet ich ein Full-Stack-Entwickler, Produktivitätslehrer und ehemaliger Startup-Gründer bin. Ich habe viele andere Kurse hier auf Skillshare. Schauen Sie sie sich unbedingt an. Und Sie können auch meine Website besuchen, Shelter, we've dot com, um mehr über mich zu erfahren. Lassen Sie uns jetzt direkt in den Kurs einsteigen und Ihre Website auf GitHub Pages hosten. 2. Git vs Github: Was ist der Unterschied zwischen Git und GitHub wird es bekommen, da die Software, die Sie auf Ihren Computer herunterladen , um Änderungen in Ihrem Code zu verfolgen, wenn Sie eine Website, Software oder App entwickeln , die Ordner, die es verfolgen soll, heißen Git-Repos. Github hingegen ist eine Website, auf der Sie diese waffenfreien Posen oder Ordner auf ihrer Website hosten können , um mit anderen Entwicklern am selben Projekt zusammenzuarbeiten . Für diese Klasse müssen wir Git nicht installieren. Wir benötigen nur ein GitHub-Konto. 3. Anmelden & ein Repo auf Github erstellen: In Ordnung, um Ihre Website auf GitHub-Seiten zu hosten , benötigen Sie ein GitHub.com-Konto. Und dafür meldest du dich auf GitHub.com an, gibst deine E-Mail-Adresse und klickst auf Für GitHub registrieren, was ich hier ganz schnell machen werde. Und klicken Sie auf Für GitHub registrieren. Okay, es zeigt dir eine sehr coole Animation, die besagt: Willkommen beim Aufstehen, lass uns das Abenteuer beginnen. Und deine E-Mail. Die E-Mail wurde automatisch entgegengenommen. Also klicke ich auf Weiter. Jetzt müssen wir hier ein Passwort erstellen. Also erstelle ich ein Passwort und klicke auf Weiter. Jetzt heißt es, gib einen Benutzernamen ein. Denken Sie also daran, dass der bewässerte Benutzername, der hier eingegeben wird, Ihre GitHub Pages-Website-Adresse ist. Was ich damit meine ist, dass zum Beispiel, wenn ich Skillshare GHP schreibe, Skillshare GHP nicht verfügbar ist. Also versuche ich es mit Skillshare GitHub. In Ordnung. Skillshare GitHub ist also verfügbar. Meine GitHub-Seiten-URL lautet also Skillshare, GitHub, GitHub, io. Okay, welcher Benutzername auch immer du hier eingibst wird deine GitHub Pages-URL sein, okay? Es sei denn natürlich, Sie registrieren eine.com oder was auch immer. Also klicke ich hier auf Weiter. Und dort steht: Möchten Sie Produktupdates und Ankündigungen per E-Mail von y für ja oder N für nein erhalten Produktupdates und Ankündigungen ? Also tippe ich N ein und klicke auf Weiter. Jetzt heißt es, dass Sie dieses Rätsel lösen müssen, um Ihr Konto zu verifizieren . Klicken Sie hier auf Puzzle starten. Die Spiralgalaxie. Okay, noch einmal und wir sind fertig. Klicken Sie also hier auf Konto erstellen. In Ordnung, du bist also fast fertig. Wir senden einen Startcode, um die Leap Dot Skillshare bei Bruder Don't mail.com zu schließen . Also gehe ich zu meinem Protonen-Männchen in Markierungen. In Ordnung, wir haben also die E-Mail von GitHub mit dem Startcode erhalten . Und der Startcode lautet: Also kopiere ich das einfach von hier und füge es hier ein. In Ordnung, das war's. Ich klicke einfach auf Personalisierung überspringen. Ja, das war's. Okay, wir sind fertig mit der Erstellung unseres GitHub.com-Accounts. Jetzt müssen wir ein Repository erstellen, in wir die Dateien unserer Website hochladen. Klicken Sie also hier auf Repository erstellen. In Ordnung, wenn Sie also ein Repository erstellen , um Ihre Website auf GitHub-Seiten zu hosten , müssen Sie einige Einstellungen beachten. Die allererste und wichtigste Sache, die Sie hier beachten müssen, ist der Name des Repositorys. Der Name des Repositorys ist also Ihr Benutzername.github.io. Mein Benutzername, den ich hier erstellt habe , ist Skillshare get up, was genau hier angezeigt wird. Also schreibe ich einfach das Gleiche. Skillshare, github.github.io. Ordnung, das ist also verfügbar und Sie müssen hier eine Beschreibung schreiben, die wiederum optional ist. Aber ich werde Skillshare schreiben eine Demowebsite für Alterskurse besorgen. Und ich klicke auf Create Repository und stelle sicher, dass dieses öffentlich nicht privat ist, was auch wichtig ist. Sie können eine Readme-Datei erstellen, aber das ist absolut optional. Jetzt müssen wir nur noch auf Create Repository klicken. In Ordnung, wir haben erfolgreich unser Repo Skillshare erstellt , github.github.io. Und in der nächsten Lektion werden wir hier Website-Dateien hochladen. Ordnung, wir sehen uns in der nächsten. 4. website hochladen: Okay, jetzt müssen wir unsere Website-Dateien auf GitHub.com hochladen . Also habe ich hier diese kleine Website erstellt, die ich Ihnen ganz schnell zeigen werde. Dies ist also nur eine statische Website , die besagt, dass diese Website lebenslang kostenlos auf GitHub Pages gehostet wird . Sie werden die Größe des Host-ID-Griffs festlegen und Hilfe erhalten, um mehr zu erfahren. Ei diesen Skillshare Kurs für Schuss darauf. In Ordnung, ein bisschen Marketing. Und Sie können von hier aus auch einfach so APA-Anrufe tätigen. Das ist also ein Wetter-API-Aufruf , den ich von hier aus tätigen werde . Vielleicht schreibst du einen Städtenamen, zum Beispiel San Jose, und klickst auf Suchen. Und es wird dir das Wetter für San Jose zeigen. Okay, das ist ein API-Aufruf, den ich mache, um die Wetter-API zu öffnen. Und das basiert auf einem kostenlosen Bootstrap-Thema , das Gott fest startetbootstrap.com, diese Website hier. Und das ist das Thema , das ich benutzt habe. Also habe ich Code bearbeitet und ihn so aussehen lassen. Und die API, die ich hier erstellt habe. Also werden wir diese Website auf GitHub hochladen. Kehren wir also zu GitHub zurück und klicken hier auf Eine vorhandene Datei hochladen. Jetzt müssen wir Dateien hierher ziehen , um sie zu Ihrem Repo hinzuzufügen. Was wir hier also tun werden , ist, dass wir es einfach im Vollbildmodus schaffen. Und ich bin hier. Dies ist der Ordner, der alle meine Website-Dateien enthält. Also wähle ich einfach alles aus und ziehe es an diesen Ort auf GitHub.com. In Ordnung, wie Sie sehen können, werden die Dateien jetzt hochgeladen. Also mache ich es wieder im Vollbildmodus. In Ordnung, also ist jetzt alles hochgeladen. Jetzt müssen wir hier einen Kommentar abgeben. Sie müssen hier eine Commit-Nachricht schreiben. Also werde ich die erste Version schreiben. In Ordnung, und klicken Sie auf Änderungen übernehmen. In Ordnung, Github bearbeitet jetzt unsere Dateien. Es kann ein paar Sekunden dauern. Ja, wir sind fertig. In Ordnung, alle unsere Website-Dateien sind jetzt hochgeladen und wir sind bereit, unsere GitHub Pages-Website zu starten. Wir sehen uns also im nächsten. 5. github.io Website einführen: In Ordnung, alle unsere Website-Dateien werden jetzt auf GitHub hochgeladen. Und wir sind bereit, unsere GitHub Pages-Website zu starten. Um das zu tun, müssen wir hier auf Einstellungen klicken und zu den Seiten gelangen. In Ordnung, es heißt, dass Ihre Website bei Skillshare GitHub, Github Dot IO, veröffentlicht wurde. Wenn Sie also hier klicken, wird unsere Website gestartet. Diese Website wird kostenlos auf GitHub-Basis gehostet, und Sie können von hier aus auch API-Aufrufe tätigen. Und genau wie ich es Ihnen auf meiner lokalen Website gezeigt habe, nämlich diesem San Jose. Also lass uns hier etwas anderes versuchen. Lass es uns in London versuchen. Und klicken Sie auf Suchen. Ja, es funktioniert. Unsere API-Aufrufe funktionieren von dieser GitHub Pages-Website aus. Wie ich schon ganz früher getan habe , ist dein Benutzername.github.io deine GitHub Pages-Website, wie du sie hier siehst deine GitHub Pages-Website, wie du sie hier siehst, Verwandtschaft github.github.io. Okay, lass mich hier auf diesen Zurück-Button klicken. In Ordnung, wir haben unsere Website erfolgreich gestartet. Das ist gut. Klar, github.github.io. Und das wird immer so bleiben. Wenn Sie also eine statische Website oder eine Unternehmenswebsite haben, können Sie auf GitHub-Seiten hosten, genau wie ich es Ihnen hier gezeigt habe. Ordnung, also werden wir in der nächsten Lektion einen benutzerdefinierten Domainnamen für unsere Website erstellen . Ich möchte also nicht, dass es wie Skillshare aussieht, github.github.io. Daher verwenden wir eine benutzerdefinierte Domain für unsere GitHub Pages-Website. Das kommt also in der nächsten Lektion. 6. Benutzerdefinierte domain: In Ordnung, wir haben unsere Website bei Skillshare, github dot github dot io, erfolgreich gestartet . Und jetzt sind wir bereit, unsere benutzerdefinierte Domain einzurichten. Okay, ich gehe hier zu meinem GoDaddy-Konto und habe diese GitHub Pages Punkt-Live-Domain für diesen Kurs gekauft . Und ich werde diesen Domainnamen einfach von hier kopieren. Und ich füge es hier ein und klicke auf Speichern. In Ordnung, jetzt können wir sehen, dass wir einen Fehler haben besagt , dass die DNS-Überprüfung nicht erfolgreich war da die DNS-Einträge innerhalb unserer Domain nicht gemindert wurden. Was werden wir also hier machen? Wir werden die DNS-Datensätze verringern. Das erste, was wir tun werden, ist auf Weitere Informationen zu klicken. Also klicke ich einfach mit der rechten Maustaste auf Weitere Informationen und klicke auf Link öffnen in neuem Tab. Und kommen Sie zu dieser Seite der Aufschrift Verwalten Sie Ihre benutzerdefinierte Domain. Scrollen Sie ganz nach unten bis hier, wo ein Datensatz steht. Kopieren Sie jetzt eines davon und rufen Sie Ihr GoDaddy- oder Domain-Anbieter-Konto auf, das Sie haben. Ich klicke hier einfach auf diese drei Punkte und dann auf DNS verwalten. Das gleiche Verfahren gilt also für alle Domain-Anbieter. Sie müssen sich also keine Sorgen machen. Gehen Sie einfach zu DNS verwalten innerhalb Ihres Domain-Anbieters. Und jetzt müssen wir die Datensätze hier aktualisieren, die DNS-Einträge enthalten. Also klicke ich einfach auf Hinzufügen. Wählen Sie einen Typ, den ein Name haben soll. Und der Wert ist die IP-Adresse, die ich von der GitHub Pages-Website kopiert habe und auf Datensatz hinzufügen klicke. In Ordnung, der Datensatz ist jetzt aktualisiert. Wir müssen hier noch eine Änderung vornehmen. Sie können hier also sehen, dass wir einen Live-CNAME-Datensatz für GitHub-Seiten haben . Wir müssen den CNAME-Eintrag aktualisieren. Klicken Sie also einfach auf Bearbeiten und dieser Wert ist die URL Ihrer GitHub Pages-Website, was entscheidend ist. github.github.io. Also habe ich das kopiert und füge es hier ein und klicke auf Speichern. Der Typ wird also C-Name sein, Name ist www Werte können github.github.io teilen und klicken Sie einfach auf Speichern. In Ordnung, also ist es aktualisiert, aber es wird nicht sofort funktionieren. Es dauert zwischen ein paar Minuten und 24 Stunden. Wir müssen also ein bisschen warten , bis diese Änderungen eintreten. In Ordnung, versuchen wir also, unsere Website GitHub Pages dot live zu öffnen . Und in der GitHub-Einstellung räumlich, damit Sie sehen können, dass Ihre Website bereit ist , auf GitHub Pages dot live veröffentlicht zu werden. In Ordnung, ich klicke einfach mit der rechten Maustaste hier und klicke auf Link öffnen in neuem Tab. In Ordnung, also unsere Website ist live auf GitHub Pages dot live. Wie cool ist das? Jetzt haben wir eine benutzerdefinierte Domain für unsere GitHub Pages-Website. Und wir können auch von Skillshare Github Dot Github Dot IO auf diese Website zugreifen . Aber als ich die URL der Website eingegeben habe, ändert sie sich automatisch, um eine Basislebensdauer zu erhalten. In Ordnung, versuchen wir also, einige API-Aufrufe von dieser Website aus zu tätigen . Also klicke ich einfach auf APA-Anrufe und tippe den Namen der Stadt ein, um zu sehen, ob sie funktioniert oder nicht. Also bleibe ich in Kalkutta. Also schreibe ich einfach Kalkutta und klicke auf Suchen. Es funktioniert Leute. Wie Sie sehen können, funktioniert alles perfekt und wir haben erfolgreich unsere GitHub Pages-Website erstellt und eine benutzerdefinierte Domain konfiguriert. Wie cool ist das? Wenn wir jetzt irgendwo festsitzen, kannst du jederzeit zurückkommen und dir diesen Kurs noch einmal ansehen. Okay, wir sehen uns in der nächsten Lektion, die die letzte Lektion dieses Kurses sein wird. 7. Tipps, Vor- und Nachteile: In dieser Lektion gebe ich einige Tipps zur besseren Verwaltung Ihrer GitHub Pages-Website. Wenn Sie also in Zukunft Änderungen an Ihrer Website vornehmen möchten , wie werden Sie das tun? Jetzt gibt es mehrere Möglichkeiten, dies zu tun. Sie können einfach zu Ihrem GitHub-Repo gehen und auf die Datei klicken , die Sie bearbeiten möchten. Wenn ich also diese Datei index.html bearbeiten möchte, klicke ich einfach hier. Und es bringt mich zu dieser Code-Editor-Seite von index.html. Jetzt können Sie auf diesen Stift klicken. Ich kann diese Datei bearbeiten, oder Sie können auch E auf Ihrer Tastatur drücken, E zum Bearbeiten. Also drücke ich einfach E und dann kann ich diese Datei bearbeiten. Also zum Beispiel, wenn ich auf meine Website zurückkehre und diese lebenslange Sache hier einfach löschen möchte. Also gehe ich einfach zurück zu meinem Code-Editor und suche nach dem Leben. Ja, hier ist es. Ich wähle das einfach aus. Löschen. Ja, das war's. Also werde ich einfach die Änderungen übernehmen. Also schreibe ich einfach für das Leben gelöscht und klicke auf Änderungen übernehmen. In Ordnung, also wurde unser Commit gemacht. Wenn ich jetzt zu meiner GitHub Pages-Website zurückkehre meiner GitHub Pages-Website und hier auf dieses Aktualisierungssymbol klicke. Und es ist immer noch dasselbe, weil die Änderungen nicht sofort ausgeführt werden. Es dauert ein bisschen, bis die Änderungen vorgenommen werden. Wir werden also eine Weile warten und erneut auf Aktualisieren klicken. In Ordnung. Wie Sie sehen können, haben die Änderungen, die aktualisiert wurden, kaum eine Minute gedauert. Jetzt gehe ich zurück zu GitHub und klicke auf mein Repo. Sie können hier auch eine aktualisierte Datei hochladen. Also gehe ich einfach zurück zu meinem Ordner, in dem ich diese Website erstellt habe , und bearbeite diese Datei index.html. Also werde ich einfach mit Sublime Text eröffnen. Und okay, also steh Seiten hoch. Ich werde nur den Titel von GitHub-Seiten ändern um Ihre Website mit einem Vegas-Raster zu hosten. Und scrolle hier runter. Und ich füge hier einfach einen Smiley hinzu. Ja, das war's. Und das war's auch schon. Ich klicke einfach auf Save Command S für meinen Fall. Und ich werde einfach den Vollbildmodus beenden. Und ich kann es einfach anklicken und hierher ziehen. In Ordnung. Vielleicht schreibe ich Version 2 und klicke auf Änderungen übernehmen. Okay, jetzt wie Sie sehen können, wird Version 2 neben unserer Datei index.html angezeigt. Wenn ich jetzt zu meiner GitHub Pages-Website zurückkehre und auf Aktualisieren klicke. In Ordnung, es wird noch einen Moment dauern , bis die Änderungen aktualisiert sind. Also warten wir eine Weile und klicken erneut auf Aktualisieren. Klicken wir auf „Aktualisieren“. In Ordnung, unsere Änderungen wurden aktualisiert. Jetzt heißt es im Titel: Hosten Sie Ihre Website mit GitHub Pages. Und unser Smiley ist auch hier hinzugefügt. Auf diese Weise können Sie Änderungen an Ihrer GitHub Pages-Website vornehmen. Lassen Sie mich jetzt zu meinem GitHub-Repo zurückkehren. Jetzt für den Fall, dass Sie sich die vorherigen Versionen oder Änderungen ansehen möchten , die Sie bisher vorgenommen haben. Sie können einfach auf dieses Uhrsymbol klicken , das Commits anzeigt. Es zeigt Ihnen alle vorherigen Kommentare, die abgegeben wurden. Ich kann einfach auf diese Ansicht klicken komm und kritzelt hier. Und es zeigt mir, welche Zeile gelöscht wurde, die einen rötlichen Hintergrund hat und welche Linien hinzugefügt wurden , die diesen grünen Hintergrund haben. Okay? Wenn Sie also zurückgehen, können Sie sich auch die vorherigen Kommentare ansehen und die Änderungen anzeigen. Lassen Sie uns nun über einige Vor- und Nachteile der Verwendung von GitHub-Seiten zum Hosten Ihrer Website sprechen. Die Vorteile sind, dass es kostenlos ist. Sie müssen keinen Cent ausgeben, um Ihre Website hier zu hosten. Sie können Ihre benutzerdefinierte Domain einrichten, damit Ihre Website-URL professionell und übersichtlich aussieht. Sie erhalten ein kostenloses SSL-Zertifikat. Es ist blitzschnell. Ihre Website wird im Handumdrehen geladen. Änderungen an Ihrer Website vorzunehmen ist sehr einfach, wie ich Ihnen hier bereits gezeigt habe. Du kannst auch APA-Anrufe tätigen, aber du kannst nur statische Websites auf GitHub-Seiten hosten. 8. Class & -abschluss: Hey, ich hoffe dir gefällt der Kurs. Jetzt ist es Zeit für dich, deine eigene Website auf GitHub Pages zu hosten und Screenshots mit der Klasse zu teilen. Ich freue mich darauf , sie zu überprüfen wenn Sie vor Herausforderungen stehen, direkt für mich hier im Diskussionsbereich auf Skillshare. Und ich helfe dir. Oder du kannst auch zurückkommen und dir diese Lektion hier auf Skillshare noch einmal ansehen . Hoffe dir hat der Unterricht gefallen. Schau dir meine anderen Kurse hier auf Skillshare an. Und vielen Dank, dass Sie an diesem Kurs teilgenommen haben.