So hosten Sie eine Angular-Website mit Netlify und GitHub

Wenn Sie eine Angular-Website online hosten, können Sie zwischen vielen verfügbaren Plattformen wählen. Eine davon, die Sie kostenlos nutzen können, ist Netlify.

Wenn Sie eine Kopie des Quellcodes Ihrer Website in einem GitHub-Repository speichern, können Sie diese Website mit Netlify hosten.

Netlify stellt Ihre Website auch automatisch neu bereit, wenn Sie neue Änderungen an den von Ihnen gehosteten Repository-Zweig übertragen.

So erstellen Sie eine einfache Beispiel-Angular-App

Sie können eine einfache Angular-Anwendung mit einem Editor wie Visual Studio Code erstellen. Sie können diese Website dann mit Netlify hosten.

1. Ein... kreieren neue Angular-App.
2. Erstellen Sie eine einfache Homepage. Ersetzen Sie den Code in der
   instagram viewer
   app.component.html Datei mit folgendem Zielseiteninhalt:

   <div-Klasse="Container-Dark-Header">
   <h2>Unsere Business-Website</h2>
   </div>
   <div-Klasse="Container-weiß">
   <div-Klasse="Inhalt">
   <h2>Unsere Business-Website</h2>
   <P>Erfahren Sie, wie Sie Ihre professionelle Website im Handumdrehen entwerfen, entwickeln und pflegen.</P>
   </div>
   </div>
   <div-Klasse="Behälter-Orange">
   <div-Klasse="Inhalt">
   <h2>Was wir tun</h2>
   <P>Wir geben Ihnen die Werkzeuge, um Websites und einzigartige Lösungen für Ihre Kunden zu entwickeln. Wir bieten auch Schulungen für
    Wartung und andere Website-bezogene Themen.</P>
   </div>
   </div>
   <div-Klasse="Container-weiß">
   <div-Klasse="Inhalt">
   <h2>Über uns</h2>
   <P>Wir sind ein kleines Unternehmen aus Melbourne, Australien. Unsere Räume sind einzigartig gestaltet, damit Kunden dies auch können
    Besuchen Sie uns persönlich.</P>
   </div>
   </div>
   <div-Klasse="Container-dunkle Fußzeile">
   <P>Urheberrecht 2022</P>
   </div>

3. Fügen Sie der Angular-App ein gewisses Styling hinzu, indem Sie der app.component.css Datei:

   * {
    Schriftfamilie: "Arial", serifenlos;
   }
   .Header {
    Polsterung: 30px 50px;
   }
   .Fusszeile {
    Polsterung: 5px 50px;
    Textausrichtung: Mitte;
   }
   .container-dunkel {
    Hintergrundfarbe: #202C39;
    Farbe weiß;
    Anzeige: Flex;
    Ausrichtungselemente: Mitte;
   }
   .container-orange {
    Hintergrundfarbe: #FFD091;
    Farbe: #202C39;
   }
   .container-weiß {
    Hintergrundfarbe: whitesmoke;
    Farbe: #202C39;
   }
   .Inhalt {
    Polsterung: 100px 25%;
    Anzeige: Flex;
    Biegerichtung: Säule;
    Zeilenhöhe: 2rem;
   Schriftgröße: 1.2em;
    Ausrichtungselemente: Mitte;
    Textausrichtung: Mitte;
   }

4. Fügen Sie etwas Styling für die gesamte Angular-App hinzu Stile.css:

   Körper {
    Rand: 0;
    Polsterung: 0;
   }

5. Um die App zu testen, navigieren Sie über ein Terminal oder eine Befehlszeile zu ihrem Stammordner. Schreib die ng dienen Befehl:

   ng dienen

6. Warten Sie, bis Ihr Code kompiliert ist, und besuchen Sie http://localhost: 4200/ in einem Webbrowser, um Ihre App anzuzeigen.
7. Im .browserslistrc Datei, entfernen Sie iOS Safari Version 15.2-15.3. Dadurch wird verhindert, dass Kompatibilitätsfehler in der Konsole angezeigt werden, wenn Sie das Projekt erstellen.

   letzte 1 Chrome-Version
   letzte 1 Firefox-Version
   letzten 2 Edge-Hauptversionen
   letzten 2 Hauptversionen von Safari
   letzten 2 iOS-Hauptversionen
   Firefox-ESR
   nichtios_saf 15.2-15.3
   nichtSafari 15.2-15.3

8. Erstellen Sie Ihren Code mit der ng bauen Befehl im Terminal:

   ng bauen

9. Im .gitignorieren Datei, entfernen oder auskommentieren /dist Linie. Durch das Entfernen wird sichergestellt, dass Abstand Der Ordner befindet sich in der Gruppe von Dateien, die Sie per Push in Ihr GitHub-Repository übertragen.

   # /Distanz

So pushen Sie Ihren Angular-Code auf GitHub

Sie müssen Ihren Code in einem Remote-Repository speichern, damit Netlify auf den Quellcode zugreifen kann.

