Das Bereitstellen von Angular-Anwendungen auf GitHub-Seiten ist eine großartige Möglichkeit, sie kostenlos zu hosten. Angular ist ein beliebtes JavaScript-Framework zum Erstellen von Single-Page-Anwendungen.

Angular verfügt über eine umfassende Befehlszeilenschnittstelle, die das schnelle Erstellen und Einrichten von JavaScript-Anwendungen unterstützt. Die Angular-CLI verfügt über mehrere Befehle zum Erstellen, Erstellen, Bereitstellen und Generieren von Anwendungskomponenten.

Sie können die CLI auch verwenden, um Angular-Anwendungen auf verschiedenen Zielen bereitzustellen, einschließlich GitHub-Seiten.

Was du brauchst

Um dieses Handbuch optimal nutzen zu können, müssen Sie über die folgenden Fähigkeiten und Werkzeuge verfügen:

  • Sie sollten vertraut sein die Grundlagen von Angular, wie das Konzept von Apps, Einstellungen, URLs usw.
  • Sie kennen sich aus die Grundlagen von GitHub und Git, wie das Erstellen eines GitHub-Kontos, das Erstellen eines Git-Repositorys (Repo) und GitHub-Seiten (GH-Seiten).
    • instagram viewer
  • Sie haben eine einsatzbereite Angular-Anwendung.
  • Ihre Basis-URL befindet sich auf dem richtigen Pfad. Bereitstellungen auf GH-Seiten schlagen fehl, weil die falsche Basis-href (Basis-URL) festgelegt wird.
  • Ein GitHub-Konto.
  • Ein GitHub-Repository (Repository) mit Anwendungscode.

Nachdem Sie all dies eingerichtet haben, können wir mit dem Bereitstellungsprozess beginnen.

Bereitstellungsprozess

Zunächst sollten Sie ein GitHub-Repository für Ihr Projekt erstellt und den Code an die Haupt/Meister Zweig.

Erstellen Sie als Nächstes einen GH-Seiten-Zweig.

1. Erstellen Sie einen GH-Seiten-Zweig

Dies ist ein Hack, der Ihnen helfen wird, den Link zu den GH-Seiten zu erhalten, um die Basis-href festzulegen.

Erstellen Sie zunächst GH-Seiten in Ihrem lokalen Repository mit dem folgenden Befehl:

git branch gh-seiten

Als nächstes checken Sie aus dem Hauptzweig zu den GH-Seiten aus, um den gesamten Code zu übertragen.

git checkout gh-seiten

Pushen Sie dann GH-Seiten zu GitHub, um einen Remote-GH-Seiten-Zweig zu erstellen.

git push origin gh-seiten

Klicken Sie in der Symbolleiste unter dem Repo-Namen auf Einstellungen > Seiten.

Unter Aufbau und Bereitstellung, wählen Von einer Verzweigung aus bereitstellen. Wählen Sie als Nächstes aus gh-Seiten als Name der Verzweigung, und klicken Sie dann auf Speichern. Dadurch wird oben rechts unter dem GH-Seiten-Label ein GH-Seiten-Link erstellt.

Kopieren Sie als Nächstes diesen Link auf die veröffentlichte Website, wie unten dargestellt. Sie verwenden den Link, um die Basisreferenz während der Bereitstellung einzurichten.

3. Installieren Sie Angular-CLI-GHpages

Das Paket angle-cli-ghpages ist ein Tool, das die Angular-CLI für Bereitstellungszwecke verwendet.

Navigieren Sie zurück zu Ihrem lokalen Projekt-Repository. Installieren Sie dann angle-cli-ghpages und führen Sie es mit diesem Befehl aus:

ng Winkelkli-ghpages hinzufügen

4. Stellen Sie die App bereit

Um die App in der Produktion zu erstellen, müssen Sie sie mit einem Remoteserver auf GitHub verbinden.

Konfigurieren Sie Ihre App für einen Remote-Server, indem Sie den folgenden Befehl ausführen:

ng deploy --base-href=https://GithubUserName.github.io/GithubRepoName/

Denken Sie daran, den obigen Link durch den Live-Link von GH-Seiten zu ersetzen

Ein erfolgreicher Build sieht wie in der folgenden Abbildung aus:

Navigieren Sie als Nächstes zu GitHub und klicken Sie auf den Link GH-pages, um Ihr bereitgestelltes Projekt anzuzeigen.

Herzlichen Glückwunsch, Sie haben Ihre Angular-App bereitgestellt!

Wenn der Link nur die README-Datei anzeigt, gehen Sie bitte zurück zu den Einstellungen der GitHub GH-Seiten. Stellen Sie sicher, dass der ausgewählte Branch gh-pages ist und nicht der main- oder master-Branch. Geben Sie ihm dann fünf Minuten Zeit und laden Sie ihn neu. Manchmal braucht GitHub Zeit, um Änderungen widerzuspiegeln.

Um mehr darüber zu erfahren, wie Sie Angular CLI bei der Bereitstellung verwenden können, besuchen Sie die Eckige Dokumentation.

So stellen Sie eine Angular-App auf GitHub-Seiten bereit

Es gibt mehrere Möglichkeiten, Angular-Apps auf GH-Seiten bereitzustellen, aber diese Methode ist die einfachste. Sie richten Ihren GH-Seiten-Repo-Link ein und verwenden ihn mit der Angular-CLI, um Ihre App auf GitHub-Seiten bereitzustellen.

Mit Angular und Angular CLI können Sie noch viel mehr tun. Fühlen Sie sich frei zu erkunden. Verwenden Sie die CLI zum Bereitstellen von Apps auf GH-Seiten für kostenlose Sichtbarkeit und Hosting für Ihre Anwendungen.