Udostępnij za pośrednictwem

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

  • Artykuł

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.

Z tego samouczka dowiesz się, jak wykonywać następujące czynności:

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

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

Wymagania wstępne

  • Konto platformy 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 interfejs wiersza polecenia Platformy Hugo, 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 repozytorium 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. Wypchnij lokalne repozytorium do usługi 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 pozycję Utwórz

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

    Właściwości Wartość
    Subskrypcja Nazwa subskrypcji platformy Azure.
    Grupa zasobów: my-hugo-group
    Nazwa/nazwisko hugo-static-app
    Typ planu Bezpłatna
    Region dla interfejsu API usługi Azure Functions i środowisk przejściowych Wybierz region najbliżej Ciebie.
    Source 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.

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

    Uwaga

    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 aplikacje Ustawienia > Autoryzowane aplikacje> 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.

Przegląd i tworzenie

  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.

    Deployed application

Niestandardowa wersja hugo

Podczas generowania statycznej aplikacji internetowej jest generowany plik przepływu pracy zawierający ustawienia konfiguracji publikowania dla aplikacji. Określoną wersję Hugo można wyznaczyć w pliku przepływu pracy, podając wartość w HUGO_VERSIONenv sekcji . 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 internetowej używa akcji wyewidencjonowania usługi GitHub w celu pobrania płytkiej wersji 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ą ten sam autor, znacznik czasu ostatniej modyfikacji i inne .GitInfo zmienne.

Zaktualizuj plik przepływu pracy, aby pobrać pełną historię usługi Git, dodając nowy parametr w actions/checkout kroku, aby ustawić wartość na 0 (bez limitufetch-depth):

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

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

Czyszczenie zasobów

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 witrynę Azure Portal .
  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

Następne kroki

Dodawanie domeny niestandardowej