Veröffentlichen einer Hugo-Website in Azure Static Web Apps

Artikel
01/10/2024

In diesem Artikel wird gezeigt, wie Sie eine Hugo-Webanwendung erstellen und in Azure Static Web Apps bereitstellen. Das Ergebnis ist eine neue Azure Static Web Apps-Instanz mit zugehöriger GitHub Actions-Instanz, mit der 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 Apps-Instanz
Bereitstellen der Hugo-App in Azure

Wenn Sie kein Azure-Abonnement haben, erstellen Sie ein kostenloses Azure-Konto, bevor Sie beginnen.

Voraussetzungen

Ein Azure-Konto mit einem aktiven Abonnement. Falls Sie über keins verfügen, können Sie ein kostenloses Konto erstellen.
Ein GitHub-Konto. Falls Sie über keins verfügen, können Sie ein kostenloses Konto erstellen.
Ein Git-Setup installiert. Falls Sie keines haben, können Sie Git installieren.

Erstellen einer Hugo-App

Erstellen Sie mithilfe der Hugo-Befehlszeilenschnittstelle (Command Line Interface, CLI) eine Hugo-App:

Befolgen Sie die Installationsanweisungen für Hugo unter Ihrem Betriebssystem.
Öffnen Sie ein Terminal.
Führen Sie die Hugo-Befehlszeilenschnittstelle aus, um eine neue App zu erstellen.
```
hugo new site static-app
```
Wechseln Sie zu der neu erstellten App.
```
cd static-app
```
Initialisieren Sie ein Git-Repository.
```
git init
```
Stellen Sie sicher, dass der Name Ihres Branches main lautet.
```
git branch -M main
```
Fügen Sie als Nächstes der Website ein Design hinzu, indem Sie ein Design als Git-Submodul installieren und es dann in der Hugo-Konfigurationsdatei angeben.
```
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml
```
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. In den folgenden Schritten wird veranschaulicht, wie Sie ein Repository für Ihre Website erstellen.

Erstellen Sie über https://github.com/new ein leeres GitHub-Repository mit dem Namen hugo-static-app. Erstellen Sie keine README-Datei.
Fügen Sie das GitHub-Repository als Remoteressource 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
```
Übertragen 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

Navigieren Sie zum Azure-Portal.
Wählen Sie Ressource erstellen aus.
Suchen Sie nach Static Web Apps.
Wählen Sie Static Web Apps aus.
Klicken Sie auf Erstellen

Geben Sie auf der Registerkarte Grundlagen die folgenden Werte ein.

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

Wählen Sie Mit GitHub anmelden aus, und authentifizieren Sie sich bei GitHub.
Geben Sie die folgenden GitHub-Werte ein.

Eigenschaft Wert

Organisation Wählen Sie Ihre gewünschte GitHub-Organisation aus.

Repository Wählen Sie hugo-static-app aus.

Branch 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.
Wählen Sie im Abschnitt Builddetails in der Dropdownliste Buildvoreinstellungen die Option Hugo aus, und übernehmen Sie die Standardwerte.

Eigenschaft	Wert
Organisation	Wählen Sie Ihre gewünschte GitHub-Organisation aus.
Repository	Wählen Sie hugo-static-app aus.
Branch	Wählen Sie main aus.

Überprüfen und Erstellen

Wählen Sie Überprüfen und erstellen aus, um sicherzustellen, dass alle Details stimmen.
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.
Wählen Sie nach Abschluss der Bereitstellung die Option Zu Ressource wechseln aus.
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

Beim Generieren einer statischen Web-App wird eine Workflowdatei generiert, die die Konfigurationseinstellungen der Anwendung für die Veröffentlichung enthält. Sie können eine bestimmte Hugo-Version in der Workflowdatei festlegen, indem Sie im Abschnitt env einen Wert für HUGO_VERSION angeben. In der folgenden Beispielkonfiguration wird veranschaulicht, wie Sie Hugo auf eine bestimmte Version festlegen.

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 des GitInfo-Features in Ihrer Hugo-Anwendung

Wenn Ihre Hugo-Anwendung das GitInfo-Feature verwendet, nutzt die für die statische Web-App erstellte Standardworkflowdatei die GitHub-Aktion zum Auschecken, um eine flache Version Ihres Git-Repositorys mit der Standardtiefe 1 abzurufen. In diesem Szenario betrachtet Hugo alle Ihre Inhaltsdateien als aus einem einzelnen Commit stammend, sodass sie denselben Autor, Zeitstempel der letzten Änderung und andere .GitInfo-Variablen aufweisen.

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

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

Durch das Abrufen des vollständigen Verlaufs verlängert sich die Buildzeit Ihres GitHub Actions-Workflows, aber die Variablen .Lastmod und .GitInfo sind genau und für jede Ihrer Inhaltsdateien 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:

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

Nächste Schritte

Hinzufügen einer benutzerdefinierten Domäne

Freigeben über