Kurz: publikování webu Jekyll do Azure static Web Apps

Tento článek ukazuje, jak vytvořit a nasadit webovou aplikaci v Jekyll do služby Azure static Web Apps.

V tomto kurzu se naučíte:

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

Požadavky

• Nainstalovat Jekyll
  • v případě potřeby můžete použít Subsystém Windows pro Linux a podle pokynů Ubuntu.
• Účet Azure s aktivním předplatným. Pokud ho nemáte, můžete si účet zdarma vytvořit.
• Účet GitHub. Pokud ho nemáte, můžete si účet zdarma vytvořit.

Vytvoření aplikace Jekyll

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

1. Z terminálu spusťte rozhraní příkazového řádku Jekyll, abyste mohli vytvořit novou aplikaci.

   jekyll new static-app
   

2. Přejděte na nově vytvořenou aplikaci.

   cd static-app
   

3. Inicializujte nové úložiště Git.

    git init
   

4. Potvrďte změny.

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

Vložení aplikace do GitHub

statický Web Apps Azure používá GitHub k publikování vašeho webu. následující kroky ukazují, jak vytvořit úložiště GitHub.

1. vytvořte prázdné úložiště GitHub (nevytvářejte soubor readme) z https://github.com/new pojmenovaného jekyll-azure-static.

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

   git remote add origin https://github.com/<YOUR_USER_NAME>/jekyll-azure-static
   

3. Vložení místního úložiště do GitHub.

   git push --set-upstream origin main
   

   Poznámka

   Vaše větev Git může být pojmenována odlišně main . Nahraďte main tímto příkazem správnou hodnotou.

Nasazení webové aplikace

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

Vytvoření aplikace

1. Přejděte na Azure Portal.

2. Vyberte vytvořit prostředek .

3. Vyhledejte Static Web Apps.

4. Vybrat statickou Web Apps

5. Vyberte 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ů	Jekyll-static-App
   Název	Jekyll-static-App
   Typ plánu	Free
   Oblast pro Azure Functions rozhraní API a přípravná prostředí	Vyberte oblast, která je pro vás nejblíže.
   Zdroj	GitHub

7. vyberte možnost přihlásit se pomocí GitHub a ověřit pomocí GitHub.

8. zadejte následující hodnoty GitHub.

   Vlastnost	Hodnota
   Organizace	vyberte požadovanou organizaci GitHub.
   Úložiště	Vyberte Jekyll-static-App.
   Větev	Vyberte Main (Hlavní).

9. V části Podrobnosti o sestavení vyberte v rozevíracím seznamu přednastavení sestavení položku vlastní a ponechejte výchozí hodnoty.

10. Do pole umístění aplikace zadejte ./.

11. Pole umístění rozhraní API nechte prázdné.

12. Do pole výstupní umístění zadejte _SITE.

Zkontrolovat a vytvořit

1. Kliknutím na tlačítko Revize + vytvořit ověřte správnost podrobností.

2. výběrem možnosti vytvořit zahájíte vytváření App Servicech statických webových aplikací a zřídíte GitHub akci pro nasazení.

3. Až se nasazení dokončí, přejděte na prostředek.

4. Na obrazovce prostředek kliknutím na odkaz URL otevřete nasazenou aplikaci. pro dokončení akce GitHub možná budete muset počkat nebo dva minuty.

   

Vlastní nastavení Jekyll

Když vygenerujete statickou webovou aplikaci, vygeneruje se soubor pracovního postupu , který obsahuje nastavení konfigurace publikování pro aplikaci.

pokud chcete nakonfigurovat proměnné prostředí, například JEKYLL_ENV , přidejte do env pracovního postupu v pracovní postup do akce statické Web Apps v Azure GitHub.

- 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

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

Pokud nebudete tuto aplikaci nadále používat, můžete prostředek služby Azure static Web App odstranit pomocí následujících kroků:

1. Otevřete Azure Portal.
2. V horním panelu vyhledávání vyhledejte vaši 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 Ano potvrďte akci odstranit.

Další kroky