Sie können ein neues Repository auf GitHub erstellen und den Code Ihrer Website in dieses Repository übertragen. Wenn Sie mit GitHub nicht vertraut sind, kann es hilfreich sein, einige davon zu verstehen Grundfunktionen von GitHub Erste.

1. Erstellen Sie ein neues Repository auf GitHub. Sie können dies tun, indem Sie sich bei GitHub anmelden und auf klicken Neu.
2. Geben Sie die Details für Ihr neues Repository ein. Geben Sie ihm einen Namen wie „netlify-app“ und eine Beschreibung. Initialisieren Sie das Repository nicht mit einer README-Datei, einer .gitignore-Datei oder einer Lizenz.
3. Navigieren Sie in einem Terminal auf Ihrem Computer zu dem Verzeichnis, in dem Sie Ihre Angular-App gespeichert haben. Führen Sie die folgenden Befehle aus, um Ihren Ordner als Git-Repository zu initialisieren:

   git init
   git hinzufügen.
   git begehen -m "zuerst begehen"

4. Pushen Sie den Code in diesem Ordner in das neue Remote-Repository, das Sie auf GitHub erstellt haben. Folge dem git remote Original hinzufügen, Git-Zweig, Und git push Befehle, die von GitHub auf Ihrer Remote-Repository-Seite bereitgestellt werden:

   git remote Original hinzufügen <Ihr GitHub-Repo-Link>
   git branch -M main
   git push -u origin main

5. Sie können bestätigen, dass sich Ihr Angular-App-Code jetzt in Ihrem Remote-GitHub-Repository befindet, indem Sie die GitHub-Repository-Seite aktualisieren.

So verwenden Sie Netlify zum Hosten Ihres Codes

Um Ihren Code mit Netlify zu hosten, müssen Sie ihm Zugriff auf Ihren GitHub-Quellcode gewähren. Netlify verwendet dann die Abstand Ordner Ihres Angular-Projekts, um die erstellte Version Ihres Codes zu veröffentlichen.

Sie können alle diese Einstellungen konfigurieren, indem Sie die Konfigurationsschritte beim Erstellen einer neuen Site befolgen:

1. Melden Sie sich an oder melden Sie sich an Netlify. Sie können dies mit Ihren GitHub-Anmeldeinformationen tun.
2. Erweitern Sie auf der Haupt-Dashboard- und Site-Listenseite Neue Website hinzufügen, und wählen Sie aus Importieren Sie ein vorhandenes Projekt.
3. Wählen GitHub.
4. Klicke auf Konfigurieren Sie Netlify auf GitHub.
5. Klicke auf Installieren.
6. Netlify zeigt eine Liste Ihrer GitHub-Repositories an. Wählen Sie diejenige aus, die Sie hosten möchten. Wenn Sie Ihr Repository beispielsweise „netlify-app“ genannt haben, wählen Sie „netlify-app“ aus der Liste aus.
7. Verlassen Sie im Konfigurationsbildschirm die Eigentümer, Verzweigen Sie sich zum Bereitstellen, Und Basisverzeichnis Felder auf ihre Standardwerte. Wenn Sie einen bestimmten Zweig veröffentlichen, z. B. einen separaten "Produktions"-Zweig, können Sie diesen in die hinzufügen Verzweigen Sie sich zum Bereitstellen Feld. Ändere das Befehl erstellen Feld zu "ng build". Für die Verzeichnis veröffentlichen Feld, geben Sie dist/. Wenn Sie den Projektnamen nicht kennen, können Sie zum dist-Ordner Ihres Projekts navigieren, um es dort zu finden. Zum Beispiel „dist/netlify-app“.
8. Klicke auf Website bereitstellen.
9. Warten Sie, bis die Bereitstellung abgeschlossen ist. Dies kann einige Minuten dauern, und Sie müssen möglicherweise die Seite aktualisieren. Wenn alles gut geht, können Sie die erfolgreiche Bereitstellung in der Bereitstellungsliste sehen. Klicken Sie auf Ihre veröffentlichte Bereitstellung, z. B. Produktion: main@HEAD.
10. Klick auf das Offene Produktionsbereitstellung Taste.
11. Jetzt können Sie Ihre Website in einem anderen Tab anzeigen, indem Sie eine URL im Format verwenden .netlify.app. Wenn Sie eine Website mit mehreren Weiterleitungen hosten, können Sie möglicherweise nicht auf andere Seiten umleiten. In diesem Fall gibt es eine Möglichkeit eine fehlgeschlagene Weiterleitung auf Netlify beheben. Wenn du willst, kannst du das auch Ändern Sie Ihren kostenlosen Domainnamen.

Hosten Sie Ihre Website mit GitHub und Netlify

Hoffentlich können Sie jetzt erfolgreich eine Website mit GitHub und Netlify hosten. Sie können automatische Bereitstellungen für bestimmte Branches eines GitHub-Repositorys einrichten. Auf diese Weise können Sie die Bereitstellung Ihrer Website automatisieren und optimieren.

Aber Netlify ist nicht die einzige Möglichkeit, eine Angular-App online bereitzustellen. Sie können auch andere Plattformen wie GitHub Pages verwenden.