Transkripte
1. Einführung: Hi. Mein Name ist Aga. Ich bin auch Coding Designer und Lehrer. Ich liebe Dinosaurier, alte Tastaturen, rosa Farbe, Pflanzen und Internet. In diesem Unterricht lernen wir, wie Sie Ihre Website ganz einfach im World Wide Web
veröffentlichen können. Es ist toll, Ihre Website online zu haben weil Sie den Link einfach mit Ihren Freunden,
Familie oder vielleicht einem zukünftigen Arbeitgeber teilen können. Wir werden GitHub-Seiten verwenden, um Ihre Website bereit und live im Internet zu machen. Was ist so toll an diesem Unterricht? Als erstes sind sie süß und kurz. Die zweite, Sie werden GitHub Pages lernen, die kostenlos ist. Drittens, Sie werden Ihre Website im Web arbeiten, damit jeder sie sehen, anzeigen und an andere Personen senden kann. Ist es schwierig? Du fragst. Nein, ist es nicht. Gibt es irgendwelche Voraussetzungen oder Dinge, die ich haben muss? Nur die Website, die Sie codiert haben. Aber was ist, wenn ich meine Website noch nicht codiert habe? Keine Sorge, ich habe mehrere Klassen auf HTML und CSS für Anfänger vorbereitet. So stellen Sie sich im Web durch eine Veröffentlichung Ihrer Website mit meiner kleinen Hilfe in diesem Kurs zur Verfügung. Glückliches Lernen und Verlagswesen. Wir sehen uns in den nächsten Klassen.
2. So bereitest du dich vor: Was Sie vorbereiten müssen. Zunächst einmal die Website, die Sie codiert haben, die zweite Sache, GitHub Desktop-Anwendung, die Sie kostenlos herunterladen können, und die dritte, Ihre Lieblings-Web-Browser. Wenn Sie Ihre Website noch nicht codiert haben, keine Sorge,
ich habe mehrere Kurse vorbereitet, um HTML und CSS von Grund auf neu zu lernen. Dank ihnen werden Sie in der Lage sein, die Website von
Anfang an bis zum Ende zu codieren , damit Ihre Website bereit ist, zu veröffentlichen. Sie können Code Your Own Portfolio oder Boost Your Personal Branding.
3. GitHub-Konto registrieren: Lektion Nummer eins. Das erste, was wir tun müssen, ist ein GitHub-Konto zu erstellen. Wir machen es auf GitHub.com und die Einrichtung Ihres Kontos kann kostenlos sein und das ist, was wir tun. Natürlich, wenn Sie Ihren Plan aktualisieren möchten, gibt es einen offenen Weg. Aber für unsere Zwecke ist
das kostenlose Konto völlig ausreichend. Wir müssen uns den Benutzernamen einfallen lassen. Dieser Punkt ist super wichtig, da ein Teil dieses Benutzernamens in der Adresse unserer Website sein wird. Sie müssen denken, was ist der Zweck Ihrer Website? Wollen Sie es Ihrem zukünftigen Arbeitgeber schicken? Wenn ja, vielleicht ist es besser, es Ihren Vor- und Nachnamen anstelle von Spitznamen zu haben. Es hängt alles davon ab, was Sie mit
dieser Adresse tun werden und mit wem Sie sie teilen werden. Mein Benutzername wäre awwwesome-website, und dies ist verfügbar. Der Adressersteller von GitHub-Seiten für meine Website ist diese, awwwesome-website.github.io. Es ist wichtig, den richtigen Benutzernamen zu wählen. Ich habe awwwesome-Website, ich muss E-Mail und Passwort eingeben, und dann muss ich mein Konto verifizieren. Ich gebe dir eine Minute, um es zu beenden, und wir sind wieder für die nächsten Schritte.
4. Was ist Git und GitHub?: Lektion Nummer 2. Also hast du dein Konto auf GitHub registriert, aber es gibt eine Frage, die dir einfällt und es ist, was Git ist? Erzählen Sie uns mehr darüber. Obwohl unsere Klassen sich darauf konzentrieren, die Website zu veröffentlichen, nicht den GitHub und Git selbst, werde
ich Ihnen kurz sagen, worum es geht. Git ist also ein Versionskontrollsystem. Es bedeutet, dass es den Verlauf der Änderungen in Ihren Dateien darstellt. Versionierung bedeutet,
alle Änderungen zu verfolgen , die in den Dateien und ihrem Repository passieren. Was ist Repository? Sie können es sich nur als einen Ordner vorstellen, die Sammlung älterer Dateien. Wenn wir an das Versionskontrollsystem denken, können
wir einen Blick in die Werkzeuge werfen, die wir in unserem Alltag verwenden. Zum Beispiel können Sie sich vorstellen, einen Text in
Google Docs zu schreiben und Google Docs speichern Sie den Verlauf all Ihrer Änderungen. Ich wusste nicht, ob du davon gehört hast. Sie können überprüfen, was passiert ist, Sie können leicht zur vorherigen Version zurückkehren, Sie können diese Version auch benennen. Also spielt Git diese Rolle auch für Code und alle Dateien, die die Website erstellen,
die Anwendungen, alles, was mit der Entwicklung der Tools verbunden ist. Das ist Git. Aber was ist GitHub? Ist es das Gleiche? Eigentlich nein, weil GitHub der Dienstleister ist. So GitHub bietet Git-Dienst. Es ist eine Lösung, die wir verwenden können und teilweise ist es kostenlos. Natürlich, wenn Sie mehr Funktionen haben möchten, müssen
Sie es auf das kostenpflichtige Konto aktualisieren. Git ist in der IT-Welt weit verbreitet. Wir werden nur einige Funktionalitäten davon verwenden. Deshalb möchte ich nicht mehr zu einigen Themen ausarbeiten,
aber wenn Sie irgendwelche Fragen haben, zögern Sie nicht, mich in den Kommentaren wissen zu lassen. Ich bereite gerne neue Klassen für Sie vor, die sich nur auf Git-Befehle konzentrieren. Es gibt ein paar Wörter, die ich verwenden werde, die GitHub Desktop
sind, die die Software, die uns hilft, unsere Dateien lokal auf unserem Computer mit den Remote-Repos auf GitHub-Servern zu verbinden. Ich werde Commit erwähnen, ich werde Repo erwähnen, dem Sie bereits gehört haben. Ich werde auch git push erwähnen, aber das ist etwas, das Sie es als selbstverständlich betrachten können. Nochmals, machen Sie sich keine Sorgen um die Details, unser Ziel ist es, unsere Website zu veröffentlichen, nicht in jede Ecke und Ecke von GitHub und Versionskontrollsystem zu erkunden.
5. Was ist GitHub Desktop und GitHub Pages?: Lektion Nummer 3. GitHub Desktop ist die kostenlose Anwendung, mit der Sie lokale Repositories verbinden können, so dass Ihre lokalen Dateien mit der entfernten, die auf GitHub-Servern gehostet wird. Es ist praktisch, GitHub Desktop zu verwenden, da wir keine Git-Befehle lernen oder Terminal verwenden
müssen, was für einige Leute erschreckend sein könnte. GitHub Pages lassen uns die Website hosten, die wir erstellt haben. Es bedeutet, dass wir die Website veröffentlichen können, die sich derzeit im Remote-Repo auf einem GitHub befindet. Um es live im World Wide Web,
bedeutet, es ist alles kostenlos, und innerhalb von mehreren Klicks. Um ehrlich zu sein, denke ich, dass es sehr ansprechbare Methode ist, Ihre Website im Web zu veröffentlichen. Wenn Sie Lust haben, mehr in GitHub Pages zu graben und zum Beispiel Ihre benutzerdefinierte Domain zu
verwenden, die Sie bereits gekauft haben, können
Sie auf der GitHub Pages Website gehen und mehr erfahren. Wir werden die Grundkonfiguration überprüfen. Richten Sie das GitHub Repo mit dem entsprechenden Namen und überprüfen Sie dann unsere Adresse, die Ihr Benutzername.github.io ist, um unsere Website bereit und online zu sehen.
6. Erstes Repository einrichten: Lektion Nummer 4. Mein Konto ist verifiziert, so dass ich jetzt fortfahren kann. Im nächsten Schritt erstellen wir unser erstes Repository. Sie können sich vorstellen, dass dies ein Ordner auf unserem Computer ist, und dieser Ordner wird von Git überwacht. Es überprüft, ob es einige neue Änderungen mit unserer Modifikation gibt, alles, was in diesem Ordner passiert, innerhalb dieses Repositorys ist auf dem Radar. Jetzt kann ich auf „Repository erstellen“ von dieser Willkommensseite
klicken oder ich kann zu meinem Konto gehen, auf „Repositories“ klicken und auf „Neu“ klicken. Jetzt ist die Zeit für die Eingabe des Repository-Namens und das ist sehr wichtig, weil wir zuerst den Benutzernamen schreiben müssen. Mein Benutzername ist also awwwesome-website und der weitere Teil, der dasat.github.io ist. Grundsätzlich können Sie Repository benennen, was auch immer Sie wollen, aber es für GitHub-Seiten zur Verfügung zu
stellen, um es online zu veröffentlichen , müssen wir den Benutzernamen und dann
github.io schreiben , da dies Adresse unserer Website sein wird. Die zweite Sache ist die Beschreibung. Wir können schreiben, dass dies meine persönliche Website ist. Es ist optional, so dass Sie es leer lassen können, wenn Sie möchten. Wir müssen unser Repository öffentlich machen, damit es für alle verfügbar ist, und wir können die Erstellung des Projektarchivs mit README-Datei initialisieren. README-Datei ist nur eine Datei, die sagt, was sich tatsächlich darin befindet. So können wir einige Informationen über Technologien hinzufügen, wenn das Projekt komplizierter ist, zum Beispiel, wenn Sie an der Entwicklung einer mobilen App oder einer seriösen Software arbeiten, geben Entwickler
normalerweise ihre Informationen zur Kompilierung der -Projekte. Aber das sind sehr technische Informationen. README kann leer sein, also mach dir vorerst keine Sorgen. Ich denke, dass
es für unseren Zweck nur gut ist zu wissen, was README-Datei ist, aber wir können sie leer haben. Jetzt ist es an der Zeit, auf „Repository erstellen“ zu klicken und es ist fast fertig. Ja, das ist es. Also lassen wir unser Repository erstellen. Das ist unser erster, sehr aufgeregt. Es ist jetzt fast leer. Ich sage, dass es fast leer ist, weil es eine Datei hat, die README ist, aber es gibt keine Dateien, die mit unserer Website verbunden sind, so dass wir keinen Index, HTML oder irgendwelche Stile oder Bilder haben, also müssen wir unsere Dateien in das Remote-Repository stellen und dies tun, werden
wir GitHub Desktop verwenden. Jetzt können Sie desktop.github.com öffnen und die Anwendung herunterladen. Im nächsten Schritt werde ich Ihnen zeigen, wie Sie
unser Remote-Repository, das wir auf GitHub erstellt haben, mit unseren lokalen Dateien verbinden können.
7. GitHub Desktop & First Commit konfigurieren: Lektion Nummer 5. Ich habe meine App installiert. Dies ist GitHub Desktop. Sie starten es einfach durch Doppelklick auf das Icon von GitHub Desktop, oder Sie finden es mit Spotlight auf Mac oder mit der Suche nach Dateien unter Windows. Vorerst muss ich mich bei meiner GitHub Desktop-Anwendung anmelden. Ich kann auf „Ein Repository aus dem Internet klonen“ klicken. Das ist genau das, was wir tun wollen. Ich habe GitHub.com markiert, und wir müssen uns mit unseren Anmeldeinformationen anmelden, die wir für die GitHub Registrierung verwendet haben. Für mich ist mein Benutzername awwwesome-website und das Passwort. Jetzt bin ich eingeloggt. Sie können sehen, dass wir derzeit ein Repository haben, das ist das, das ich gerade erstellt habe. Ich kann darauf klicken. Ich habe einen blauen Knopf auf der Unterseite, der diesen Repo klonen sagt, das ist ziemlich lange Sache. Ich möchte es vom Remote-Repo auf meinen Computer klonen. Ich klicke nur darauf. Dies ist etwas, was wir verlassen, und das ist die Standardadresse. Dies ist der lokale Pfad in unserem Computer, wo wir möchten, dass unser Repo gespeichert. Wir können wählen, ob es sich auf einem Desktop oder einem Unterordner befindet, was für Sie einfacher ist und wo immer Sie diese Dateien aufbewahren möchten. Für mich habe ich bereits den Pfad gewählt und klicke auf „Klonen“. Mein Repo ist erfolgreich geklont. Sie sich keine Sorgen und haben Sie keine Angst vor all diesen Namen und Tabellen. Ich werde Ihnen zeigen, was wir eigentlich brauchen, weil wir Git in diesen Klassen nicht lernen. Unser Ziel ist es, unsere Website zu veröffentlichen. Lassen Sie mich Ihnen den Ordner mit meinem Repo zeigen. Dies ist ein Ordner namens Website. Hier habe ich die Dateien für meine Website, die bereits codiert ist. Wir können hier Ihre Website, Ihre index.html, Ihre Bilder,
CSS, was auch immer Sie erstellt haben. Hier habe ich den Ordner genau wie mein Repo auf GitHub benannt. Es hat nur README-Datei, aber wir wollen unsere Website hier setzen. Was ich mache, ist, dass ich gerade alle diese Dateien markiert meine Website tatsächlich
erstellen und in den Ordner ziehen. Mein Repo hat jetzt mehr Dateien. Ich werde Ihnen nur schnell die Website zeigen, die ich
codiert habe , um Ihnen zu zeigen, dass das funktioniert. Dies ist die Website, die ich erstellt habe. Wenn Sie etwas Ähnliches haben möchten, empfehle
ich Ihnen dringend, meinen Unterricht zu besuchen. Sie haben den Titel Code Ihr eigenes Portfolio, und innerhalb von drei Stunden können Sie solche Website codieren. Aber gehen wir zurück zum Ordner. Die Akten sind genau hier. Lassen Sie mich unseren GitHub Desktop überprüfen, er wird mit diesen neuen Dateien aktualisiert und sie sind grün markiert. Es bedeutet, dass diese Dinge neu in unserem Repository sind. Eigentlich ist jede Datei neu. Jede Codezeile wäre grün markiert worden. Was ich tun muss, muss ich all diese Dateien markieren und sie festschreiben. Was bedeutet eigentlich „Commit“? Commit speichert unsere Änderungen im lokalen Repository, so dass sie sicher sind. Selbst wenn wir in der Zwischenzeit etwas tun, brauchen
wir uns keine Sorgen zu machen, weil sie in Commit sind. Sie sind fast auch in unserem Remote-Repo gespeichert. Lassen Sie mich sie begehen. Mit jedem Commit schreiben wir die Zusammenfassung, was in diesen Änderungen passiert. Hier können wir zum Beispiel die
erste Version meiner Website eingeben , und ich kann mich verpflichten, zu meistern. Master ist ein Standardzweig. Ich möchte nicht tiefer in Details eingehen, aber Sie müssen mir glauben, dass Master ein Standardzweig für jedes Repo ist, und ich klicke auf „Commit“. All diese neuen Änderungen, all diese neuen Dateien werden zu unserem Repo verpflichtet werden. Ich kann sehen, dass die Liste leer ist, weil sich nichts geändert hat. Alle vorherigen Änderungen werden gespeichert, so dass mein Repo auf dem neuesten Stand ist. Es gibt keine lokalen Änderungen, wie Sie hier sehen können. Das einzige, was wir tun müssen, ist, dass wir alle Änderungen an das Remote-Repo, an das Repo,
das wir auf GitHub erstellt haben, schieben müssen. Ich klicke auf „Push Origin“ auf der blauen Schaltfläche, und
alle Objekte, alle Dateien werden geschoben und wir sind bereit. Lassen Sie uns überprüfen, was auf GitHub.com passiert, auf meinem Konto. Ich bin auf GitHub.com und das ist mein Repo. Wenn Sie diese Website bereits geschlossen
haben, können Sie einfach dorthin zu Ihren Repositories gehen und das Repository
öffnen, das Sie gerade erstellt haben. Sie können sehen, dass wir diese README-Datei haben und wir haben das erste Commit von Aga, und das ist die Zusammenfassung, erste Version meiner Website. Wir können hier all diese Akten sehen. Wir können auch sehen, dass der Schub vor einer Minute getan wurde.
8. Änderungen vornehmen und die veröffentlichte Website anzeigen: Lektion Nummer 6. Jetzt sind wir froh, dass wir alles engagiert haben, aber was, wenn wir etwas auf einer Website ändern wollen? Stellen wir uns die Situation vor, dass ich die Überschrift
meiner Website ändern möchte , bevor ich sie online überprüfe. Ich öffne GitHub Desktop. Ich kann die Geschichte sehen. Ich kann zum Beispiel zu dieser Akte gehen. Ich kann das in Atom öffnen. Dies ist der Codierungs-Editor. Stellen wir uns vor, dass ich hier schreiben möchte Ich bin Aga Doe, jetzt ist Jane, aber Aga. Ich gehe zurück zu Github Desktop und ich kann sehen, dass es eine Änderung gibt. Ich wechsle auf Changes Tab, und Jane ist in rot. Es bedeutet, dass es weg ist, und im Grün sehe ich Aga. Github Desktop sieht meine Änderungen. Es weiß sofort, was es in meinen Akten passiert. Zum Beispiel hier gibt es einen Platzhalter, es gibt einen Hinweis. Ich kann die Aktualisierung index.html schreiben, aber ich kann auch schreiben, indem ich den Namen des Autors ändere. Ich klicke auf „Commit to master“. Das gleiche, wir haben die Dateien übergeben, aber um sie auf dem Remote-Repo verfügbar zu machen, müssen wir auf „Push-Ursprung“ klicken. Lassen Sie uns überprüfen, ob mein Commit auf GitHub.com registriert ist. Ja, das ist es. Wenn ich auf den Namen dieses Commits klicke, sehe
ich, dass Jane weg ist und Aga hinzugefügt wird. Ich habe Ihnen gesagt, dass dies tatsächlich URL sein wird, die Adresse unserer Website. Lassen Sie uns das kopieren, fügen Sie es in den Webbrowser ein und sehen, was wir sehen können. Unsere Website ist das Leben und es ist fertig. Ist es nicht cool? Ich habe es eigentlich eine wirklich kurze Zeit gemacht. Ich kann sehen, dass es Aga gibt, also wird meine Website aktualisiert. Ich kann diesen Link kopieren und an alle senden, die ich will. Das ist so cool. Das ist so aufregend. Stellen wir uns die Situation vor, dass ich gerne einige Dinge auf der Website wieder ändern würde. Ich bin in Atom und zum Beispiel möchte ich schreiben Ich bin awesome Aga. Ich rette das hier. Wenn ich dies aktualisiere, sehe ich natürlich die Änderungen nicht, da die Änderungen nicht festgeschrieben sind und nicht an unser Remote-Repo übertragen werden. Diese Änderungen werden nur lokal vorgenommen. Was ich tun muss, erinnerst du dich? Wir müssen die Änderungen überprüfen, ich kann sehen, dass diese Überschrift aktualisiert wird. Ich muss die Beschreibung für mein Commit erneut hinzufügen, den Titel erneut
ändern, und ich verpflichte es, ihn zu meistern. Meine lokalen Änderungen werden gespeichert. Ich bin gut, sie im Remote-Repo zu veröffentlichen. Es sieht so aus, als wären sie engagiert und gedrängt. Lassen Sie mich die Website aktualisieren. Hier haben wir hallo, ich bin Aga Doe, und jetzt sollten wir, ich bin genial Aga. Ich kann sehen, dass meine Überschrift aktualisiert wird. Obwohl es zu lang ist, macht es nichts aus. Ich wollte dir nur zeigen, dass wir
die Änderungen vornehmen können und du sie sofort sehen kannst. Manchmal ist Ihr Cache im Webbrowser möglicherweise voll,
daher ist es gut, Ihre Entwicklertools zu öffnen, indem Sie mit der rechten Maustaste auf „Inspect“ klicken. Hier werden wir zur Verfügung haben leeren Cache und Hard-Reload. Es wird den Cache löschen und die Website erneut laden. Wenn Sie Probleme mit der Anzeige der Änderungen haben, können Sie dies tun. Das ist es. Unsere Website ist online. Wir können es ändern. Sie können einen Link an alle senden. Ich denke, das ist großartig, weil es ernsthaft nicht lange gedauert hat, bis es funktioniert hat. Wichtig ist, dass es kostenlos ist. Sie können ganz einfach in den Inhalt hinzufügen. Sie können auch die Kontrolle über Ihre Änderungen auf einer Website haben.
9. Hausaufgaben: Die letzte Lektion. Nach dem Abschluss meines Unterrichts deine Hausaufgaben super einfach. Fügt den Link zu unserem Projektabschnitt ein. Ich würde gerne Ihre Seiten sehen und ich bin super neugierig, wie alles gelaufen ist. Es gibt viele andere Tools, die Sie verwenden können, um GitHub mit Ihrem lokalen Repository zu
verbinden. Also habe ich GitHub Desktop empfohlen, aber es gibt Quellbaum. Sie können auch gemeinsame Linie verwenden, die dann eine weitere Stufe des Fortschritts ist. Ich halte die Daumen für all Ihre Kommentare und alle Ihre veröffentlichten Websites. Sie finden mich auf Instagram, auf Twitter, oder Sie können einfach einen Link über Ihre E-Mail senden.
10. Bonusmaterial: Stilblüten: Also machen Sie Ihren Verkauf. Erstens, um den ganzen Prozess damit zu lernen, denn es wird ein großes Geschenk sein. Nein.
Aga Naplocha, Creative coder & designer
