Bereitstellen einer Hugo-Website in Azure Static Web Apps

In diesem Artikel wird veranschaulicht, wie Sie eine Hugo-Webanwendung in Azure Static Web Apps erstellen und bereitstellen. Das Endergebnis ist eine neue Azure Static Web App mit zugeordneten GitHub-Aktionen, mit denen Sie steuern können, wie die App erstellt und veröffentlicht wird.

In diesem Tutorial lernen Sie Folgendes:

• Erstellen einer Hugo-App
• Einrichten einer Azure Static Web App
• Bereitstellen der Hugo-App in Azure

Wenn Sie nicht über ein Azure-Konto verfügen, erstellen Sie ein kostenloses Konto , bevor Sie beginnen.

Voraussetzungen

• Ein Azure-Konto mit einem aktiven Abonnement. Wenn Sie noch kein Konto haben, können Sie kostenlos ein Konto erstellen.
• Ein GitHub-Konto. Wenn Sie noch kein Konto haben, können Sie kostenlos ein Konto erstellen.
• Ein Git-Setup installiert. Falls Sie keines haben, können Sie Git installieren.

Erstellen einer Hugo-App

Erstellen Sie eine Hugo-App mit der Befehlszeilenschnittstelle von Hugo (CLI):

1. Folgen Sie dem Installationshandbuch für Hugo auf Ihrem Betriebssystem.

2. Öffnen Sie ein Terminal.

3. Führen Sie die Hugo CLI aus, um eine neue App zu erstellen.

   hugo new site static-app
   

4. Wechseln Sie zur neu erstellten App.

   cd static-app
   

5. Initialisieren sie ein Git-Repository.

   git init
   

6. Stellen Sie sicher, dass der Name Ihres Branches main lautet.

   git branch -M main
   

7. Als Nächstes fügen Sie der Website ein Design hinzu, indem Sie ein Design als Git-Untermodul installieren und dann in der Hugo-Konfigurationsdatei angeben.

   git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
   echo 'theme = "ananke"' >> config.toml
   

8. Führen Sie für die Änderungen einen Commit aus.

   git add -A
   git commit -m "initial commit"
   

Übertragen Ihrer Anwendung auf GitHub

Sie benötigen ein Repository auf GitHub, um eine Verbindung mit Azure Static Web Apps herzustellen. Die folgenden Schritte zeigen, wie Sie ein Repository für Ihre Website erstellen.

1. Erstellen Sie ein leeres GitHub-Repository (erstellen Sie keine README) aus https://github.com/new der benannten hugo-static-app.

2. Fügen Sie das GitHub-Repository als Remote zu Ihrem lokalen Repository hinzu. Fügen Sie unbedingt den GitHub-Benutzernamen anstelle des Platzhalters <YOUR_USER_NAME> im folgenden Befehl hinzu:

   git remote add origin https://github.com/<YOUR_USER_NAME>/hugo-static-app
   

3. Pushen Sie Ihr lokales Repository auf GitHub.

   git push --set-upstream origin main
   

Bereitstellen Ihrer Web-App

In den folgenden Schritten wird gezeigt, wie Sie eine neue statische Website-App erstellen und in einer Produktionsumgebung bereitstellen.

Erstellen der Anwendung

1. Navigieren Sie zum Azure-Portal.

2. Wählen Sie Ressource erstellen aus.

3. Suchen Sie nach Static Web Apps.

4. Wählen Sie Static Web Apps aus.

5. Klicken Sie auf Erstellen

6. Geben Sie auf der Registerkarte Grundlagen die folgenden Werte ein.

   Eigentum	Wert
   Abonnement	Den Namen Ihres Azure-Abonnements
   Ressourcengruppe	my-hugo-group
   Name	hugo-static-app
   Plantyp	Kostenlos
   Region für Azure Functions-API und Stagingumgebungen	Wählen Sie die Region aus, die Ihnen am nächsten ist.
   Quelle	GitHub (Englisch)

7. Wählen Sie Mit GitHub anmelden aus, und authentifizieren Sie sich bei GitHub.

