Distribuera en Hugo-webbplats till Azure Static Web Apps

Artikel
01/10/2024

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 självstudien lär du dig att:

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

Om du inte har en Azure-prenumeration skapar du ett kostnadsfritt Azure-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 en Git-lagringsplats.
```
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
```
Push-överför din lokala lagringsplats 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.

Property	Värde
Abonnemang	Ditt Azure-prenumerationsnamn.
Resursgrupp	my-hugo-group
Namn	hugo-static-app
Plantyp	Kostnadsfri
Region för Azure Functions API och mellanlagringsmiljöer	Välj en region som är närmast dig.
Source	GitHub

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

Property Värde

Organisation Välj önskad GitHub-organisation.

Lagringsplats Välj hugo-static-app.

Gren Välj huvud.

Kommentar

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 Azure Static Web Apps och välj sedan Bevilja. 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.

Property	Värde
Organisation	Välj önskad GitHub-organisation.
Lagringsplats	Välj hugo-static-app.
Gren	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

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

Om ditt Hugo-program använder Git Info-funktionen använder standardarbetsflödesfilensom skapats för den statiska webbappen GitHub-åtgärden i kassan för att hämta en grund version av Git-lagringsplatsen med standarddjupet 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