Erstellen einer kostenlosen Netlify mit Hugo dem statischen site (kostenloses Hosting, einfache Uploads)

1. Einführung: Hi, ich zeige auf der Website Entwicklung und Lehrer. Willkommen zu meinem Kurs zum Erstellen einer kostenlosen Netlify-Website mit Hugo. Dieser Kurs nennt sich Personen , die ihren Website-Entwicklungsprozess beschleunigen möchten , indem ihre Website-Veröffentlichung rationalisieren sie ihre Website-Veröffentlichung rationalisieren und Workflow erhalten. Sobald Sie Ihre Arbeit zum Abrufen bringen, wird sie automatisch auf Netlify hochgeladen und erstellt. Sie können sogar Netlify-Builds für Zweige und Pool-Anfragen erstellen . Wir sehen uns im Kurs. 2. Erste Schritte mit dem Projekt: Erste Schritte mit dem Projekt. Für das Projekt benötigen Sie die neuesten Versionen der folgenden Software installiert. Sie müssen es rauswerfen und sicherstellen , dass Sie es entweder mit brew auf Mac oder Linux oder Windows installieren . Benutze TROPOMI. Sie müssen Digital Studio Code die neueste Version installieren , die wahrscheinlich behoben wird. Sie benötigen Node.js und schließt dann NPM ein, holen Sie sich CLI für das Pendeln zu Git und GitHub Desktop. Sie haben also eine grafische Methode, um zu sehen, was mit Ihrem Git-Repository passiert. Sie müssen Konten bei GitHub und Phi beantragen . Und das ist alles kostenlos. Wenn du mich brauchst Hilfe bei der Installation dieser Software. Wenn Sie zu meiner Einführung in den Hagar N Bootstrap-Kurs gehen, ist die erste Lektion, Texturen der Prozess der Installation all dieser Software. Und Sie haben zwei bestimmte Bestellungen. Auf diese Weise wird die Software miteinander verknüpft. Zum Beispiel müssen Sie zuerst Node.js installieren, und das installiert auch chocolaty. Dann kannst du Hagar installieren. Und Sie müssen sicherstellen , dass Sie, wenn Sie Code teilen, installiert haben , bevor Sie Git, CLI und GitHub Desktop installieren . Auf diese Weise können Sie Visual Studio-Code als Code wählen . Während des gesamten Kurses werde ich jede Lektion an das GitHub-Repository weitergeben. Es gibt einen Link dazu im Bereich Ressourcen. Denken Sie daran, dass der Master-Zweig genau das ist, was ich verwendet habe , um mit dem Netlify of Sight zu verknüpfen, um die Abrechnung durchzuführen. Der Master-Zweig selbst ist für Sie nicht sehr nützlich, aber es gibt einen Zweig pro Lektion. Und wenn Sie Probleme mit einer der Lektionen haben, können Sie die jeweilige Lektion über den Zweig ansehen und den Code für diese Lektion sehen. 3. Neues GitHub-Projekt einrichten: Das erste, was wir tun werden, ist ein GitHub-Projekt einzurichten . Eine Möglichkeit, es einfach zu machen, wenn Sie auf GitHub Desktop gehen und ein neues Repository hinzufügen, wird der Ordnername des Repositorys und des Pfads ascii sein. Und es wird einen Ordner, ein Ordner-Repository erstellen. Und es wird auch das Repository gleichzeitig initialisieren . Ich ziehe es vor, diese Methode nicht zu machen, weil ich mich nicht gerne auf GitHub Desktop verlassen möchte, um das Foto zu erstellen, da ich das Foto oft in einem Ordner habe. Ich bevorzuge diese Methode , ein Foto zu erstellen. Und dann öffne ich in diesem Ordner den leeren Ordner in Visual Studio Code. Und wenn wir von hier aus zur Schaltfläche Quellcodeverwaltung gehen , können Sie das Repository initialisieren. Oder wenn Sie möchten, können Sie im Terminal Git darin ausführen. Sie werden dann feststellen, dass wir einen Ordner haben, den Punkt der 90er Jahre bekommen, und dort ist Ihr gesamter Git-Verlauf. Und du bekommst Konfigurationsblätter. Wenn Sie ein Git-Repository aus dem Internet herunterladen möchten und es auf Ihr eigenes Konto hochladen möchten, müssen Sie den Ordner löschen. Nachdem wir das Projekt initialisiert haben, müssen wir einen Punkt-Git ignorieren Fall hinzufügen, auf die Schaltfläche Neue Datei klicken und es dot git nennen. Ignoriere diesen Herbst. Wir geben alle Ordner und Dateien an, die nicht hochgeladen werden. erste ist ein Slash Node Unterstrich-Module nach dem Schrägstrich. Und das sind alle Dateien und Fotos, die generiert werden , wenn Sie Abhängigkeiten von NPM installieren. Und wenn Sie einen meiner anderen Kurse absolviert haben, wissen Sie alles darüber. Ein Exon wird Slash public sein. Das ist, wenn Sie den Befehl ausführen und der SWOT für das Hochladen über FTP entwickelt wurde. Sie erzeugen Stürze im öffentlichen Ordner. Und wir wollen diese nicht verpflichten weil sie sich häufig ändern. Und dann kannst du sie unnötigerweise mit der Community generieren. müssen sie nicht wirklich verpflichten, um sie zu bekommen. Der nächste ist Slash-Ressourcen. Seitenressourcen, die für die Verwendung im Projekt erstellt wurden , werden im Allgemeinen nicht benötigt. Das werden wir uns in einer späteren Lektion ansehen. Wir werden sie einbeziehen, um Ihre Netlify Bill Zeiten zu erhöhen. Aber es erhöht die Größe Ihres GitHub-Repositorys. Im Allgemeinen würde sie nicht einschließen, wenn sich die Seite, die Website, in einer Entwurfsphase befindet. Aber später, wenn die Seite fertiggestellt ist, ist es großartig, die Widerstände einzubeziehen , da dies Ihre Bauzeit verkürzt. Der nächste ist ein Punktunterstrich. Bauen Sie Punkt loc. Das ist ein großer Rückgang, der erzeugt wird, wenn ihr rennt. Das müssen wir nicht einbeziehen. Dann schauen wir uns zuerst an, dass das Commit knapp wird. Seit wenigen Möglichkeiten können wir das tun. Eine Möglichkeit besteht darin, wenn Sie auf die Registerkarte „Quellcodeverwaltung“ klicken, können Sie Ihre Nachrichten ablegen. Erstellen Sie zum Beispiel Git, ignorieren Sie. Ansonsten. Auf andere Weise müssen wir auf GitHub Desktop kommen, etwas grafischer. Sie können hier eine Nachricht eintragen, oder Sie können mit der Standard - und Steuereingabe gehen , um zu verpflichten. Hier habe ich wirklich gesperrt , um GitHub Desktop zu verwenden. Wenn Sie veröffentlichen, können Sie wählen, ob Sie es privat halten möchten oder nicht. Mit Netlify können Sie tatsächlich auf private und diese 22 Entitäten entweder GitHub einstellen . Sie können auch die Organisation auswählen. Wenn Sie wieder in Visual Studio Code sind, können Sie tatsächlich eine Organisation auswählen und diese veröffentlichen , um dies manuell über die Befehlszeile zu tun. Lasst uns arbeiten. dringend empfohlen, wenn Sie eine Organisation mit Ihrem GitHub-Konto eingerichtet haben , verwenden Sie GitHub Desktop , den Sie für Ihre Organisation ausgewählt haben. Sie können Ihr Repository veröffentlichen. Das bringt uns den nächsten Schritt. Wir sind bereit, einige Inhalte zu erstellen. 4. Hinzufügen von Hugo: Wir werden unserem Projekt Inhalte hinzufügen. Und du könntest ein anderes riesiges Guy-Projekt kopieren und einfügen . Und wenn Sie einige meiner anderen Kurse absolviert haben, haben Sie wahrscheinlich ein großartiges Projekt, das bereit ist. Denken Sie daran, kopieren Sie nicht den Dot-Git-Ordner und fügen Sie ihn ein. Denn wenn es in diesem Projekt einen dunklen Kit-Ordner gibt, weil Sie die Git-Repository-Einstellungen im Verlauf für dieses Projekt überschreiben . Ich werde neue Inhalte erstellen , wenn Sie das Command T Ego, die neue Seite, den Punktstrich verwenden . Das ist für das aktuelle Verzeichnis , in dem wir uns bereits befinden. Standardmäßig erstellt es tatsächlich einen Ordner für Sie, aber wir haben bereits unser Ordner-Setup, das wir jetzt erhalten wird uns mitteilen, dass sich bereits Inhalt im Ordner befindet. Und du musst Gewalt anwenden. Dash, Strich, falsch. Offensichtlich wäre es vorsichtig, dass du es nicht tust. Ich habe vorhandene Inhalte mit Gewalt mitgebracht. Wie es angedeutet hat. Sie können ein Thema herunterladen oder mit dem Befehl Hugo new theme ein eigenes erstellen . Wir werden dies verwenden, um vorübergehend einige Layoutdateien zu erstellen , da wir derzeit nichts im Layout haben. Jemand kopiert und fügt neues Thema ein, Temp. Ihren Themes-Ordner suchen werden Sie sehen, dass wir einen temporären Ordner eingerichtet haben. Legen Sie alles aus und schnappen Sie es und ziehen Sie es in Ihren Layouthalter. Ich werde kein Thema verwenden. Wenn du willst. Es wurde auch ein CSS- und JS-Ordner-Setup in einer Studie erhalten. brauchst du für dieses Tutorial nicht wirklich. Ich halte einfach alles so einfach wie möglich. Es gibt Tutorial. Es geht mehr darum, mit Netlify zu arbeiten. Bevor wir fortfahren und all diese Inhalte , die wir gerade erstellt haben, verpflichten. Sie müssen sich daran erinnern, wenn der Ordner leer ist, verlieren Sie ihn mit Kindern. Sie müssen also eine Datei namens dot gatekeeper erstellen. Es spielt keine Rolle, was der Herbst kalt ist, aber wir verwenden den Convention Dot Git lässt mich genau wissen, wofür es ist. Wir können es dann kopieren und in jedes einzelne leere Foto einfügen , das Sie behalten möchten. Wir gehen dann in Layouts ein und stützen uns auf Dot-HTML. Ich persönlich benutze dieses div nicht mit der ID des Inhalts, wenn ich mit Bootstrap arbeite , nur um die Dinge wirklich einfach zu halten. Und das ist etwas , das viele meiner Schüler benutzt haben, um meine Kurse zu durchlaufen. Dann gehen wir in unsere index.html. Setzen Sie einige geschweifte Klammern ein, definieren Sie meine, invertierte Kommas darin. Und dann fügen wir Punktinhalt hinzu. Was wir tun werden, ist einen Container zu erstellen. Der Container wird auch in einer Menge Inhalt herausbringen . Wir machen einen Punkttitel. Dann kopieren wir das in Single und List. Und dann gehen wir in den Basis-Off-Teil-Setup. Also machen wir einen Gesamtwert des Punkttitels. Wir stecken unser Bootstrap-CSS rein. Ich habe einen Link zu dieser Seite. Du hast das schon gemacht. Wenn du zum Beispiel meine anderen Kurse absolviert hast, fangen wir mit euch an. Dann erstellt JavaScript ein neues Teilcode-Skript, Führer peice, das JavaScript da drin. Lass mich zurück zur Basis gehen. Setzen Sie es für mich ins Skript ein, ich mache hier ein paar semantische Tags, aber Sie müssen sich die anderen Kurse ansehen , um mehr über all diese anderen Funktionen zu erfahren , weil ich versuche diesen Kurs als kurz wie möglich. Wir erstellen dann eine Indexseite. Also verwenden wir neuen Unterstrich, Index, Gedanke, MD. Dann geh in den Inhalt. Wir nennen es zu Hause. Wir machen etwas Alarm Ipsum. Möglicherweise haben Sie kein Visual Studio-Code-Setup, in das Sie nur Inhalte einfügen müssen. Eine Sache, die du sicherstellen musst, dass du es reparierst. Das heißt, Entwurf ist wahr. Wir müssen auf „false“ ziehen. Die Seite wird also angezeigt. Du kannst dich ändern , während du dabei bist. Und das liegt an Ihnen in Archetypen unter dem Standardpunkt m d. Dies ist eine Vorlage, die zum Erstellen neuer Seiten verwendet wird. Und ich habe Entwurf auf „false“ gesetzt. Wenn ich eine neue Seite erstelle, verwende ich normalerweise Zweige und Pull-Requests. Und das zeige ich dir später in diesem Kurs. Und es funktioniert sehr gut mit Netlify. Ich setze Draft auf „false“. ist völlig optional, mich für das zu kosten, was wir gerade getan haben. Sie können einfach ein riesiges Projekt kopieren und einfügen. Aber stellen Sie sicher, dass Sie das Foto nicht kopieren und einfügen , wenn Sie es tun. Sonst wirst du jemals, was wir gerade getan haben, wenn wir ein neues Projekt eingerichtet, ein neues Terminal eröffnen und laufen? Dann klicken wir mit der Steuerung zum Anzeigen im Browser. Deshalb ist es nicht bereit, zur nächsten Lektion überzugehen. 5. Neue Netlify Website erstellen: Jetzt schauen wir uns an, eine neue Netlify-Site zu erstellen. Um ein Netlify-Konto einrichten zu können, ist das kostenlose Kontingent für das, was wir tun, vollkommen in Ordnung. Sie können dann ein gutes Projekt verbinden. Ich entscheide mich für GitHub. Wenn Sie sich bei GitHub angemeldet haben, wird dies automatisch eine Verbindung herstellen, wenn sie heruntergehen, und Sie müssen die Befehle, die Sie nur kaufen, leer festlegen. Build-Befehl wird Hugo sein und das veröffentlichte Verzeichnis wird öffentlich sein. Mein GitHub ist standardmäßig als Zweig, der der eigentliche Hauptzweig für die Bereitstellung ist. Du hast vielleicht zwei Haupt gesagt. Also überprüfe einfach, du hast den richtigen hellen Platz da. Es wird es für dich einziehen. Das stellt derzeit die Site bereit. Wir haben uns eingerichtet. Du kannst nicht in Domain-Gemälde gehen und du kannst diese Domain hier zum Beispiel ändern , ich bin OK, cool es. Skillshare, Netlify. Sie erhalten die Netlify Dot App, eine URL, und Google crawlt sie im Allgemeinen nicht. Darum musst du dir also zu viele Sorgen machen. Ich denke, ich mache Deploys und Sie werden sehen unsere Website veröffentlicht wurde. Sie können tatsächlich darauf klicken und es gibt einen Überblick darüber, was passiert ist. Und lasst uns einen Blick darauf werfen, Debug für Hugo zu aktivieren . Sie können also viel mehr darüber sehen, was passiert. Sie können auf den Link klicken und er wird Sie zu dieser genauen Version der Website senden. Aber ich gehe lieber einfach zurück zur Übersicht. Und das gibt Ihnen die öffentliche Adresse zu der Website, die veröffentlicht wurde, was wir gerade in der vorherigen Lektion erstellt haben. Wenn Sie auf die Bühne gekommen sind, wenn Sie bereit sind, mit der nächsten Lektion fortzufahren . 6. Netlify Konfiguration erstellen: Diese Demo wird einen Blick darauf werfen, wie Netlify-Builds für verschiedene Szenarien und Umgebungen konfiguriert werden. Ich lege den Link zu dieser Seite im Ergebnisbereich ein. Es wird die dateibasierte Konfigurationsseite benachrichtigt. Sie haben dies in einer Datei namens Netlify, nicht groß im Stammverzeichnis des Projekts. Und dann haben wir hier unten einen Beispielcode. Wir brauchen nicht alles davon, wer auch immer. Lasst uns also den Fall machen und dann werden wir den wichtigen Teil erscheinen lassen. Erstellen Sie eine neue Datei im Stammverzeichnis des Projekts und wir nennen sie Netlify dot double. Das erste, worüber wir uns Sorgen machen, ist der erste Teil, Build und alle Einstellungen sitzen unter der Build-Überschrift. Alle unsere globalen Einstellungen auf dem Build, es sei denn, wir werden sie überschreiben. Also werden wir kopieren und bauen. Wir machen uns keine Sorgen um die Basis, weil wir die Wurzel des Projekts als Basis verwenden . Wir werden Publish eintragen und unseren Build-Befehl eintragen. Veröffentlicht wird öffentlich sein. Der Build-Befehl, grundlegender Build-Befehl ECO. Ich habe einen Link zur Hugo-Befehlsdokument-Seite. Wir können Dash, Dash Debug für die Debug-Ausgabe hinzufügen Dash Debug für die Debug-Ausgabe damit wir sehen können, was tatsächlich vor sich geht. Und wir werden in diesem Tutorial Dash, Dash vergrößern, HTML und XML bei Plugins minimieren XML bei Plugins HTML und XML bei Plugins minimieren, weil ich so ziemlich alles gehandhabt habe. Jetzt werden wir einen Blick darauf werfen, die eingebauten Dinge für verschiedene Kontexte zu überschreiben . Dieser Strahl kontextiert, dass wir Produktion haben, was die Hauptkontexte ist. Wir haben Deploy, Preview, und wir sagen Branch Deploy, Grab, Produktion. Holen Sie sich eine Vorschau. Wir können eine Vorschau Punktumgebung anzeigen, weil ich es vorziehe, es so einzustellen. Dann die hier gezeigte Inline-Methode. Und dann richten wir auch eine für die Produktion ein. Wir haben die Zweigstelle bereitstellen und die Trickumgebung zu Mittag essen , in Echtzeit fehlt. Bauen Sie eine Umgebung Sie etwas hinzu , das für NPM vorgesehen ist. Ich werde mir ansehen, einige verschiedene Build-Befehle für Deploy, Preview und Branch Deploy zu erstellen einige verschiedene Build-Befehle für Deploy, . Denken Sie daran, ob wir einen Zweigpunkt oder eine Pool-Anfrage durchführen , bei der es sich um eine Vorschau bereitstellen soll. Sie müssen Hugo sitzen, um die benutzerdefinierte URL zu verwenden , die erstellt wird. Wenn das passiert, haben wir hier eine Option von Dash B und das legt die Basis-URL fest. Ich werde das für alle Builds einrichten Netlify. Wenn Sie die URL ändern, muss sich Netlify auf diese Weise keine Sorgen machen, in Hugo zu gehen und die Basis-URL zu aktualisieren. Und du könntest einfach Dash PE verwenden, aber ich werde Dash, Dash BaseURL verwenden , um sie offensichtlicher zu machen , wenn du in Zukunft zurückkommst Schau dir deine Konfigurationsdatei über die Befehlszeile an. Möchten Sie Cash-Basis verwenden , weil weniger als top. Aber ich werde Dash, Dash Base Year Old benutzen , um es offensichtlicher zu machen. Ich verwende das Dollarzeichen und die Hauptstädte, die auf der SQL-Prime-Unterstrich-URL bereitgestellt werden. Das wird die Basis-URL von Netlify für uns abrufen. Die ganze Sache. Löschen Sie den Inhalt, lassen Sie den Zweig zeigen, und wir werden das kommentieren, um mit dem Therapiestrick zu beginnen. Dasselbe gilt für die Vorschau und für Produktion, da es so eingerichtet wird, dass alle alten drei oben automatisch funktionieren, da wir die Basis-URL von Netlify hinzugefügt haben Netlify Umgebung in einer zukünftigen Lektion über NPM. Das werden wir speichern. Dann verpflichten wir uns verpflichten sinken wird. Wenn wir dann zur Seite „Deploys“ kommen, aktualisieren Sie es und Sie werden sehen, dass wir jetzt bauen. Und es wurde erfolgreich gebaut. Sagen wir, er, weil wir die Debug-Option ausgeführt haben, haben wir alle zusätzlichen Ausgaben von. Das ist sehr hilfreich, wenn Sie versuchen herauszufinden, was schief läuft, weil es Netlify wirklich schwierig ist, Probleme zu lösen, da dies nicht der Fall ist. Zurück auf dieser Deploys-Seite werden Sie die Zeit für den Aufbau bemerken und etwa 14 Sekunden und 16 Sekunden. Es ist wirklich wichtig, das im Auge zu behalten , da es um 2,52 steigt Minuten, drei Minuten. Sie werden Ihre Zulagen durchbrennen. Wenn Sie auf Ihre Homepage zurückkehren, werden Sie sehen, dass Sie 300 Build-Minuten pro Monat für das kostenlose Kontingent haben . Das ist wirklich wichtig , dass Sie sicherstellen, dass Sie optimieren möchten, damit Sie keine exzessiven Belbins verwenden, sonst laufen Sie aus und dann ist es ziemlich teuer zu aktualisieren vor allem, wenn es sich nur um eine einfache Website handelt. 7. NPM hinzufügen: Wir werden uns ansehen, Netlify-Projekt für npm einzurichten . Ich habe einen Link zu dieser Seite. Es ist die Umgebungsseite „Node.js“. Dinge, die wir einstellen werden. Es gibt eine Option der Node-Version. Ich werde es in irgendeiner Weise formulieren, aber wir werden es vorerst nicht benutzen, aber Sie können es entweder schreiben, wenn Sie ein Problem haben, Sie können die Nachtversionen aktualisieren. Sie können Netlify zwingen, eine neue Version zu verwenden. Aber wir machen uns wirklich Sorgen darüber, dass die Knotenumgebung jetzt standardmäßig ist , Netlify setzt die Knotenumgebung für die Entwicklung. Was das bedeutet, ist, dass, wenn Sie Entwicklungs- und Produktionsabhängigkeiten haben, alle installiert werden. Und hier gibt es eine Warnung, dass wenn wir die Knotenumgebung auf Produktion setzen , keine Entwicklerabhängigkeiten in Ihrem package.json installiert werden. Das bedeutet, dass wir die Builds auf Netlify beschleunigen können , indem wir keine Abhängigkeiten installieren , die Sie nur lokal verwenden. Zum Beispiel in Visual Studio Code zur Entwicklung Ihrer Website. Gehen wir weiter und wir legen fest, dass unter Bill Dot Umgebung in meinen Namen eingefügt wird und wir sie auf Produktion setzen. Dann werden wir dort die Versionsoptionen Node und NPM eintauchen. Wenn Sie Netlify zum Upgrade zwingen müssen. Wir werden das kommentieren , weil wir sie nicht benutzen. Lass uns weitermachen und wir richten NPM ein. Wir werden es tun, dass wir zu einem neuen Terminal kommen. Vollidiot. Zeitraum stricken. Behalte einfach alle Standardwerte für den Moment bei. Dann machen wir etwas Isolierung. Sagen Sie zum Beispiel, Sie möchten Post CSS mit Hugo verwenden. Sie müssten npm install viele Posts, CSS, Posts, CSS, CLI ausführen und dann zum Beispiel Autoprefixer sagen . Dann siehst du dir das package.json an. Werde das Terminal los. Sie werden sehen, dass sie Unabhängigkeiten installiert haben und sie für uns auf Netlify installiert werden, obwohl wir unsere Produktion in unserer Umgebung auf die Produktion einstellen. Lassen Sie uns weitermachen und lassen Sie uns einige Entwicklungsabhängigkeiten installieren . Zum Beispiel führt der ES-Link zum Linten Ihrer ES6 JavaScript-Dateien NPM install dash, dash, speichern Sie das div. Dann schauen sie sich unser package.json an. Wir haben jetzt unsere Entwickler-Abhängigkeiten. Es wird nicht nach oben sein ist Netlify da wir die Knotenumgebung der Produktion verwenden. Es wird also ein bisschen Zeit sparen. Wir bauen. Manche Leute machen sich nicht die Mühe , weil sie nur der ersten Instanz installiert werden, sie haben kein Bargeld bekommen. Aber ich ziehe es vor, sie einfach getrennt zu halten. Microsoft oder einfacher. 8. Branch baut: Es wird keinen Blick auf Zweigfelder und wie wir einen neuen Zweig erstellen können, den wir bekommen. Und dann können wir diesen Zweig auf Netlify aufbauen, damit Sie eine Vorschau der Idee anzeigen können , an der Sie arbeiten. Oder Sie können zum Beispiel einen Fehler auf der Registerkarte „Gedanken“ beheben und Ihre Website auswählen. Gehe dann in die Site-Einstellungen und baue und bereitstelle sie bereit. Dann geh in Zweige. Und derzeit haben wir unseren Master als unsere Produktionszweige, eine Filiale, die erstellt und die für die Haupt-URL in der Branche bereitgestellt wird, da Sie nur wenige Optionen auswählen können, die Sie alle auswählen können. Und es wird jeden einzelnen Zweig bauen, den du erstellst. Andernfalls können Sie einzelne Zweige erstellen. Ich persönlich ziehe es vor, einzelne Zweige zu erstellen, weil ich nicht jeden einzelnen Zweig möchte, also erstelle ich es zu bauen. Sie müssen nur den Namen der Verzweigung angeben, aber im Moment werden wir einfach alles einstellen, um es diesem Tutorial zu erleichtern. Das werden wir speichern. Und dann gehen wir zum Zweig, zum unteren Master, und wir werden einen neuen Zweig erstellen. Und ich werde coole It Six Branch Deploy erstellen. Sie können es leicht finden. Und was wir dann tun werden, ist, dass wir einige Änderungen vornehmen. Also gehen wir auf Layouts, Partials und machen uns auf den Weg. Und dann kopieren wir den Standard-Bootstrap Five, navbar. Und dann fügen wir das ein. Bevor wir es begehen. Wir führen bei gedrückter Strg-Klick aus. Man kann sagen, dass es derzeit wie erwartet funktioniert. Es ist wichtig, dass Sie Änderungen in der Vorschau anzeigen, bevor Sie sie über Netlify übertragen. Andernfalls verschwendet es Ihre Zeit und Ihnen gehen die Build-Zulagen aus. Was wir jetzt tun, ist, dass wir unsere Committing Add Navbar setzen. Ich veröffentliche tatsächlich Guide To The Deploys-Seite für den kleinen Teil, an dem du gerade arbeitest. Und Sie werden feststellen , dass es sich auf dem Zweig Deploy Branch aufbaut . Sollte überhaupt nicht zu lange dauern. Das läuft jetzt durch. Wir haben den Bug ihre Gedanken live ausgegeben. Also gehe ich einfach zurück zur Deploys-Seite. Wir haben dort einen Button, der zum GitHub-Code geht. Das ist die eigentliche Verpflichtung, die Zweigstelle. Wenn Sie die Verzweigung bereitstellen möchten, müssen Sie auf diesen bestimmten Build klicken. Und dann öffne Branch Deploy. Das unterscheidet sich erheblich von der tatsächlichen Website. Sie werden feststellen, dass dort zwei verschiedene Slots stattfinden. Ich muss vorsichtig sein, wenn du es mit Kunden zu tun hast. Ich finde das besonders verwirrend, obwohl es sehr mächtig ist, weil Sie einen Entwurf für eine neue ID erstellen können , an der Sie arbeiten sollen, und Sie können sie mit einer Zweigbereitstellung teilen. Jetzt gibt es einen Button zum Veröffentlichen. Empfehlen Sie dies, da Sie am Ende einen anderen Zweig veröffentlichen. Was Sie tun können, ist zum Beispiel auf GitHub Desktop oder in Visual Studio Code. Wir können dann nach hinten gehen, um zu meistern. Und dann können wir Zweig auswählen, Zweig zusammenführen, und wir können in Branch Deploy zusammenführen. Das einzige Problem ist, dass ich das synchronisiere. Dann ist das Problem, wenn das eine Ära erzeugt, kann es etwas schwierig sein, sie zu fangen. Sie werden sehen, dass es sich jetzt in diesen Änderungen auftaucht und das in den Master es verschmilzt Sie sollten wahrscheinlich eine Vorschau im Visual Studio-Code mit euch anzeigen. Also der Befehl zuerst, bevor du ihn mit gut synchronisierst , der veröffentlicht wird. Wenn wir also zur Hauptseite gehen, werden Sie sehen, dass ich jetzt unsere Navbar aus der Filiale gezogen habe und Zweig bereitstelle. Normalerweise würden Sie den Zweig löschen, nachdem Sie es erwähnt haben, aber ich werde diesen Zweig dort belassen, damit Sie im Repository auf GitHub sehen können , falls Sie dies getan haben irgendwelche Probleme mit dieser bestimmten Lektion oder ALS, und Sie können alle verschiedenen Zweige sehen , wann immer schon voll. Die nächste Lektion , in der wir uns das etwas genauer angeschaut haben . 9. Pull Request Builds (Vorschau bereitstellen): Jetzt werden wir uns also schlechte Anfragen anschauen. Zeigen Sie, wie Sie den Pull-Request ausführen können. Gehen Sie zu Netlify, gehen Sie zu Ihrer Website und suchen Sie dann nach Einstellungen und bauen Sie Mitarbeiter auf. Das erste, was wir tun werden, ist, dass wir das Zweiggebäude mit Ausnahme der Produktionsbranche ausschalten , da dies zu unnötigem Bauen führt. Dann ist die nächste Option das Bereitstellen von Vorschauen, und hier dreht sich alles um Pool-Anfragen. Jetzt ist es standardmäßig eingerichtet, um schlechte Anfragen für Ihre Produktionszweig oder Zweigstelle zu erstellen schlechte Anfragen und Zweige bereitzustellen. Und ich zeige dir in einem Augenblick genau, was das bedeutet. Wir haben ein Netlify Draw-fähiges Tool, das wir nicht verwenden werden, weil sie arbeiten oder ich dabei bin. Ich zeig dir sowieso, was es ist. Wir lassen es mit den Standardeinstellungen einrichten, dann bringen wir Einzelpersonen zu Ihrem Code zurück. Ich mache einen neuen Zweig. Ich rufe diese Anfragen an den Zweigpool an. Das kannst du im Git-Repository sagen. Wir werden tun, dass wir auf die Homepage gehen etwas von der vollen Bedeutung ändern werden. Nur um die Dinge offensichtlich zu machen, setzen wir ein Div mit etwas Rand, etwas Polsterung und etwas Hintergrund ein. Dann schauen wir uns das an. Dann ändern wir die Textfarbe. Jetzt werden wir uns verpflichten, den Zweig veröffentlichen. Dann gehen wir zum Repository. Nur eine kleine Notiz, Sie können tatsächlich ein Plugin bekommen. Sie können GitHub erstellen und Anfragen aus Visual Studio-Code ziehen. Und ich zeige es Ihnen auf der Website, weil keine Installation erforderlich ist . Gehen Sie also auf GitHub nach unten und wählen Sie den Zweig aus. Es heißt, die Brücke sei ein Commit vor Moskau. Also werden wir Pool-Anfragen gegen Moskau erstellen. Eine Möglichkeit, dies zu tun, ist nur ein Dropdown-Menü beizutragen. Wir können Anfragen abrufen, sonst können Sie sie durch schlechte Anfragen erstellen. Dann vergleichen wir den Zweig der vier Krusten. Und wenn du es dann nicht schlechte Anfragen nennen würdest, habe ich das gerade getan. Sie können die Lektion identifizieren. Wir vergleichen es mit Mostafa. Es hat die Commit-Nachricht für uns Tag gegriffen. Weitere Informationen können Sie dort abgeben. Es heißt, auftauchen zu können, was großartig ist. Wir werden Kredit geben. Github überprüft die Fähigkeit zu verwalten, und dann führen wir einige Netlify-Checks aus. Netlify geht durch, während es die Bereitstellungsvorschau erstellt. Es führt die Schecks für uns durch und wir werden in einem Moment ein paar Ergebnisse erhalten. Lassen Sie uns also R1 überprüfen, wir haben keine Probleme. Ich kann tatsächlich auf den Detail-Button klicken und es wird dir tatsächlich die Spielvorschau zeigen . So wie wir es auf dem Hugo angeschaut haben, nun, das ist eine Version des Salzes, das tatsächlich mit dem Master-Zweig verschmolzen ist. Zum Beispiel könnten Sie jemanden haben, der einige Änderungen am Master-Zweig vorgenommen hat und an etwas in Ihrem eigenen Zweig gearbeitet hat. Zum Beispiel dieser Hintergrund mit anderen Texten. Und dann zeigt dies, wie es tatsächlich aussieht , zusammengeführt zu werden. Ich denke, dass die Bereitstellung zuvor großartig ist, weil es eine Erinnerung daran ist, dass die Arbeit dort sitzt und Sie weiter an diesem Zweig arbeiten können und die Bereitstellungsvorschau weiterhin aktualisiert. Nehmen wir zum Beispiel an, Sie haben dem Kunden mitgeteilt, dass Sie ihm gerne zwei Überarbeitungen zu einem Entwurf geben. Nun, dann können Sie Ihre Poolanfragen öffnen . Sie können Ihre ganze Arbeit an dieser Revision erledigen. Und wenn sie damit zufrieden sind und sich abgemeldet haben, können Sie sich auf ihre Website verpflichten. Und wenn Sie jetzt den Mittelwert versprochen haben, führen Sie zwei Revisionen vor. Dann öffnest du dich. Und ich habe es geliebt, Vorschau zu spielen. Es wird die Anfrage abrufen, wenn sie kleine Änderungen vornehmen möchten. Und dann kannst du daran arbeiten. Und dann können Sie diese Änderungen vornehmen. Und was Sie in Ihrer Bereitstellungsvorschau betrachten, werden Sie am unteren Rand eine Symbolleiste melden, die auf p angezeigt wird und die nicht tatsächlich auf der endgültigen Site angezeigt wird, auf der Sie die Pool-Anfrage übernommen haben. Aber du hast eine Reihe von Optionen. Er, und sie sehen ziemlich einfach aus. Aber wenn Sie sich zum Beispiel den Screenshot ansehen, warten Sie, bis er geladen wird. Sie können diesen Screenshot tatsächlich in einem Kommentar verwenden. Du musst sicherstellen, dass du bei GitHub angemeldet bist. Und das ist eine großartige Möglichkeit, mit Atainment zu kommunizieren. Es rationalisiert den Prozess. Sie haben auch die Bildschirmaufnahme dort abgelegt. Lassen Sie mich die Schaltfläche scannen, damit Sie diese mit einem mobilen Gerät scannen können und dann eine Vorschau der Website anzeigen können. In meinem Modus mussten Sie sich nicht die Mühe machen , die lange URL einzufüllen. Aber wir haben auch den Button auf der linken Seite und Sie können detailliert auf alle diese Funktionen zugreifen. Zum Beispiel werden wir jetzt sogar die Pull-Anfrage auf GitHub kommentieren. Sie können sogar neue Probleme erstellen, überprüfen, wer im Team ist, sie per E-Mail senden und so weiter. Es ist alles da drin. Das ist der Netlify Dora. Ich hebe die Schaltung an, die tatsächlich standardmäßig eingeschaltet war. Sie können dies jedoch ausschalten, wenn Sie nicht möchten, dass Teammitglieder darauf zugreifen. Ich habe gerade die Bereitstellungsvorschau in einem Browser geöffnet , der nicht geliebt wird, das Internet wird als scheinbares Licht angewendet, was passiert, wenn ein Client die Bereitstellungsvorschau ansieht. Und du musst nur dort sein , wo du die Leiste noch unten haben wirst. Und das könnte einen Kunden verwirren. Wenn Sie dies verwenden, um Kunden anzuzeigen, dass sie bei einem Featureentwurf Fortschritte machen. Ich würde die Tatsache in Betracht ziehen , dass Sie die Schublade in der Ferne ausschalten könnten , weil ich dann verwirrt diese Leiste am unteren Bildschirmrand zu haben. So können Sie auf Pull-Anfragen zusammenführen klicken, und dann können Sie die Nachricht verwirren und dann können Sie die Nachricht verwirren und auch einen Kommentar zu dieser Schaltfläche zum Löschen dieses Zweigs abgeben dieser Schaltfläche zum Löschen , sobald Sie die Poolanfragen verwaltet haben was letztendlich einen Zweig in den meisterhaft, den Hauptzweig, verwaltet , so ziemlich alles, was zu tun ist, den Zweig zu isolieren. Ich gehe nicht wie in der letzten Lektion in die Filiale, ich mochte diese Markendaten nicht, weil ich die Zweige haben will , die sie sagen, du kannst sie sagen. Ich denke, das ist der Grund, warum besser als die Franzosen eingesetzt werden. Es ist viel kontrollierbarer. Nun, sie müssen GitHub durchlaufen , während des Prozesses. Und wie gesagt, Sie können das Plug-In für Visual Studio Code nicht bekommen, obwohl ich es auf GitHub so viel grafischer bevorzuge.