Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
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):
Folgen Sie dem Installationshandbuch für Hugo auf Ihrem Betriebssystem.
Öffnen Sie ein Terminal.
Führen Sie die Hugo CLI aus, um eine neue App zu erstellen.
hugo new site static-app
Wechseln Sie zur 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
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
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.
Erstellen Sie ein leeres GitHub-Repository (erstellen Sie keine README) aus https://github.com/new der benannten hugo-static-app.
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
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
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.
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) Wählen Sie Mit GitHub anmelden aus, und authentifizieren Sie sich bei GitHub.
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.
Wählen Sie im Abschnitt "Builddetails" in der Dropdownliste "Buildvoreinstellungen"Hugo aus, und behalten Sie die Standardwerte bei.
Ü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
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:
- Öffnen sie die 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.