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 självstudien lär du dig att:

• Skapa en Jekyll-webbplats
• Konfigurera en Azure Static Web Apps-resurs
• Distribuera Jekyll-appen till Azure

Om du inte har en Azure-prenumeration skapar du ett kostnadsfritt Azure-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 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. Push-överför din lokala lagringsplats till GitHub.

   git push --set-upstream origin main
   

   Kommentar

   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.

   Property	Värde
   Abonnemang	Ditt Azure-prenumerationsnamn.
   Resursgrupp	jekyll-static-app
   Namn	jekyll-static-app
   Plantyp	Kostnadsfri
   Region för Azure Functions API och mellanlagringsmiljöer	Välj en region som är närmast dig.
   Source	GitHub

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

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

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

   Kommentar

   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 Azure Static Web Apps och välj sedan Bevilja. För organisationens lagringsplatser måste du vara ägare till organisationen för att bevilja behörigheterna.

9. I avsnittet Build Details (Skapa information ) väljer du Anpassad i listrutan Build Presets (Skapa fö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 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

Lägga till en anpassad domän