Een Jekyll-site implementeren in Azure Static Web Apps

Artikel
10/22/2023

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, kunt u een gratis Azure-account maken 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.
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-CLI (opdrachtregelinterface):

Voer vanaf de terminal de Jekyll-CLI uit om een nieuwe app te maken.
```
jekyll new static-app
```
Ga naar de zojuist gemaakte app.
```
cd static-app
```
Initialiseer een nieuwe Git-opslagplaats.
```
 git init
```

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.

Maak in https://github.com/new een lege GitHub-opslagplaats (maak geen Leesmij-bestand) met de naam jekyll-azure-static.
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
```
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

Ga naar de Azure-portal
Selecteer Een resource maken
Zoek naar Static Web Apps
Statische web-apps selecteren
Selecteer Maken.

Voer op het tabblad Basisinformatie de volgende waarden in.

Eigenschappen	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.
Source	GitHub

Selecteer Aanmelden met GitHub en verifieer met GitHub.
Voer de volgende GitHub-waarden in.

Eigenschappen Waarde

Organisatie Selecteer de gewenste GitHub-organisatie.

Opslagplaats Selecteer jekyll-static-app.

Vertakking Selecteer de hoofdmap.

Notitie

Als u geen opslagplaatsen ziet, moet u mogelijk Azure Static Web Apps autoriseren op GitHub. Blader naar uw GitHub-opslagplaats en ga naar Instellingen Toepassingen geautoriseerde OAuth-apps, selecteer Azure Static Web Apps en selecteer Vervolgens Verlenen.> > Voor organisatie-opslagplaatsen moet u een eigenaar van de organisatie zijn om de machtigingen te verlenen.
Selecteer in de sectie Builddetails aangepast in de vervolgkeuzelijst Build-voorinstellingen en behoud de standaardwaarden.
Voer in het vak App-locatie ./in.
Laat het vak Api-locatie leeg.
Voer in het vak Uitvoerlocatie _site in.

Eigenschappen	Waarde
Organisatie	Selecteer de gewenste GitHub-organisatie.
Opslagplaats	Selecteer jekyll-static-app.
Vertakking	Selecteer de hoofdmap.

Controleren en maken

Selecteer Controleren + Maken om te controleren of de details juist zijn.
Selecteer Maken om het maken van de statische App Service-web-app te starten en een GitHub Actions in te richten voor implementatie.
Zodra de implementatie is voltooid, selecteert u Ga naar de resource.
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

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:

Open Azure Portal
Zoek de toepassing in de bovenste zoekbalk via de naam die u deze eerder hebt gegeven
Klik op de app
Klik op de knop Verwijderen
Klik op Ja om de verwijdering te bevestigen

Volgende stappen

Een aangepast domein toevoegen

Delen via