Een Jekyll-site implementeren in Azure Static Web Apps

Dit artikel laat zien hoe u een Jekyll-webtoepassing maakt en implementeert in Azure Static Web Apps.

In deze handleiding leer je hoe je:

Als u geen Azure-account hebt, maak dan een gratis account aan voordat u begint.

Vereiste voorwaarden

• Jekyll installeren
  • U kunt het Windows-subsysteem voor Linux gebruiken en indien nodig Ubuntu-instructies volgen.
• Een Azure-account met een actief abonnement. Als u nog geen account hebt, kunt u gratis een account maken.
• Een GitHub-account. Als u nog geen account hebt, kunt u gratis een account maken.
• Er is een Git-installatie geïnstalleerd. Als u er nog geen hebt, kunt u Git installeren.

Jekyll-app maken

Maak een Jekyll-app met behulp van de Jekyll-opdrachtregelinterface (CLI):

1. Voer vanuit de terminal de Jekyll CLI uit om een nieuwe app te maken.

   jekyll new static-app
   

2. Ga naar de zojuist gemaakte app.

   cd static-app
   

3. Initialiseer een nieuwe Git-opslagplaats.

    git init
   

4. Voer de wijzigingen door.

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

Push de toepassing naar GitHub

Azure Static Web Apps maakt gebruik van GitHub om uw website te publiceren. In de volgende stappen ziet u hoe u een GitHub-opslagplaats maakt.

1. Maak een lege GitHub-opslagplaats (maak geen README) van https://github.com/new de naam jekyll-azure-static.

2. Voeg de GitHub-opslagplaats toe als een externe opslagplaats aan uw lokale opslagplaats. Zorg ervoor dat u de tijdelijke aanduiding <YOUR_USER_NAME> in de volgende opdracht vervangt door uw GitHub-gebruikersnaam.

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

3. Push uw lokale opslagplaats naar GitHub.

   git push --set-upstream origin main
   

   Opmerking

   Uw Git-vertakking kan anders worden genoemd dan main. Vervang main in deze opdracht door de juiste waarde.

De web-app implementeren

De volgende stappen laten zien hoe u een nieuwe statische site-app maakt en deze implementeert in een productieomgeving.

De toepassing maken

1. Ga naar de Azure-portal

2. Selecteer Een resource maken

3. Zoek naar Static Web Apps

4. Statische web-apps selecteren

5. Selecteer Creëren

6. Voer op het tabblad Basisinformatie de volgende waarden in.

   Vastgoed	Waarde
   Abonnement	Uw Azure-abonnementnaam.
   Resourcegroep	jekyll-static-app
   Naam	jekyll-static-app
   Plantype	Gratis
   Regio voor Azure Functions-API en faseringsomgevingen	Selecteer een regio die het dichtst bij u in de buurt ligt.
   bron	GitHub

7. Selecteer Aanmelden met GitHub en verifieer met GitHub.

8. Voer de volgende GitHub-waarden in.

   Vastgoed	Waarde
   Organisatie	Selecteer de gewenste GitHub-organisatie.
   Opslagplaats	Selecteer jekyll-static-app.
   Filiaal	Selecteer hoofd.

   Opmerking

   Als u geen opslagplaatsen ziet, moet u mogelijk Azure Static Web Apps autoriseren op GitHub. Blader naar uw GitHub-opslagplaats en ga naar Geautoriseerde OAuth-apps voor instellingen >>, selecteer Azure Static Web Apps en selecteer Vervolgens Verlenen. Voor opslagplaatsen van organisaties moet u een eigenaar van de organisatie zijn om de machtigingen te verlenen.

9. Selecteer in de sectie Builddetails de optie Custom uit de vervolgkeuzelijst Build-voorinstellingen en behoud de standaardwaarden.

10. Voer in het vak App-locatie./in.

11. Laat het vak Api-locatie leeg.

12. Voer in het vak Uitvoerlocatie_site in.

Beoordelen en creëren

1. Selecteer Controleren + Maken om te controleren of de details juist zijn.

2. Selecteer Maken om het maken van de statische App Service-web-app te starten en een GitHub Actions in te richten voor implementatie.

3. Zodra de implementatie is voltooid, selecteert u Ga naar de resource.

4. Selecteer in het resourcescherm de URL-koppeling om uw geïmplementeerde toepassing te openen. Mogelijk moet u een paar minuten wachten totdat de GitHub Actions zijn voltooid.

   

Aangepaste Jekyll-instellingen

Wanneer u een statische web-app genereert, wordt er een werkstroombestand gegenereerd dat de publicatieconfiguratie-instellingen voor de toepassing bevat.

Als u omgevingsvariabelen wilt configureren, zoals JEKYLL_ENV, voegt u een env sectie toe aan de GitHub Actions van Azure Static Web Apps in de werkstroom.

- 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

De hulpbronnen opschonen

Als u deze toepassing verder niet gaat gebruiken, kunt u de Azure Static Web Apps-resource verwijderen door de volgende stappen te volgen:

1. Open de Azure portal
2. Zoek de toepassing in de bovenste zoekbalk via de naam die u deze eerder hebt gegeven
3. Klik op de app
4. Klik op de knop Verwijderen
5. Klik op Ja om de verwijdering te bevestigen

Volgende stappen