Samouczek: publikowanie witryny usługi Jekyll w usłudze Azure Static Web Apps

W tym artykule pokazano, jak utworzyć i wdrożyć aplikację internetową jekyll w usłudze Azure Static Web Apps.

Ten samouczek zawiera informacje na temat wykonywania następujących czynności:

  • Tworzenie witryny internetowej jekyll
  • Konfigurowanie zasobu usługi Azure Static Web Apps
  • Wdrażanie aplikacji Jekyll na platformie Azure

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

Wymagania wstępne

Tworzenie aplikacji Jekyll

Tworzenie aplikacji Jekyll przy użyciu interfejsu wiersza polecenia jekyll:

  1. W terminalu uruchom interfejs wiersza polecenia narzędzia Jekyll, aby utworzyć nową aplikację.

    jekyll new static-app
    
  2. Przejdź do nowo utworzonej aplikacji.

    cd static-app
    
  3. Zainicjuj nowe repozytorium Git.

     git init
    
  4. Zatwierdź zmiany.

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

Wypychanie aplikacji do usługi GitHub

Usługa Azure Static Web Apps używa usługi GitHub do publikowania witryny internetowej. Poniższe kroki pokazują, jak utworzyć repozytorium GitHub.

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

  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>/jekyll-azure-static
    
  3. Wypchnij repozytorium lokalne do usługi GitHub.

    git push --set-upstream origin main
    

    Uwaga

    Gałąź usługi Git może mieć inną nazwę niż main. Zastąp main wartość w tym poleceniu poprawną wartością.

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ść Wartość
    Subskrypcja Nazwa subskrypcji platformy Azure.
    Grupa zasobów jekyll-static-app
    Nazwa jekyll-static-app
    Typ planu Bezpłatna
    Region dla interfejsu API usługi Azure Functions i środowisk przejściowych Wybierz region najbliżej Ciebie.
    Element źródłowy GitHub
  7. Wybierz pozycję Zaloguj się przy użyciu usługi GitHub i uwierzytelnij się w usłudze GitHub.

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

    Właściwość Wartość
    Organizacja Wybierz żądaną organizację usługi GitHub.
    Repozytorium Wybierz pozycję jekyll-static-app.
    Gałąź Wybierz pozycję main.
  9. W sekcji Szczegóły kompilacji wybierz pozycję Niestandardowe z listy rozwijanej Ustawienia wstępne kompilacji i zachowaj wartości domyślne.

  10. W polu Lokalizacja aplikacji wprowadź ciąg ./.

  11. Pozostaw puste pole Lokalizacja interfejsu API .

  12. W polu Lokalizacja danych wyjściowych wprowadź _site.

Przegląd i tworzenie

  1. Wybierz przycisk 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 kliknij pozycję Przejdź do zasobu.

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

    Deployed application

Niestandardowe ustawienia narzędzia Jekyll

Podczas generowania statycznej aplikacji internetowej generowany jest plik przepływu pracy zawierający ustawienia konfiguracji publikowania dla aplikacji.

Aby skonfigurować zmienne środowiskowe, takie jak JEKYLL_ENV, dodaj sekcję env do funkcji GitHub Actions usługi Azure Static Web Apps w przepływie pracy.

- 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 source code path - optional
      output_location: "_site" # Built app content directory - optional
      ###### End of Repository/Build Configurations ######
   env:
      JEKYLL_ENV: production

Czyszczenie zasobów

Jeśli nie zamierzasz nadal korzystać z tej aplikacji, możesz usunąć zasób usługi Azure Static Web App, 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