8. Geben Sie die folgenden GitHub-Werte ein.

   Eigentum	Wert
   Organisation	Wählen Sie Ihre gewünschte GitHub-Organisation aus.
   Aufbewahrungsort	Wählen Sie "hugo-static-app" aus.
   Filiale	Wählen Sie main aus.

   Hinweis

   Wenn Sie keine Repositorys sehen, müssen Sie möglicherweise Azure Static Web Apps auf GitHub autorisieren. Navigieren Sie zu Ihrem GitHub-Repository, wechseln Sie zu Einstellungen > Anwendungen > Autorisierte OAuth-Apps, und wählen Sie Azure Static Web Apps und dann Zuweisen aus. Bei Organisationsrepositorys müssen Sie Besitzer der Organisation sein, um die Berechtigungen erteilen zu können.

9. Wählen Sie im Abschnitt "Builddetails" in der Dropdownliste "Buildvoreinstellungen"Hugo aus, und behalten Sie die Standardwerte bei.

Überprüfen und erstellen

1. Wählen Sie Überprüfen und erstellen aus, um sicherzustellen, dass alle Details stimmen.

2. Klicken Sie auf Erstellen, um mit der Erstellung der statischen App Service-Web-App zu beginnen und einen GitHub Actions-Vorgang für die Bereitstellung anzugeben.

3. Wählen Sie nach Abschluss der Bereitstellung die Option Zu Ressource wechseln aus.

4. Wählen Sie auf dem Ressourcenbildschirm den Link URL aus, um Ihre bereitgestellte Anwendung zu öffnen. Sie müssen ggf. ein bis zwei Minuten warten, bis der GitHub Actions-Vorgang abgeschlossen ist.

   

Benutzerdefinierte Hugo-Version

Wenn Sie eine statische Web App generieren, wird eine Workflowdatei generiert, die die Veröffentlichungskonfigurationseinstellungen für die Anwendung enthält. Sie können eine bestimmte Hugo-Version in der Workflowdatei festlegen, indem Sie einen Wert für HUGO_VERSION im env Abschnitt angeben. Die folgende Beispielkonfiguration veranschaulicht, wie Hugo auf eine bestimmte Version festgelegt wird.

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "public" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env:
          HUGO_VERSION: 0.58.0

Verwenden Sie die Git Info-Funktion in Ihrer Hugo-Anwendung

Wenn Ihre Hugo-Anwendung das Git Info-Feature verwendet, nutzt die für die Static Web App erstellte Standardworkflowdatei die checkout GitHub-Action, um eine flache Version Ihres Git-Repositorys mit einer Standardtiefe von 1 abzufragen. In diesem Szenario sieht Hugo alle Ihre Inhaltsdateien als aus einem einzigen Commit stammend, sodass sie denselben Autor, den Zeitpunkt der letzten Änderung und andere Variablen aufweisen.

Aktualisieren Sie Ihre Workflowdatei, um Ihren vollständigen Git-Verlauf abzurufen , indem Sie unter dem actions/checkout Schritt einen neuen Parameter hinzufügen, um den fetch-depth Wert auf 0 (kein Limit) festzulegen:

      - uses: actions/checkout@v3
        with:
          submodules: true
          fetch-depth: 0

Durch das Abrufen des vollständigen Verlaufs wird die Buildzeit Ihres GitHub-Aktionsworkflows erhöht, aber Ihre .Lastmod und .GitInfo Variablen sind für jede Ihrer Inhaltsdateien genau und verfügbar.

Bereinigen von Ressourcen

Wenn Sie diese Anwendung nicht weiter nutzen möchten, können Sie die Azure Static Web Apps-Ressource mit den folgenden Schritten löschen:

1. Öffnen sie die Azure-Portal
2. Suchen Sie über die obere Suchleiste anhand des zuvor angegebenen Namens nach Ihrer Anwendung.
3. Klicken Sie auf die App.
4. Klicken Sie auf die Schaltfläche Löschen.
5. Klicken Sie zum Bestätigen des Löschvorgangs auf Ja.

Nächste Schritte

Hinzufügen einer benutzerdefinierten Domäne