Udostępnij za pośrednictwem

Wdrażanie witryny Hugo w usłudze Azure Static Web Apps

W tym artykule pokazano, jak utworzyć i wdrożyć aplikację internetową Hugo w usłudze Azure Static Web Apps. Końcowy wynik to nowa statyczna aplikacja internetowa platformy Azure ze skojarzonymi funkcjami GitHub Actions, która zapewnia kontrolę nad sposobem tworzenia i publikowania aplikacji.

W tym poradniku nauczysz się, jak:

  • Tworzenie aplikacji Hugo
  • Konfigurowanie usługi Azure Static Web Apps
  • Wdrażanie aplikacji Hugo na platformie Azure

Jeśli nie masz jeszcze konta platformy Azure, przed rozpoczęciem utwórz bezpłatne konto.

Wymagania wstępne

  • Konto Azure z aktywną subskrypcją. Jeśli go nie masz, możesz bezpłatnie utworzyć konto.
  • Konto usługi GitHub. Jeśli go nie masz, możesz bezpłatnie utworzyć konto.
  • Zainstalowano instalatora usługi Git. Jeśli go nie masz, możesz zainstalować narzędzie Git.

Tworzenie aplikacji Hugo

Tworzenie aplikacji Hugo przy użyciu interfejsu wiersza polecenia hugo:

  1. Postępuj zgodnie z przewodnikiem instalacji platformy Hugo w systemie operacyjnym.

  2. Otwieranie terminalu

  3. Uruchom Hugo CLI, aby utworzyć nową aplikację.

    hugo new site static-app

  4. Przejdź do nowo utworzonej aplikacji.

    cd static-app

  5. Inicjowanie repozytorium Git.

    git init

  6. Upewnij się, że gałąź ma nazwę main.

    git branch -M main

  7. Następnie dodaj motyw do witryny, instalując motyw jako moduł podrzędny git, a następnie określając go w pliku konfiguracji Hugo.

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

  8. Zatwierdź zmiany.

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

Wypychanie aplikacji do usługi GitHub

Aby nawiązać połączenie z usługą Azure Static Web Apps, potrzebujesz repozytorium w usłudze GitHub. W poniższych krokach pokazano, jak utworzyć repozytorium dla witryny.

  1. Utwórz puste repozytorium GitHub (nie twórz pliku README) na podstawie https://github.com/new nazwy hugo-static-app.

  2. Dodaj repozytorium GitHub jako zdalne do lokalnego repozytorium. Pamiętaj, aby dodać nazwę użytkownika usługi GitHub zamiast symbolu zastępczego <YOUR_USER_NAME> w poniższym poleceniu.

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

  3. Wgraj lokalne repozytorium na GitHub.

    git push --set-upstream origin main

Wdrażanie aplikacji internetowej

W poniższych krokach pokazano, jak utworzyć nową aplikację witryny statycznej i wdrożyć ją w środowisku produkcyjnym.

Tworzenie aplikacji

  1. Przejdź do witryny Azure Portal.

  2. Wybieranie pozycji Utwórz zasób

  3. Wyszukaj usługę Static Web Apps

  4. Wybieranie pozycji Static Web Apps

  5. Wybierz Utwórz

  6. Na karcie Podstawy wprowadź następujące wartości.

    Majątek Wartość
    Subskrypcja Nazwa subskrypcji platformy Azure.
    Grupa zasobów my-hugo-group
    Nazwa hugo-static-app
    Typ planu Bezpłatna
    Region dla interfejsu API usługi Azure Functions i środowisk przejściowych Wybierz region najbliżej Ciebie.
    Źródło Usługa GitHub

  7. Wybierz pozycję Zaloguj się przy użyciu usługi GitHub i uwierzytelnij się przy użyciu usługi GitHub.

  8. Wprowadź następujące wartości usługi GitHub.

    Majątek Wartość
    Organizacja Wybierz żądaną organizację usługi GitHub.
    Repozytorium Wybierz pozycję hugo-static-app.
    Gałąź Wybierz main.

    Uwaga / Notatka

    Jeśli nie widzisz żadnych repozytoriów, może być konieczne autoryzowanie usługi Azure Static Web Apps w usłudze GitHub. Przejdź do repozytorium GitHub i przejdź do pozycji Ustawienia > Aplikacje > autoryzowane przez OAuth, wybierz pozycję Azure Static Web Apps, a następnie wybierz pozycję Udziel. W przypadku repozytoriów organizacji musisz być właścicielem organizacji, aby udzielić uprawnień.

  9. W sekcji Szczegóły kompilacji wybierz pozycję Hugo z listy rozwijanej Ustawienia wstępne kompilacji i zachowaj wartości domyślne.

Przejrzyj i twórz

  1. Wybierz pozycję Przejrzyj i utwórz , aby sprawdzić, czy wszystkie szczegóły są poprawne.

  2. Wybierz pozycję Utwórz , aby rozpocząć tworzenie statycznej aplikacji internetowej usługi App Service i aprowizować funkcję GitHub Actions na potrzeby wdrożenia.

  3. Po zakończeniu wdrażania wybierz pozycję Przejdź do zasobu.

  4. Na ekranie zasobu wybierz link URL , aby otworzyć wdrożona aplikację. Może być konieczne odczekanie minuty lub dwóch na ukończenie funkcji GitHub Actions.

    Wdrożona aplikacja

Niestandardowa wersja hugo

Podczas generowania statycznej aplikacji internetowej jest generowany plik przepływu pracy zawierający ustawienia konfiguracji publikowania dla aplikacji. Można wyznaczyć wersję Hugo w pliku przepływu pracy, podając określoną wartość w sekcji HUGO_VERSIONenv. Poniższa przykładowa konfiguracja pokazuje, jak ustawić hugo na określoną wersję.

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

Korzystanie z funkcji Git Info w aplikacji Hugo

Jeśli aplikacja Hugo korzysta z funkcji Git Info, domyślny plik przepływu pracy utworzony dla statycznej aplikacji webowej używa akcji checkout na GitHubie w celu pobrania wersji uproszczonej repozytorium Git z domyślną głębokością 1. W tym scenariuszu Hugo widzi wszystkie pliki zawartości pochodzące z jednego zatwierdzenia, dlatego mają tego samego autora, znacznik czasu ostatniej modyfikacji i pozostałe .GitInfo zmienne.

Zaktualizuj plik przepływu pracy, aby pobrać pełną historię Git, dodając nowy parametr w actions/checkout kroku, aby ustawić fetch-depth na 0 (bez limitu).

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

Pobieranie pełnej historii zwiększa czas kompilacji przepływu pracy GitHub Actions, ale zmienne .Lastmod i .GitInfo są dokładne i dostępne dla każdego z plików zawartości.

Uprzątnij zasoby

Jeśli nie zamierzasz nadal korzystać z tej aplikacji, możesz usunąć zasób statycznej aplikacji internetowej platformy Azure, wykonując następujące kroki:

  1. Otwórz portal Azure
  2. Na górnym pasku wyszukiwania wyszukaj aplikację według podanej wcześniej nazwy
  3. Kliknij aplikację
  4. Kliknij przycisk Usuń
  5. Kliknij przycisk Tak , aby potwierdzić akcję usuwania

Dalsze kroki

Dodawanie domeny niestandardowej