Erstelle Deine Website mit GitHub Pages im Jahr 2026 | Arno Pretorius | Skillshare

Playback-Geschwindigkeit


1.0x


  • 0.5x
  • 0.75x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Erstelle Deine Website mit GitHub Pages im Jahr 2026

teacher avatar Arno Pretorius, IT Freelancer

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Einführung in den Kurs

      2:06

    • 2.

      Erstellen Sie ein kostenloses GitHub-Konto

      3:22

    • 3.

      Erstellen eines GitHub-Repositories

      3:59

    • 4.

      Konfigurieren von GitHub Desktop und Synchronisieren unseres Quellcodes

      9:53

    • 5.

      Starten Sie Ihre erste Website

      4:08

    • 6.

      Bearbeiten von Aktualisierungen Ihrer Website

      4:10

    • 7.

      Erstellen eines eigenen Projekts

      0:38

    • 8.

      Vielen Dank!

      0:43

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

19

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Was du brauchst:

Dieser Kurs richtet sich an Entwickler, die ihre Website zum ersten Mal mit GitHub Pages bereitstellen möchten.

Idealerweise sollten Sie eine Website/ein Projekt bereitstellen!

Ein Desktop- oder Notebook-Computer mit Internetverbindung ist erforderlich – keine erweiterte Ausrüstung erforderlich.


Was du lernen wirst:

Erfahren Sie, wie Sie Ihre erste Website mit GitHub Pages starten. Lernen Sie die Kernkonzepte von GitHub kennen und erwerben Sie praktische Kenntnisse in der Webentwicklung, um eine funktionale, personalisierte Website von Grund auf neu zu erstellen.

Was Sie tun werden:

Setzen Sie Ihr Wissen mit praktischen Übungen in die Praxis um, vertiefen Sie Schlüsselkonzepte und veröffentlichen Sie Ihre Website selbstbewusst unter https://username.github.io

Schließlich erstellen Sie im Abschnitt "Projekte und Ressourcen" Ihr eigenes Projekt. Hier nehmen Sie die erlernten Fähigkeiten zur Hand, um etwas Nützliches für sich selbst zu entwerfen und zu bauen, und fügen alles auf eine praktische und personalisierte Weise zusammen.

Vorteile des Kurses:

Dieser Kurs umfasst:

  • Praktische Übungen zur Anwendung Ihres Wissens
  • Insgesamt 8 Lektionen

Über Ihren Kursleiter:

Ich bin Berater für Softwareentwicklung und ehemaliger Informatiklehrer mit einer Leidenschaft für Webentwicklung, Cloud Computing und DevOps. Ich konzentriere mich auf die Vermittlung praktischer Fähigkeiten, die den Teilnehmern helfen, das Gelernte selbstbewusst in reale Projekte anzuwenden.

Ich habe einen BSc in Informationstechnologie und ein Postgraduate Certificate in Education (PGCE), was mir eine solide Grundlage sowohl in Technologie als auch in Lehre bietet. Außerdem bin ich AWS-zertifizierter Lösungsarchitekt und -entwickler und bringe in alles, was ich tue, echte Branchen- und Cloud-Erfahrung ein.

Möchten Sie mehr erfahren?

Wenn dir dieser Kurs gefallen hat und du in Zukunft möglicherweise weitere Kurse auf dem Laufenden bleiben möchtest, folge mir bitte auf Skillshare!

Triff deine:n Kursleiter:in

Teacher Profile Image

Arno Pretorius

IT Freelancer

Kursleiter:in

Arno is an IT freelancer and former computer science teacher specialising in web development, cloud computing, and DevOps. He focuses on practical, hands-on teaching that helps learners turn knowledge into real-world projects.

He holds a BSc in Information Technology and a Postgraduate Certificate in Education (PGCE), and is an AWS Certified Solutions Architect and Developer, bringing real-world cloud and industry experience to his teaching.

To stay up to date with his courses you can follow his Skillshare profile to receive the latest updates and announcements.

Vollständiges Profil ansehen

Level: All Levels

