Självstudie: Publicera 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 guiden får du lära dig att:

Om du inte har en Azure-prenumerationkan du skapa ett kostnads fritt konto innan du börjar.

Förutsättningar

• Installera Jekyll
  • Du kan använda Windows-undersystem 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 utan kostnad.
• Ett GitHub-konto. Om du inte har ett konto kan du skapa ett konto utan kostnad.

Skapa Jekyll-app

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

1. Kör Jekyll CLI från terminalen 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-lagringsplatsen (skapa inte ett VIKTIGT) från https://github.com/new med namnet jekyll-azure-static.

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

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

3. Push-skicka din lokala lagringsplatsen till GitHub.

   git push --set-upstream origin main
   

   Anteckning

   Din git-gren 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. Navigera till Azure Portal

2. Välj Skapa en resurs

3. Sök efter Statiska webbappar

4. Välj Static Web Apps

5. Välj Skapa

6. Ange följande värden på fliken Grundläggande inställningar.

   Egenskap	Värde
   Prenumeration	Ditt Azure-prenumerationsnamn.
   Resursgrupp	jekyll-static-app
   Namn	jekyll-static-app
   Plantyp	Kostnadsfri
   Region för Azure Functions API och mellanlagringsmiljöer	Välj den region som är närmast dig.
   Källa	GitHub

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

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

   Egenskap	Värde
   Organisation	Välj önskad GitHub-organisation.
   Lagringsplats	Välj jekyll-static-app.
   Gren	Välj main.

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

10. I rutan Appplats anger du ./.

11. Lämna rutan Api-plats tom.

12. I rutan Utdataplats anger du _site.

Granska och skapa

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

2. Välj Skapa för att börja skapa App Service Static Web App och etablera en GitHub-åtgärd för distribution.

3. När distributionen är klar klickar du på Gå till resurs.

4. På resursskärmen klickar du på URL-länken för att öppna det distribuerade programmet. Du kan behöva vänta någon minut tills GitHub-åtgärden har slutförts.

   

Anpassade Jekyll-inställningar

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

Om du vill konfigurera miljövariabler, till exempel , lägger du JEKYLL_ENV till ett avsnitt i Azure Static Web Apps env GitHub-åtgärd 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 Azures statiska webb program resurs genom följande steg:

1. Öppna Azure-portalen
2. Sök efter ditt program med det namn du angav tidigare i det övre Sök fältet
3. Klicka på appen
4. Klicka på knappen ta bort
5. Bekräfta borttagnings åtgärden genom att klicka på Ja

Nästa steg