Zelfstudie: Een Jekyll-site publiceren in Azure Static Web Apps

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

In deze zelfstudie leert u het volgende:

  • Een Jekyll-website maken
  • Een Azure Static Web Apps-resource instellen
  • De Jekyll-app implementeren in Azure

Als u geen Azure-abonnement hebt, maakt u een gratis Azure-account voordat u begint.

Vereisten

  • Zorg ervoor dat Jekyll is ge├»nstalleerd.
    • Indien nodig kunt u het Windows-subsysteem voor Linux gebruiken en de instructies voor Ubuntu 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.

Jekyll-app maken

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

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

    jekyll new static-app
    
  2. Ga naar de nieuwe 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 gebruikt GitHub om uw website te publiceren. In de volgende stappen wordt uitgelegd hoe u een GitHub-opslagplaats maakt.

  1. Maak in https://github.com/new een lege GitHub-opslagplaats (maak geen Leesmij-bestand) met de naam jekyll-azure-static.

  2. Voeg de GitHub-opslagplaats als externe locatie toe aan de 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 de lokale opslagplaats naar GitHub.

    git push --set-upstream origin main
    

    Notitie

    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 Azure Portal

  2. Selecteer Een resource maken

  3. Zoek naar Static Web Apps

  4. Statische web-apps selecteren

  5. Selecteer Maken

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

    Eigenschap 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 is.
    Bron GitHub
  7. Selecteer Aanmelden met GitHub en verifieer met GitHub.

  8. Voer de volgende GitHub-waarden in.

    Eigenschap Waarde
    Organisatie Selecteer de gewenste GitHub-organisatie.
    Opslagplaats Selecteer jekyll-static-app.
    Vertakking Selecteer de hoofdmap.
  9. Selecteer aangepast in de vervolgkeuzelijst Build-voorinstellingen in de sectie Builddetails en behoud de standaardwaarden.

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

  11. Laat het vak Api-locatie leeg.

  12. Voer in het vak Uitvoerlocatie_site in.

Controleren en maken

  1. Selecteer de knop Controleren en 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, klikt u op Naar de resource gaan.

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

    Deployed application

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

Resources 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