Een Hugo-site implementeren in Azure Static Web Apps

  • Artikel

In dit artikel ziet u hoe u een Hugo-webtoepassing maakt en implementeert in Azure Static Web Apps. Het uiteindelijke resultaat is een nieuwe Azure Static Web Apps-resource met bijbehorende GitHub-acties, waarmee u beheert hoe de app wordt gebouwd en gepubliceerd.

In deze zelfstudie leert u het volgende:

  • Een Hugo-app maken
  • Een Azure Static Web Apps-resource instellen
  • De Hugo-app implementeren in Azure

Als u geen Azure-abonnement hebt, kunt u een gratis Azure-account maken voordat u begint.

Vereisten

  • Een Azure-account met een actief abonnement. Als u nog geen account hebt, kunt u gratis een account maken.
  • Een GitHub-account. Als u nog geen account hebt, kunt u gratis een account maken.
  • Er is een Git-installatie geïnstalleerd. Als u er nog geen hebt, kunt u Git installeren.

Een Hugo-app maken

Een Hugo-app maken met behulp van de Hugo-CLI (opdrachtregelinterface):

  1. Volg de installatiehandleiding voor Hugo in uw besturingssysteem.

  2. Open een terminal

  3. Voer de Hugo-CLI uit om een nieuwe app te maken.

    hugo new site static-app

  4. Ga naar de zojuist gemaakte app.

    cd static-app

  5. Initialiseer een Git-opslagplaats.

    git init

  6. Zorg ervoor dat uw vertakking de naam mainheeft.

    git branch -M main

  7. Voeg vervolgens een thema toe aan de site door een thema te installeren als een Git-submodule, en deze vervolgens op te geven in het Hugo-configuratiebestand.

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

  8. Voer de wijzigingen door.

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

Push de toepassing naar GitHub

U hebt een opslagplaats in GitHub nodig om verbinding te maken met Azure Static Web Apps. In de volgende stappen ziet u hoe u een opslagplaats maakt voor uw site.

  1. Maak in https://github.com/new een lege GitHub-opslagplaats (maak geen Leesmij-bestand) met de naam statische-hugo-app.

  2. Voeg de GitHub-opslagplaats als externe locatie toe aan de lokale opslagplaats. Zorg ervoor dat u de tijdelijke aanduiding <YOUR_USER_NAME> in de volgende opdracht vervangt door uw GitHub-gebruikersnaam.

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

  3. Push de lokale opslagplaats naar GitHub.

    git push --set-upstream origin main

De web-app implementeren

De volgende stappen laten zien hoe u een nieuwe statische site-app maakt en deze implementeert in een productieomgeving.

De toepassing maken

  1. Ga naar de Azure-portal

  2. Selecteer Een resource maken

  3. Zoek naar Static Web Apps

  4. Statische web-apps selecteren

  5. Selecteer Maken.

  6. Voer op het tabblad Basisinformatie de volgende waarden in.

    Eigenschappen Weergegeven als
    Abonnement Uw Azure-abonnementnaam.
    Resourcegroep my-hugo-group
    Naam hugo-static-app
    Plantype Gratis
    Regio voor Azure Functions-API en faseringsomgevingen Selecteer een regio die het dichtst bij u in de buurt ligt.
    Source GitHub

  7. Selecteer Aanmelden met GitHub en verifieer met GitHub.

  8. Voer de volgende GitHub-waarden in.

    Eigenschappen Weergegeven als
    Organisatie Selecteer de gewenste GitHub-organisatie.
    Opslagplaats Selecteer hugo-static-app.
    Vertakking Selecteer de hoofdmap.

    Notitie

    Als u geen opslagplaatsen ziet, moet u mogelijk Azure Static Web Apps autoriseren op GitHub. Blader naar uw GitHub-opslagplaats en ga naar Instellingen Toepassingen geautoriseerde OAuth-apps, selecteer Azure Static Web Apps en selecteer Vervolgens Verlenen.>> Voor organisatie-opslagplaatsen moet u een eigenaar van de organisatie zijn om de machtigingen te verlenen.

  9. Selecteer Hugo in de vervolgkeuzelijst Build Presets in de sectie Build Details en behoud de standaardwaarden.

Controleren en maken

  1. Selecteer Controleren + Maken om te controleren of de details juist zijn.

  2. Selecteer Maken om het maken van de statische App Service-web-app te starten en een GitHub Actions in te richten voor implementatie.

  3. Zodra de implementatie is voltooid, selecteert u Ga naar de resource.

  4. Selecteer in het resourcescherm de URL-koppeling om uw geïmplementeerde toepassing te openen. Mogelijk moet u een paar minuten wachten totdat de GitHub Actions zijn voltooid.

    Deployed application

Aangepaste Hugo-versie

Wanneer u een statische web-app genereert, wordt er een werkstroombestand gegenereerd dat de configuratie-instellingen voor de publicatie bevat. U kunt een specifieke Hugo-versie in het werkstroombestand aanwijzen door in de sectie env een waarde voor HUGO_VERSION op te geven. In de volgende voorbeeldconfiguratie ziet u hoe u Hugo instelt op een specifieke versie.

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

De Git Info-functie gebruiken in uw Hugo-toepassing

Als uw Hugo-toepassing gebruikmaakt van de Git Info-functie, gebruikt het standaardwerkstroombestanddat is gemaakt voor de statische web-app de GitHub-actie uitchecken om een ondiepe versie van uw Git-opslagplaats op te halen, met een standaarddiepte van 1. In dit scenario ziet Hugo al uw inhoudsbestanden als afkomstig van één doorvoering, zodat ze dezelfde auteur, laatste wijzigingstijdstempel en andere .GitInfo variabelen hebben.

Werk uw werkstroombestand bij om uw volledige Git-geschiedenis op te halen door een nieuwe parameter toe te voegen onder de actions/checkout stap om de fetch-depth instelling in 0 te stellen op (geen limiet):

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

Als u de volledige geschiedenis ophaalt, wordt de buildtijd van uw GitHub Actions-werkstroom verhoogd, maar uw .Lastmod variabelen .GitInfo zijn nauwkeurig en beschikbaar voor elk van uw inhoudsbestanden.

Resources opschonen

Als u deze toepassing verder niet gaat gebruiken, kunt u de Azure Static Web Apps-resource verwijderen door de volgende stappen te volgen:

  1. Open Azure Portal
  2. Zoek de toepassing in de bovenste zoekbalk via de naam die u deze eerder hebt gegeven
  3. Klik op de app
  4. Klik op de knop Verwijderen
  5. Klik op Ja om de verwijdering te bevestigen

Volgende stappen

Een aangepast domein toevoegen