Nasazení webu Hugo do Azure Static Web Apps

  • Článek

Tento článek ukazuje, jak vytvořit a nasadit webovou aplikaci Hugo do Azure Static Web Apps. Konečným výsledkem je nová statická webová aplikace Azure s přidruženým GitHub Actions, která vám dává kontrolu nad tím, jak se aplikace sestaví a publikuje.

V tomto kurzu se naučíte:

  • Vytvoření aplikace Hugo
  • Nastavení azure Static Web Apps
  • Nasazení aplikace Hugo do Azure

Pokud ještě nemáte předplatné Azure, vytvořte si bezplatný účet Azure před tím, než začnete.

Požadavky

Vytvoření aplikace Hugo

Vytvoření aplikace Hugo pomocí rozhraní příkazového řádku Hugo (CLI):

  1. Postupujte podle instalační příručky pro Hugo na vašem operačním systému.

  2. Otevření terminálu

  3. Spuštěním rozhraní příkazového řádku Hugo vytvořte novou aplikaci.

    hugo new site static-app

  4. Přejděte do nově vytvořené aplikace.

    cd static-app

  5. Inicializace úložiště Git

    git init

  6. Ujistěte se, že je vaše větev pojmenovaná main.

    git branch -M main

  7. Dále do lokality přidejte motiv instalací motivu jako dílčího modulu Gitu a jeho zadáním do konfiguračního souboru Hugo.

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

  8. Potvrďte změny.

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

Nasdílení aplikace do GitHubu

K připojení ke službě Azure Static Web Apps potřebujete úložiště na GitHubu. Následující kroky ukazují, jak vytvořit úložiště pro váš web.

  1. Vytvořte prázdné úložiště GitHubu (nevytvávejte soubor README) z https://github.com/new pojmenované hugo-static-app.

  2. Přidejte úložiště GitHub jako vzdálené úložiště do místního úložiště. Nezapomeňte přidat uživatelské jméno GitHubu místo zástupného symbolu <YOUR_USER_NAME> v následujícím příkazu.

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

  3. Nasdílejte místní úložiště do GitHubu.

    git push --set-upstream origin main

Nasazení webové aplikace

Následující kroky ukazují, jak vytvořit novou statickou aplikaci webu a nasadit ji do produkčního prostředí.

Vytvoření aplikace

  1. Přejděte na web Azure Portal.

  2. Vyberte Vytvořit prostředek.

  3. Vyhledejte Static Web Apps.

  4. Výběr statických webových aplikací

  5. Vyberte příkaz Vytvořit.

  6. Na kartě Základy zadejte následující hodnoty.

    Vlastnost Hodnota
    Předplatné Název vašeho předplatného Azure
    Skupina prostředků my-hugo-group
    Název hugo-static-app
    Typ plánu Zadejte možnost pro bezplatnou SKU.
    Oblast pro rozhraní API služby Azure Functions a přípravná prostředí Vyberte oblast, která je k vám nejblíže.
    Source GitHub

  7. Vyberte Přihlásit se pomocí GitHubu a ověřit se pomocí GitHubu.

  8. Zadejte následující hodnoty GitHubu.

    Vlastnost Hodnota
    Organizace Vyberte požadovanou organizaci GitHubu.
    Úložiště Vyberte hugo-static-app.
    Větev Vyberte hlavní.

    Poznámka:

    Pokud nevidíte žádná úložiště, možná budete muset autorizovat Azure Static Web Apps na GitHubu. Přejděte do svého úložiště GitHub a přejděte na Nastavení Aplikace autorizované OAuth Apps, vyberte Azure Static Web Apps a pak vyberte Udělit.>> V případě úložišť organizace musíte být vlastníkem organizace, abyste udělili oprávnění.

  9. V části Podrobnosti sestavení vyberte Hugo z rozevíracího seznamu Přednastavení sestavení a ponechte výchozí hodnoty.

Podokno Zkontrolovat a vytvořit

  1. Výběrem možnosti Zkontrolovat a vytvořit ověřte správnost podrobností.

  2. Výběrem možnosti Vytvořit spustíte vytvoření statické webové aplikace služby App Service a zřídíte GitHub Actions pro nasazení.

  3. Po dokončení nasazení vyberte Přejít k prostředku.

  4. Na obrazovce prostředku vyberte odkaz na adresu URL a otevřete nasazenou aplikaci. Možná budete muset chvíli počkat, než se GitHub Actions dokončí.

    Deployed application

Vlastní verze Hugo

Když vygenerujete statickou webovou aplikaci, vygeneruje se soubor pracovního postupu, který obsahuje nastavení konfigurace publikování pro aplikaci. Konkrétní verzi Hugo v souboru pracovního postupu můžete určit zadáním hodnoty HUGO_VERSION v env části. Následující příklad konfigurace ukazuje, jak nastavit Hugo na konkrétní verzi.

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

Použití funkce Git Info v aplikaci Hugo

Pokud vaše aplikace Hugo používá funkci Git Info, výchozí soubor pracovního postupu vytvořený pro statickou webovou aplikaci použije rezervaci GitHub Action k načtení mělké verze úložiště Git s výchozí hloubkou 1. V tomto scénáři uvidí Hugo všechny vaše soubory obsahu jako pocházející z jednoho potvrzení, takže mají stejného autora, časové razítko poslední úpravy a další .GitInfo proměnné.

Aktualizujte soubor pracovního postupu tak, aby načítal úplnou historii Gitu přidáním nového parametru actions/checkout v kroku, který nastaví fetch-depth hodnotu 0 (bez omezení):

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

Načtení úplné historie zvyšuje dobu sestavení pracovního postupu GitHub Actions, ale vaše .Lastmod a .GitInfo proměnné jsou přesné a dostupné pro každý soubor obsahu.

Vyčištění prostředků

Pokud nebudete tuto aplikaci dál používat, můžete prostředek azure Static Web App odstranit pomocí následujících kroků:

  1. Otevřete Azure Portal.
  2. Na horním panelu hledání vyhledejte aplikaci podle názvu, který jste zadali dříve.
  3. Klikněte na aplikaci.
  4. Klikněte na tlačítko Odstranit .
  5. Kliknutím na tlačítko Ano potvrďte akci odstranění.

Další kroky

Přidání vlastní domény