Distribuera en Jekyll-webbplats till Azure Static Web Apps

Den här artikeln visar hur du skapar och distribuerar en Jekyll-webbapp till Azure Static Web Apps.

I den här tutorialen lär du dig följande:

Om du inte har något Azure-konto skapar du ett kostnadsfritt konto innan du börjar.

Förutsättningar

• Installera Jekyll
  • Du kan använda Windows-undersystemet för Linux och följa Ubuntu-instruktionerna om det behövs.
• Ett Azure-konto med en aktiv prenumeration. Om du inte har ett konto kan du skapa ett konto kostnadsfritt.
• Ett GitHub-konto. Om du inte har ett konto kan du skapa ett konto kostnadsfritt.
• En Git-installation installerad. Om du inte har någon kan du installera Git.

Skapa Jekyll-app

Skapa en Jekyll-app med hjälp av Jekyll-kommandoradsgränssnittet (CLI):

1. Från terminalen kör du Jekyll CLI för att skapa en ny app.

   jekyll new static-app
   

2. Gå till den nyligen skapade appen.

   cd static-app
   

3. Initiera en ny Git-lagringsplats.

    git init
   

4. Genomför ändringarna.

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

Skicka ditt program till GitHub

Azure Static Web Apps använder GitHub för att publicera din webbplats. Följande steg visar hur du skapar en GitHub-lagringsplats.

1. Skapa en tom GitHub-lagringsplats (skapa inte en README) från https://github.com/new med namnet jekyll-azure-static.

2. Lägg till GitHub-lagringsplatsen som en fjärranslutning till din lokala lagringsplats. Se till att lägga till ditt GitHub-användarnamn i stället för <YOUR_USER_NAME> platshållaren i följande kommando.

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

3. Skicka ditt lokala repo till GitHub.

   git push --set-upstream origin main
   

   Anmärkning

   Git-grenen kan ha ett annat namn än main. Ersätt main i det här kommandot med rätt värde.

Distribuera din webbapp

Följande steg visar hur du skapar en ny statisk webbplatsapp och distribuerar den till en produktionsmiljö.

Skapa programmet

1. Gå till Azure Portal

2. Välj Skapa en resurs

3. Sök efter Statiska webbappar

4. Välj Statiska webbappar

5. Välj Skapa

6. På fliken Grundläggande anger du följande värden.

   Fastighet	Värde
   Prenumeration	Ditt Azure-prenumerationsnamn.
   resursgrupp	jekyll-static-app
   Namn	jekyll-static-app
   Typ av plan	Gratis
   Region för Azure Functions API och mellanlagringsmiljöer	Välj en region som är närmast dig.
   Källa	GitHub (på engelska)

7. Välj Logga in med GitHub och autentisera med GitHub.

8. Ange följande GitHub-värden.

   Fastighet	Värde
   Organisation	Välj önskad GitHub-organisation.
   Lagringsplats	Välj jekyll-static-app.
   Filial	Välj huvud.

   Anmärkning

   Om du inte ser några lagringsplatser kan du behöva auktorisera Azure Static Web Apps på GitHub. Bläddra till din GitHub-lagringsplats och gå till Inställningar Program Auktoriserade OAuth-appar, välj > och välj >. För organisationens lagringsplatser måste du vara ägare till organisationen för att bevilja behörigheterna.

9. I avsnittet Builddetaljer (Byggdetaljer) väljer du Anpassad i listrutan Byggförinställningar (Build Presets) och behåller standardvärdena.

10. I rutan Appplats anger du ./.

11. Lämna rutan Api-plats tom.

12. Skriv in _site i fältet Utdataplats.

Granska och skapa

1. Välj Granska + Skapa för att kontrollera att informationen är korrekt.

2. Välj Skapa för att starta skapandet av apptjänstens statiska webbapp och etablera en GitHub Actions för distribution.

3. När distributionen är klar väljer du Gå till resurs.

4. På resursskärmen väljer du URL-länken för att öppna ditt distribuerade program. Du kan behöva vänta en minut eller två tills GitHub Actions har slutförts.

   

Anpassade Jekyll-inställningar

När du genererar en statisk webbapp genereras en arbetsflödesfil som innehåller konfigurationsinställningarna för publicering för programmet.

Om du vill konfigurera miljövariabler, till exempel JEKYLL_ENV, lägger du till ett env avsnitt i GitHub Actions för Azure Static Web Apps i arbetsflödet.

- 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

Rensa resurser

Om du inte kommer att fortsätta att använda det här programmet kan du ta bort Azure Static Web App-resursen genom följande steg:

1. Öppna Azure-portalen
2. I det övre sökfältet söker du efter ditt program efter det namn som du angav tidigare
3. Klicka på appen
4. Klicka på knappen Ta bort
5. Klicka på Ja för att bekräfta borttagningsåtgärden

Nästa steg