Kursbewertung

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen auf Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung in den Kurs: Willkommen zum Kurs Launch Your Website with GitHub Pages. Ich bin Anna Pretoris, eine IT-Freelancerin und ehemalige Informatiklehrerin Und in diesem Kurs werde ich Sie durch eine der einfachsten und effektivsten Möglichkeiten führen der einfachsten und effektivsten Möglichkeiten Ihre allererste Website online zu veröffentlichen Wenn Sie jetzt bereits eine Website oder ein Projekt zur Bereitstellung bereit haben , sind Sie hier genau richtig. Sie benötigen lediglich einen Computer mit Internetverbindung, mehr nicht. GitHub Pages ist jetzt kostenlos, schnell und ideal für Anfänger, die eine persönliche Website, ein Portfolio oder ein Projekt mit Zuversicht veröffentlichen möchten . In diesem Kurs lernst du nun, wie Github funktioniert, wie GitHub Pages Websites hostet und wie du deine Website unter deinem Benutzernamen dotgigub dot veröffentlichst Jetzt werde ich Sie Schritt für Schritt durch alles führen und jedes Konzept auf klare und einfache Weise erklären, damit Sie sich bei dem, was Sie tun, immer sicher fühlen Sie werden lernen, wie Sie Ihre Dateien hochladen, Ihr Projekt verwalten, Aktualisierungen vornehmen und dafür sorgen, Ihre Website am Leben bleibt und organisiert bleibt. Jetzt beinhaltet jede Lektion praktische Übungen, um Ihr Verständnis im Laufe der Zeit zu vertiefen. Und am Ende des Kurses wissen Sie nicht nur, wie Sie Ihre Website veröffentlichen, sondern auch, wie Sie sie pflegen und jederzeit verbessern können. Sobald Sie den Bereich Projekte und Ressourcen erreicht haben, werden Sie alles zusammenstellen, indem Ihr eigenes Abschlussprojekt erstellen, eine Live-Website, die personalisiert, funktionell und bereit ist , mit der Welt geteilt zu werden. Dieser Kurs umfasst praktische Laborübungen und acht Schwerpunktlektionen , die Sie in einem angenehmen und gleichmäßigen Tempo durch den Prozess führen sollen . Ich bin hier, um die Webentwicklung und -bereitstellung einfach und unterhaltsam zu gestalten, unabhängig von Ihrem Erfahrungsniveau. Vertrauen Sie mir also, Sie sind in guten Händen und wir sehen uns auf dem Kurs. 2. Erstellen Sie ein kostenloses GitHub-Konto: Hallo zusammen. Willkommen zur nächsten Vorlesung, die sich auf die Erstellung eines kostenlosen GitHub-Kontos konzentrieren wird . Nur um Ihnen einige Informationen auf GitHub zu geben: GitHub ist im Wesentlichen eine Website, ist im Wesentlichen eine Website die Git-Repositorys online hostet Es ist im Grunde wie Cloud-Speicher und soziale Netzwerke für Code. Was Sie also mit GitHub tun können, ist dass Sie Ihre Projekte sicher speichern können. Sie können sie auch mit anderen teilen und mit Teams auf der ganzen Welt zusammenarbeiten. In Ordnung. Also lass uns weitermachen und anfangen. Sie möchten zunächst zu github.com gehen. Dann kannst du sagen, melde dich an. Und dann kannst du dich bei GitHub anmelden. Sie können entweder mit Google weitermachen. Wenn Sie Ihr Google-Konto haben, oder Sie können manuell ein E-Mail-Passwort, einen Namen und Ihre Region eingeben . Sie können auch entscheiden, ob Sie die E-Mail-Einstellungen so einrichten möchten, dass E-Mail-Einstellungen so einrichten möchten gelegentlich Produktupdates und Ankündigungen erhalten, und Sie können Ihr Konto erstellen, oder? Also, was ich hier tun werde, ist, diese Felder hier auszufüllen und es manuell zu machen, und dann werde ich ein Konto erstellen. Also lass uns weitermachen und das einrichten. In Ordnung. Also habe ich hier einige Basisinformationen eingegeben , nur auf manuelle Weise. Und jetzt werde ich sagen, Konto erstellen. Die Überprüfung wird einen Moment dauern. Okay. Und natürlich müssten Sie normalerweise auch ein Rätsel lösen und von diesem Punkt aus weitermachen. Warten wir also einfach, bis der Prozess hier abgeschlossen ist, und dann können wir weitermachen . In Ordnung. Jetzt, da unser Browser verifiziert wurde, können wir unser Konto entweder über ein visuelles Rätsel oder ein Audiorätsel verifizieren . Also werde ich jetzt mein Konto verifizieren und wir sehen uns dann in der nächsten Phase. Ordnung, also nachdem Sie Ihr Konto verifiziert haben, müssen Sie dann Ihre E-Mail-Adresse verifizieren Also gehe ich zu einer Beispiel-E-Mail-Adresse , die ich hier habe, und werde sie einfach neu laden Hier haben wir einen Startcode, den wir verwenden können. Ich wollte es beenden. In Ordnung. Wir können jetzt sehen, dass unser Konto erfolgreich erstellt wurde , und jetzt können wir uns anmelden, um fortzufahren. Jetzt möchten Sie nur noch Ihren Benutzernamen oder Ihre E-Mail-Adresse eingeben und dann hier ein Passwort eingeben, das Sie zuvor bei der Einrichtung Ihres Get up-Kontos festgelegt haben . Ordnung. Sobald Sie Ihre Zugangsdaten eingegeben haben, können Sie einfach „ Anmelden“ sagen. Und da haben wir's. Jetzt befinden wir uns auf unserem GitHub-Dashboard wo wir unser Repository erstellen und loslegen können . Das war's für dieses Video. So können Sie ein kostenloses GitHub-Konto erstellen . Jetzt bin ich natürlich ausführlicher darauf eingegangen, um sicherzustellen, dass Sie GitHub mit allen erforderlichen Schritten so einfach wie möglich einrichten können . Wenn Sie sich nun entscheiden, mit Google fortzufahren, anstatt all die manuellen Schritte wie ich durchzuführen, können Sie das natürlich Google fortzufahren, anstatt all die manuellen Schritte wie ich durchzuführen, auch tun. Aber ich wollte einfach so sein, wie ich kann, aber so kannst du weitermachen und dein kostenloses GitHub-Konto einrichten. 3. Erstellen eines GitHub-Repositorys: Hallo zusammen und willkommen zur nächsten Vorlesung, die sich auf die Erstellung eines Github-Repositorys konzentrieren wird . Sie fragen sich wahrscheinlich, was das GitHub-Repository ist? Ein GitHub-Repository ist einfach wie ein Ordner auf Github, in dem sich Ihr Projekt befindet, und dieser wird Ihren Quellcode und all Ihre Codedateien enthalten . Am einfachsten kann man es sich als eine Projektbox vorstellen , in der alles, was mit Ihrem Projekt zu tun hat, gespeichert und organisiert wird. Heutzutage bezeichnen die Leute GitHub-Repositorys normalerweise als Repos Wenn du jemals den Begriff Repos hörst, der häufig verwendet wird, synchronisiere das GitHub-Repository in diesem Kontext Okay, lassen Sie uns weitermachen und unser Repository erstellen. Sie können hier sagen, dass Sie ein Repository erstellen. Dann siehst du es auf der linken Seite, lass es mich hier ein bisschen zoomen. der linken Seite siehst du den Benutzernamen, den du mit deinem GitHub-Konto verknüpft hast, und dann musst du hier einen Repository-Namen angeben. Du kannst weitermachen und hier klicken und ich nenne dieses Beispiel Okay. Und das wird mein Repository-Name sein, Beispiel, wir können es als Beispiel Sample Repo nennen Dann kannst du hier eine Beschreibung geben. Also werde ich es sehr einfach halten. Ich werde nur Portfolio-Anwendung sagen. Sehr einfach. Und dann können Sie hier die Sichtbarkeit wählen. Wenn Sie also weitermachen und Ihren Quellcode in dieses Repository übertragen , das hier als Beispiel-Repo bezeichnet wird, können Sie den Status entweder auf öffentlich setzen, was bedeutet, dass natürlich jeder auf Ihr Repo zugreifen und es sich ansehen kann auf Ihr Repo zugreifen und es sich ansehen Das wird öffentlich sein, oder Sie können es auf privat setzen der Öffentlichkeit kann also jeder im Internet Ihr Repository sehen. Und im privaten Modus wählst du aus, wer dieses Repository sehen und sich darauf einschreiben kann . Die Wahl liegt bei dir. Nun, in öffentlichen Fällen ist es angemessen, wenn Sie eine Reihe von Portfolio-Websites haben , die Sie möglichen Mitarbeitern präsentieren möchten und so, oder wenn Sie nur ein bisschen Ihre eigenen persönlichen Tests durchführen und nicht mit etwas umgehen, das Sie als sensibel bezeichnen könnten Ich würde sagen, das wäre meiner Meinung nach eher im öffentlichen Szenario. Alles, was natürlich, sagen wir, Teil Ihrer eigenen Organisation ist oder etwas, natürlich privat ist, wie wir hier sehen können, sollte privat sein. Es kommt also nur darauf an, was Sie gerne machen würden. Wenn Sie nicht möchten, dass es jemand sieht und Sie nicht Absicht haben, Ihr Projekt zu zeigen , müssen Sie es natürlich auf privat setzen. Wenn Sie beabsichtigen, es zu präsentieren, können Sie es öffentlich zugänglich machen Also werden wir es einfach halten und vorerst nur öffentlich sagen Dann können Sie eine Readme-Datei hinzufügen . Nun, ich füge das immer gerne hinzu, und eine Readme-Datei ist einfach sehr nützlich, wenn sich jemand nur einen kurzen Überblick über Ihr Repository oder Ihr Projekt verschaffen möchte sich jemand nur einen kurzen Überblick über , sollte ich sagen, nur um einige Informationen über Ihr Projekt zu sehen und darüber, was Sie verwenden und worum es geht. Nur ein einfacher Überblick. Im Grunde wie ein Textdokument. Sie können hier auch eine G-Ignorierdatei hinzufügen, was sehr nützlich ist, wenn Sie beispielsweise mit Umgebungsvariablen arbeiten und diese DENV-Datei ignorieren möchten , die Umgebungsvariablendatei handelt Dann können Sie auch eine Lizenzierung hinzufügen , wenn Sie Ihren Code auf irgendeine Weise lizenzieren gibt es einige Optionen für Sie Hier gibt es einige Optionen für Sie, die Sie auch nutzen können. Aber wir werden es hier einfach ganz einfach halten . Stellen Sie sicher, dass Sie Ihren Repository-Namen, eine Beschreibung und die Sichtbarkeit hinzugefügt haben . Ich mache es öffentlich und du hast die Option „Read Me“ hinzugefügt. Dann kannst du einfach sagen, Repository erstellen. Da haben wir's. Wir können jetzt sehen, dass es öffentlich zugänglich ist und wir können jetzt sehen, dass wir alle startklar sind. Wir können die Readme-Informationen hier mit dem Beispiel-Repo und der Beschreibung , die wir hinzugefügt haben, sehen hier mit dem Beispiel-Repo und der Beschreibung , die wir hinzugefügt haben, Das ist alles, was Sie wissen müssen. Sie können weitermachen und ein GitHub-Repository erstellen 4. Konfigurieren von GitHub Desktop und Synchronisierung unseres Quellcodes: Hallo zusammen und willkommen zur nächsten Vorlesung, die sich auf die Konfiguration von GitHub Desktop und später auch auf die Synchronisation unseres Quellcodes konzentrieren wird GitHub Desktop und später auch auf die Synchronisation unseres Quellcodes Lass uns anfangen. Als Erstes möchten Sie eine Google-Suche nach GitHub Desktop durchführen, zu der Sie auf den entsprechenden Link klicken können , der GitHub Desktop herunterladen lautet , zu der Sie auf den entsprechenden Link klicken können , . Um Ihnen hier etwas Klarheit zu verschaffen, können Sie entweder für Windows herunterladen oder nach unten scrollen und für macOS herunterladen. Die Optionen sind für Sie da. Ich möchte Ihnen nur ein wenig Klarheit darüber geben , was GitHub Desktop ist. Es handelt sich im Wesentlichen um eine kostenlose App, die, wie Sie sehen, sowohl von Windows- als auch von MacOS-Computern verwendet werden kann. Sie bietet Ihnen eine sehr einfache visuelle Oberfläche, Sie bietet Ihnen eine sehr einfache visuelle Oberfläche um GitHub zu verwenden, ohne Befehle in das Terminal eingeben zu müssen, wenn Sie Git nur nativ verwenden würden Lass uns weitermachen und es herunterladen. Ich bin auf Windows. Ich werde es für Windows herunterladen. Es wird einen Moment dauern, geben Sie ihm etwas Zeit. Und sobald es heruntergeladen ist, können wir weitermachen und darauf klicken. Was dann passieren wird, ist die GitHub Desktop-Anwendung selbst installiert wird. Es ist also sehr intuitiv. Wir müssen es nicht drücken oder irgendetwas tun. Wie Sie hier sehen können, wird GitHub Desktop installiert und es wird gestartet, sobald es fertig ist. Wir müssen nur warten. Normalerweise können Sie unter Windows den Fortschritt hier unten sehen . Wie Sie sehen können, wird es mit dem kleinen Fortschrittsbalken abgeschlossen . Also müssen wir nur darauf warten. Okay. In Ordnung, los geht's. Also willkommen auf GitHub Desktop. Was wir jetzt tun können, ist, weiterzumachen und zu entscheiden, wie wir vorgehen wollen. Richtig. Sie möchten sich also bei github.com anmelden Okay. Und wir wollen unsere Sitzung verifizieren. Da wir also bereits angemeldet sind, können wir, wie Sie sehen, weitermachen und Weiter sagen. Und wir möchten GitHub Desktop jetzt mit unserem Wie kann ich sagen mit unserem Benutzer autorisieren unserem Wie kann ich sagen mit unserem Benutzer Zu unserem Benutzernamen können Sie also unseren Benutzernamen für unser Konto sehen Und hier können wir den Zugriff auf die Repositorien kontrollieren. Standardmäßig ist es also öffentlich und privat und Sie können hier weitere Informationen dazu lesen Und wir werden GitHub Desktop einfach autorisieren. Und dann können wir einfach sagen, öffnen es wird hierher zurückgeleitet und hier haben wir es Jetzt kannst du hier sehen, dass wir Git konfigurieren wollen. Jetzt nur ein bisschen Klarheit über Git. Git ist im Grunde ein Versionskontrollsystem und das wird dir helfen, Änderungen in deinem Quellcode nachzuverfolgen , verschiedene Versionen eines Projekts zu speichern und so weiter. Wir möchten meinen GitHub-Kontonamen und meine E-Mail-Adresse verwenden , um Git zu konfigurieren . Wir werden sehen, dass es hier automatisch eingestellt wird, und dann kannst du einfach „ Fertig“ sagen. Und da haben wir es. Jetzt haben wir das alles eingerichtet, und wir können hier auch unser Repository sehen, bei dem es sich natürlich um das Repository handelt, das wir zuvor erstellt haben und das Sample Repo heißt Also können wir das jetzt schließen. Also gut, da haben wir es. Wir können auch sehen, dass es jetzt auf unserem Desktop ist, GitHub Desktop, so wie es sein sollte, und sind bereit, mit dem nächsten Prozess fortzufahren. Also gut gemacht, du hast es erfolgreich konfiguriert, GitHub Desktop auf deinem System. Als Nächstes wollen wir natürlich unseren Quellcode synchronisieren Richtig. Als Nächstes wollen wir unser Repository klonen. Klonen eines Repos oder Repositorys bedeutet eine vollständige Kopie eines GitHub-Repositorys, einschließlich aller Dateien oder allem, was sich derzeit darin befindet, auf unseren Computer herunterzuladen, damit wir lokal daran arbeiten können Wie wir sehen können, haben wir hier nur eine einfache Readme-Datei Das ist alles, was wir haben. Wir möchten also unser Repository auswählen , wie wir hier sehen können. Dann können wir klonen sagen dann möchten Sie den Pfad festlegen , in dem es sich befinden soll, Klon zwei. Wie wir sehen können, ist dies in der URL automatisch ausgewählt. Wenn es nicht ausgewählt ist, können Sie es auswählen. Und wir können sehen, dass dies die Repository-URL oder der GitHub-Benutzername und das entsprechende Repository sein wird, und dies wird der Pfad sein , in dem der zweite Klon gespeichert wird. Du kannst „Wählen“ sagen, und ich wähle hier den Desktop und sage „Ordner auswählen“, sodass der Ordner auf meinem Desktop angezeigt wird. Und dann sage ich Klon. Jetzt klont es Sampoepo, los geht's. Wir können sehen, dass wir uns derzeit in Sam Por Repo befinden. Wir können sehen, dass wir beabsichtigen , in unsere Hauptzweige vorzudringen. Wir können hier alle Dateien sehen , die wir geändert haben, alle lokalen Änderungen, und hier können wir unsere Änderungen übernehmen und ihnen eine Beschreibung hinzufügen Wenn ich das jetzt minimieren würde, kann ich jetzt auf meinem Desktop sehen, ich habe Sam Prepo und wenn ich das öffne, können wir sehen, dass wir natürlich die ReadMe-Datei haben , und natürlich die Punkt-Git-Datei nicht für dich angezeigt, aber weil ich sie auf meinem PC so eingestellt habe, dass alle versteckten Dateien angezeigt werden, wird sie standardmäßig angezeigt. Das ist nur etwas, das man im Hinterkopf behalten sollte. Aber wir haben das Read-Refol und das ist natürlich die Standarddatei, die wir hier sehen können, die von Gitub selbst geklont wurde Als Nächstes möchten Sie unseren Quellcode synchronisieren . Wie wir hier sehen können, nenne ich sozusagen mein Projekt Und ich habe das in Visual Studio-Code geöffnet und habe drei Dateien: Index Dot HML, Script Dot JS und Style Dot CSS Das wird Ihnen nur etwas Klarheit über den Umfang der Anwendung geben , mit der wir arbeiten Es ist also eine sehr einfache Frontend-Anwendung mit einer HTML-, CSS- und JavaScript-Datei, die alle miteinander verknüpft sind Denken Sie also hier daran, wenn Sie mit der Anwendung, die Sie bereitstellen möchten , ein bisschen höher hinaus wollen mit der Anwendung, die Sie bereitstellen möchten , . Behalten Sie das also einfach im Hinterkopf. Richtig. Als Nächstes möchte ich all diese Dateien in das Repository hier verschieben. Also werde ich das Beispiel-Repo öffnen. Und dann werde ich auch mein Projekt öffnen. Und was ich tun möchte, ist diese zur Seite zu legen. Ich werde nur die Dateien , die ich habe, hierher verschieben. Ich werde sie hervorheben und sie einfach in mein Repository verschieben , das ich klone, das als Beispiel-Repo bekannt ist Sie können das schließen und das schließen. Wenn wir jetzt zu GitHub Desktop gehen, können wir jetzt sehen, dass es Änderungen gibt. Hier wurde also festgestellt , dass drei Dateien geändert wurden. Mit anderen Worten, drei Dateien wurden in den Beispiel-Repo-Ordner verschoben , also Index bei HML, Script Dot JS und Star Dot CSS Wie Sie sehen können, können wir alle Anpassungen hier sehen. Das Plus-Symbol hier zeigt also natürlich Dinge an, die hinzugefügt wurden, und natürlich wird das Minuszeichen angezeigt, wenn Dinge entfernt wurden. Okay, richtig. So können wir weitermachen und unseren Quellcode effektiv synchronisieren Jetzt ist es also Teil unseres Repositorys und wir sind alle startklar Als Nächstes möchten wir sicherstellen, dass die möchten wir sicherstellen Änderungen hier in unserem Repository hier auf Github selbst widergespiegelt werden . Also wollen wir zunächst das folgende Feld hier ausfüllen und wir wollen diese Dateien im Wesentlichen in unseren Hauptzweig hier übernehmen , damit sie sichtbar sind. Also werde ich hier einfach einen Namen hinzufügen. Also normalerweise wird das der Name dessen sein , was du tust. Also hier, ich sage hier nur Dip Initial. Ich nenne das erste Bereitstellung. Jetzt können Sie entscheiden, als was Sie das einstellen möchten. Normalerweise, wenn Sie etwas ändern, vielleicht einen Index oder eine HTML-Datei, sagen wir, Sie ändern die Überschrift oder Sie ändern den Hero-Bereich, fügen Sie das einfach als Haupttitel für das hinzu, was Sie ändern, und dann fügen Sie eine Beschreibung mit weiteren Details hinzu Hier wird dies die erste Bereitstellung sein. Dies ist die Anwendung hier. Die Beschreibung hier ist, ich werde sagen, eine Beispielanwendung mit einer hinzugefügten HML-, CSS- und JS-Datei. Okay. Und dann können wir diese drei Dateien in unseren Hauptzweig übertragen, also können wir Commit sagen. Und wenn Sie dann mit allem zufrieden sind, können Sie das jetzt in Ihr GitHub-Repository verschieben . Es wird zum Ursprung gepusht, der sich in unserem Hauptzweig befindet. Okay, da haben wir's. Und wie Sie sehen können, gab es in letzter Zeit keine Änderungen, also können wir loslegen. Gehen wir zurück zu unserem Repository. Lass uns die Seite aktualisieren. Und wie Sie jetzt sehen können, hat unser Repository jetzt die Indexpunkt-HTML-Datei, den Skriptpunkt gsle und unsere Style-Punkt-CSS-Datei, und wir können sehen, dass wir diesen Commit vorgenommen haben Und wie Sie sehen können, war der Name hier die Erstbereitstellung. Das war also der Name unserer Commit-Überschrift, und dann können wir die Beschreibung hier unten sehen und sehen, was wir hinzugefügt haben und auch, ob etwas entfernt wurde. Und unser Benutzer hier hat laut unserem Benutzernamen diese Datei übernommen und wir können das Datum sehen, an dem das passiert ist. Der letzte Commit und wir können die Informationen auch hier sehen. Erster Einsatz. So können wir GitHub Desktop konfigurieren und auch unseren Quellcode entsprechend synchronisieren . Das ist das 5. Starten Sie Ihre erste Website: Und willkommen zum nächsten Vortrag , der sich auf den Start unserer ersten Website konzentrieren wird . Also lasst uns anfangen. Gehen wir nun davon aus , dass Sie Ihren Quellcode synchronisiert haben , lassen Sie uns weitermachen und GitHub Pages verwenden Sie möchten also sicherstellen, dass Sie sich im ausgewählten Repository befinden im ausgewählten Repository Dann können wir zu den Einstellungen gehen. Dann sehen Sie auf der linken Seite einige Optionen. Sie möchten nach unten scrollen, bis Sie Seiten sehen, und Sie möchten diese Option auswählen. Nun, um Ihnen hier einen Einblick zu geben. GitHub Pages ist im Grunde ein kostenloser Webhosting-Dienst , der von GitHub angeboten wird und mit dem Sie Ihr Projekt wie eine Website direkt aus Ihrem GitHub-Repository in eine öffentliche Live-Webseite verwandeln können Ihr Projekt wie eine Website in eine öffentliche Live-Webseite . Was wir also tun können, ist hier unter Build end Deployment sicherzustellen, dass es so eingestellt ist, dass es von einem Branch aus bereitgestellt wird, was eine Standardoption ist. Dann möchten Sie es aktivieren. Wie wir sehen können, heißt es, dass GitHub Pages derzeit deaktiviert ist. Wir möchten unten eine Quelle auswählen, um GitHub Pages für dieses Repository zu aktivieren. Sie möchten also auf das Drop-down-Menü klicken und es an den Hauptzweig senden. Es wird im Stammverzeichnis sein, und dann willst du Speichern sagen. Dann kannst du Speichern sagen. Wir können sehen, dass der Quelltext von GitHub Pages gespeichert wurde. Dann können wir zum Code zurückkehren. Und dann, wie Sie hier sehen können, steht dieses gelbe Symbol noch aus. Also lass uns das auswählen. Und wir können hier sehen , dass es Seiten, Build und Deployment heißt , sodass wir Details auswählen können. Und hier können wir sehen, dass der Build für die Bereitstellung unserer Anwendung gestartet wurde . Es wird also gebaut, alles für uns eingerichtet und unseren Quellcode für die Bereitstellung kompiliert. Es wird einige wichtige Phasen durchlaufen. Wie Sie hier sehen können, gibt es eine Checkout-Phase, eine Bauphase und natürlich auch eine Artefakt-Phase Wie Sie sehen können, ist es ziemlich schnell. Da ist also die Bauphase. Dann wird es den Abschnitt „Build-Status“ für den Bericht erstellen danach unsere Anwendung bereitstellen. Okay, wir können sehen, dass es sich jetzt unter dem Bericht Build-Status befindet, sodass wir den Job einrichten, den Build-Status melden und den Job abgeschlossen haben können. Jetzt tauchen wir hier natürlich tief in GitHub Pages ein. Nur um dir einen kleinen Einblick zu geben ist alles, was in dieser Phase hier passiert, es ist das Erstellen unseres Quellcodes, Kompilieren, Vorbereiten und dann wird es ihn bereitstellen Wie Sie sehen können, war jeder Job hier ein Erfolg. Jetzt können wir zu den Einstellungen zurückkehren. Dann können Sie hier auf der linken Seite zu den Seiten gehen. Und hier kannst du sehen, dass unsere Website jetzt in deinem nächsten Bereich live ist, und wir können unsere Seite besuchen oder du kannst mit der rechten Maustaste auf Link im neuen Tab öffnen klicken. Wir können sehen, wann sie zuletzt bereitgestellt wurde und von welchem Benutzer, und Sie können auch die Veröffentlichung Ihrer Website rückgängig machen Also haben wir das alles eingerichtet. Also habe ich meine Beispiel-Website. Ich möchte das jetzt anklicken und in einem neuen Tab öffnen. Und hier habe ich meine Website fertig eingerichtet und einsatzbereit. Hier haben wir es. Es ist eine sehr einfache Anwendung, wie wir hier sehen können, und sie hat auch hier ein bisschen Licht im Dunkelmodus, das ist ganz nett, aber da hast du sie und du kannst die folgende UrrAlm auf deine Website zugreifen, die dir natürlich zur Verfügung gestellt wird Und da hast du es. So können Sie sich absichern und Ihre allererste Website starten. Da hast du es also. ist hier die URL dafür. Natürlich können Sie das mit jedem teilen, überall teilen, und das war's. So einfach ist es, sich abzusichern und Ihre Website einzurichten und kostenlos zu starten Das war's natürlich. 6. Bearbeiten von Aktualisierungen Ihrer Website: Hallo zusammen und willkommen zur nächsten Vorlesung, die sich mit dem Umgang mit Aktualisierungen Ihrer Website befassen wird . Nehmen wir zum Beispiel an, Sie möchten etwas an Ihrer Anwendung ändern. Hier heißt es also, Hol Mino, wir entwickeln Propresion über sauberen Code Nehmen wir an, ich möchte etwas ändern, etwas, das mir nicht gefällt Also gehe ich zu Visual Studio-Code und ändere einfach den Ordner, und ändere einfach in dem ich mich befinde. Das Repo hier heißt also Beispiel-Repo. Also sage ich einfach Datei, Ordner öffnen, und ich werde etwas für Repo öffnen Das kann in jedem Coding-Editor sein, den Sie haben Gehen wir zu Index on HML und schauen wir uns an, was ich ändern möchte Ich möchte das hier ändern. Ich wollte meinen vollen Namen eingeben. Wie Sie sehen können, heißt es derzeit nur Hallo, ich bin Anu, dann bin ich hier ein Webentwickler, der sich für sauberen Code und Design begeistert . Natürlich kann ich das ändern. Ich kann sagen, ein Webentwickler, sauberen Code und Design begeistert. Hier werde ich Cloud in SZSt sagen. Und ich sage hier und ein Cloud-Enthusiast. Okay, sehr einfach. Das werde ich mir sparen. Und es wird natürlich mit der Quellcodeverwaltung synchronisiert, natürlich mit GitHub Desktop Und jetzt, mit diesen Änderungen, kann ich zu GitHub Desktop gehen und wir können sehen, dass wir eine Änderung vorgenommen haben Dieses gelbe Symbol hier bedeutet also geändert, und Sie können sehen, dass ich das DG entfernt habe, und das grüne Symbol hier ist, was ich hinzugefügt habe. Also hier sage ich einfach aktualisiert , wie kann ich sagen , die Index-HML-Datei zum Beispiel und eine Beschreibung hier, ich werde sagen, füge sie im Nachnamen hinzu und zusätzliche Informationen darüber, was ich bin Also ein Cloud-Enthusiast. Dann kann ich sagen, eine Datei an Main übergeben, und dann kann ich sie in meinen Hauptzweig verschieben Okay, es wurde verschoben. Wenn ich jetzt hier zu meinem Repository zurückkehre, kann ich einfach mein Repo aktualisieren Und wir können sehen, dass der Commit hier durchgeführt wurde, der Index auf HTML aktualisiert wurde und dass er jetzt nicht abgeschlossen ist, und wir können sehen, dass er bereits aussteht Es erstellt unseren Quellcode, kompiliert, stellt sicher, dass er funktioniert, und dann wird er bereitgestellt Es wird hier also ein paar Augenblicke dauern. Natürlich können Sie darauf klicken und alle Details sehen, wie Sie möchten. Und alles, was wir tun wollen, ist nur zu warten , natürlich bleibt die URL dieselbe. Wir können also einfach warten, bis dies abgeschlossen ist, und dann können wir weitermachen. Also gut, willkommen zurück, wie wir sehen können, ist es jetzt grün. Ich empfehle Ihnen natürlich, einfach hier zu aktualisieren, und dann sehen Sie hier das grüne Symbol. Okay, das heißt, es war ein Erfolg. Jetzt können wir auf unsere Website gehen und Sie möchten nur Ihre Webseite neu laden, und los geht's Wir können es in Pretorius sehen, also mein voller Name und ich bin Cloud-Enthusiast, sodass wir sehen können, dass das Update berücksichtigt wurde also mein voller Name und ich bin Cloud-Enthusiast, sodass wir sehen können, dass das Update berücksichtigt wurde . In Ordnung. Also da hast du es. Nun, eine andere Möglichkeit , mit Updates umzugehen , ist, wenn es hier eine bestimmte Datei gäbe , die Sie ändern möchten. Nehmen wir an, Sie können den Index zur HML-Datei hier in Ihrem Repository auswählen Und Sie können diese Datei direkt bearbeiten. Das ist also eine andere Möglichkeit, es zu tun. Obwohl ich diesen Weg nicht empfehlen würde, ist es besser, lieber in einem Code-Editor weiterzumachen und einfach Ihre Anpassungen vorzunehmen oder in der Datei, in der Sie sich befinden, nur um diese Änderungen vorzunehmen und so. Das ist also etwas anderes , das du auch tun kannst, wenn du nur eine Änderung vornehmen möchtest, aber es ist am besten, sie dort zu aktualisieren wo immer du deine Anwendung geöffnet hast, und sie dann einfach mit GitHub Desktop zu pushen, um sie entsprechend mit deinem Github-Repository zu synchronisieren. Leute. Das war's also für diesen speziellen Vortrag? Das ist so, dass Sie Updates an Ihrer Website verwalten können. 7. Erstellen eines eigenen Projekts: Hallo zusammen und willkommen zur nächsten Lektion, in der es darum geht, dein eigenes Projekt zu erstellen. Richtig, erstelle dein eigenes Projekt. Jetzt, da Sie über all diese neuen Fähigkeiten verfügen , die Sie erworben haben, ist es an der Zeit, all das zu nutzen und Ihr eigenes Projekt zu erstellen. Was Sie jetzt tun können, ist, im Abschnitt Projekt und Ressourcen dieses Kurses weitere Informationen darüber zu im Abschnitt Projekt und Ressourcen dieses Kurses weitere Informationen darüber wie Sie sicherstellen können , dass Sie das Projekt verfolgen, und dann auch, wie Sie es teilen können, damit ich es mir ansehen und mein Feedback hinterlassen kann. Stimmt, Leute. Das war's für diese Lektion. 8. Vielen Dank!: Hallo, alle zusammen. Und nur eine letzte Anmerkung von mir, und das ist nur ein Dankeschön, dass Sie sich für diesen Kurs entschieden haben. Ich hoffe wirklich, dass es Ihnen geholfen hat aufschlussreiches Wissen zu erlangen Nochmals vielen Dank, und ich freue mich sehr, dass Sie sich entschieden haben, sich mit mir auf diese Reise einzuschreiben Eine weitere Sache, die ich erwähnen möchte, ist Sie erwägen, eine Bewertung für diesen Kurs Es wäre sehr willkommen. musst du nicht, wenn du nicht willst, aber in meinem Fall ist es immer nützlich, zu versuchen, das Feedback zu verstehen, das mir gegeben wird, und zu versuchen, meinen Unterricht besser zu verbessern. Nochmals vielen Dank und viel Glück auf Ihrer Reise.