Distribuera en Hugo-webbplats till Azure Static Web Apps

2025-09-29

Den här artikeln visar hur du skapar och distribuerar en Hugo-webbapp till Azure Static Web Apps. Slutresultatet är en ny Azure Static Web App med tillhörande GitHub Actions som ger dig kontroll över hur appen skapas och publiceras.

I den här tutorialen lär du dig följande:

Skapa en Hugo-app
Konfigurera Azure Static Web Apps
Distribuera Hugo-appen till Azure

Om du inte har något Azure-konto skapar du ett kostnadsfritt konto innan du börjar.

Förutsättningar

Ett Azure-konto med en aktiv prenumeration. Om du inte har ett konto kan du skapa ett konto kostnadsfritt.
Ett GitHub-konto. Om du inte har ett konto kan du skapa ett konto kostnadsfritt.
En Git-installation installerad. Om du inte har någon kan du installera Git.

Skapa en Hugo-app

Skapa en Hugo-app med hjälp av Cli (Hugo Command Line Interface):

Följ installationsguiden för Hugo i operativsystemet.
Öppna en terminal
Kör Hugo CLI för att skapa en ny app.
```
hugo new site static-app
```
Gå till den nyligen skapade appen.
```
cd static-app
```
Initiera ett Git-repo.
```
git init
```
Kontrollera att din gren heter main.
```
git branch -M main
```
Lägg sedan till ett tema på webbplatsen genom att installera ett tema som en git-undermodul och sedan ange det i Hugo-konfigurationsfilen.
```
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml
```

Genomför ändringarna.

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

Skicka ditt program till GitHub

Du behöver en lagringsplats på GitHub för att ansluta till Azure Static Web Apps. Följande steg visar hur du skapar en lagringsplats för din webbplats.

Skapa en tom GitHub-lagringsplats (skapa inte en README) från https://github.com/new med namnet hugo-static-app.
Lägg till GitHub-lagringsplatsen som en fjärranslutning till din lokala lagringsplats. Se till att lägga till ditt GitHub-användarnamn i stället för <YOUR_USER_NAME> platshållaren i följande kommando.
```
git remote add origin https://github.com/<YOUR_USER_NAME>/hugo-static-app
```
Skicka ditt lokala repo till GitHub.
```
git push --set-upstream origin main
```

Distribuera din webbapp

Följande steg visar hur du skapar en ny statisk webbplatsapp och distribuerar den till en produktionsmiljö.

Skapa programmet

Gå till Azure Portal
Välj Skapa en resurs
Sök efter Statiska webbappar
Välj Statiska webbappar
Välj Skapa

På fliken Grundläggande anger du följande värden.

Fastighet	Värde
Prenumeration	Ditt Azure-prenumerationsnamn.
resursgrupp	my-hugo-group
Namn	hugo-static-app
Typ av plan	Gratis
Region för Azure Functions API och mellanlagringsmiljöer	Välj en region som är närmast dig.
Källa	GitHub (på engelska)

Välj Logga in med GitHub och autentisera med GitHub.
Ange följande GitHub-värden.

Fastighet Värde

Organisation Välj önskad GitHub-organisation.

Lagringsplats Välj hugo-static-app.

Filial Välj huvud.

Anmärkning

Om du inte ser några lagringsplatser kan du behöva auktorisera Azure Static Web Apps på GitHub. Bläddra till din GitHub-lagringsplats och gå till Inställningar Program Auktoriserade OAuth-appar, välj > och välj >. För organisationens lagringsplatser måste du vara ägare till organisationen för att bevilja behörigheterna.
I avsnittet Bygginformation väljer du Hugo i listrutan Build Presets (Skapa förinställningar ) och behåller standardvärdena.

Fastighet	Värde
Organisation	Välj önskad GitHub-organisation.
Lagringsplats	Välj hugo-static-app.
Filial	Välj huvud.

Granska och skapa

Välj Granska + Skapa för att kontrollera att informationen är korrekt.
Välj Skapa för att starta skapandet av apptjänstens statiska webbapp och etablera en GitHub Actions för distribution.
När distributionen är klar väljer du Gå till resurs.
På resursskärmen väljer du URL-länken för att öppna ditt distribuerade program. Du kan behöva vänta en minut eller två tills GitHub Actions har slutförts.

Anpassad Hugo-version

När du genererar en statisk webbapp genereras en arbetsflödesfil som innehåller publiceringskonfigurationsinställningarna för programmet. Du kan ange en specifik Hugo-version i arbetsflödesfilen genom att ange ett värde för HUGO_VERSION i env avsnittet. Följande exempelkonfiguration visar hur du ställer in Hugo på en viss version.

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

Alternativ distribution med SWA CLI

Om ditt Hugo-program har beroenden som kräver ytterligare installation, till exempel GoLang-moduler, kan du använda Azure Static Web Apps CLI för distribution direkt. Nedan visas ett exempel på ett GitHub Actions-arbetsflöde som installerar CLI och distribuerar ditt program:

jobs:
   build_and_deploy_job:
      runs-on: ubuntu-latest
      name: Build and Deploy with SWA CLI
      steps:
         - name: Checkout code
            uses: actions/checkout@v3
            with:
               submodules: true

         - name: Install SWA CLI
            run: npm install -g @azure/static-web-apps-cli

         - name: Build Hugo site
            run: |
               # Install Hugo modules
               hugo mod get

               # Minify the supported output formats
               hugo --minify

         - name: Deploy with SWA CLI
            env:
               AZURE_STATIC_WEB_APPS_API_TOKEN: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
            run: |
               swa deploy ./public --api-location ./api --env production

Det här arbetsflödet skapar Hugo-webbplatsen och distribuerar den med hjälp av Azure Static Web Apps CLI. Det förutsätter go.mod att filen finns i rotkatalogen i projektet för att hantera beroenden och modulkonfigurationer.

Använda Git Info-funktionen i ditt Hugo-program

Om ditt Hugo-program använder Git Info-funktionen, använder den standard arbetsflödesfil som skapats för den statiska webbappen checkout GitHub Action för att hämta en shallow version av din Git-lagringsplats, med ett standarddjup på 1. I det här scenariot ser Hugo att alla dina innehållsfiler kommer från en enda incheckning, så de har samma författare, tidsstämpel för senaste ändring och andra .GitInfo variabler.

Uppdatera arbetsflödesfilen för att hämta din fullständiga Git-historik genom att lägga till en ny parameter under actions/checkout steget för att ange fetch-depth till 0 (ingen gräns):

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

Om du hämtar hela historiken ökar byggtiden för ditt GitHub Actions-arbetsflöde, men dina .Lastmod variabler och .GitInfo variabler är korrekta och tillgängliga för var och en av dina innehållsfiler.

Rensa resurser

Om du inte kommer att fortsätta att använda det här programmet kan du ta bort Azure Static Web App-resursen genom följande steg:

Öppna Azure-portalen
I det övre sökfältet söker du efter ditt program efter det namn som du angav tidigare
Klicka på appen
Klicka på knappen Ta bort
Klicka på Ja för att bekräfta borttagningsåtgärden

Nästa steg

Lägga till en anpassad domän

Feedback

Var den här sidan till hjälp?