Jekyll-webhely üzembe helyezése az Azure Static Web Appsben

Ez a cikk bemutatja, hogyan hozhat létre és helyezhet üzembe Jekyll-webalkalmazásokat az Azure Static Web Appsben.

Ebben az oktatóanyagban az alábbiakkal fog megismerkedni:

  • Jekyll-webhely létrehozása
  • Azure Static Web Apps-erőforrás beállítása
  • A Jekyll-alkalmazás üzembe helyezése az Azure-ban

If you don't have an Azure subscription, create an Azure free account before you begin.

Előfeltételek

  • A Jekyll telepítése
    • Használhatja a Linuxos Windows-alrendszer, és szükség esetén követheti az Ubuntu utasításait.
  • An Azure account with an active subscription. Ha nem rendelkezik ilyen fiókkal, ingyenesen létrehozhat fiókot.
  • Egy GitHub-fiók. Ha nem rendelkezik ilyen fiókkal, ingyenesen létrehozhat fiókot.
  • Telepítve van egy Git-beállítás. Ha nincs ilyenje, telepítheti a Gitet.

Jekyll-alkalmazás létrehozása

Jekyll-alkalmazás létrehozása a Jekyll parancssori felületével (CLI):

  1. A terminálon futtassa a Jekyll parancssori felületet egy új alkalmazás létrehozásához.

    jekyll new static-app
    
  2. Nyissa meg az újonnan létrehozott alkalmazást.

    cd static-app
    
  3. Új Git-adattár inicializálása.

     git init
    
  4. Véglegesítse a módosításokat.

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

Alkalmazás leküldése a GitHubra

Az Azure Static Web Apps a GitHub használatával teszi közzé a webhelyét. Az alábbi lépések bemutatják, hogyan hozhat létre GitHub-adattárat.

  1. Hozzon létre egy üres GitHub-adattárat (ne hozzon létre README-t) a jekyll-azure-static névvel.https://github.com/new

  2. Adja hozzá a GitHub-adattárat távoliként a helyi adattárhoz. Az alábbi parancsban adja hozzá a GitHub-felhasználónevet a <YOUR_USER_NAME> helyőrző helyett.

    git remote add origin https://github.com/<YOUR_USER_NAME>/jekyll-azure-static
    
  3. A helyi adattár leküldése a GitHubra.

    git push --set-upstream origin main
    

    Megjegyzés:

    A git ág neve eltérő lehet, mint maina . Cserélje le main ebben a parancsban a megfelelő értékre.

A webalkalmazás üzembe helyezése

Az alábbi lépések bemutatják, hogyan hozhat létre új statikus helyalkalmazást, és hogyan helyezheti üzembe éles környezetben.

Az alkalmazás létrehozása

  1. Go to the Azure portal

  2. Válassza az Erőforrás létrehozása lehetőséget

  3. Keressen rá a Static Web Apps kifejezésre

  4. Statikus webalkalmazások kiválasztása

  5. Válassza a Létrehozás elemet

  6. Az Alapismeretek lapon adja meg a következő értékeket.

    Tulajdonság Érték
    Előfizetés Az Azure-előfizetés neve.
    Erőforráscsoport jekyll-static-app
    Név jekyll-static-app
    Terv típusa Ingyenes
    Régió az Azure Functions API-hoz és az előkészítési környezetekhez Válasszon ki egy Önhöz legközelebbi régiót.
    Forrás GitHub
  7. Válassza a Bejelentkezés a GitHubbal lehetőséget, és hitelesítés a GitHubon.

  8. Adja meg a következő GitHub-értékeket.

    Tulajdonság Érték
    Szervezet Válassza ki a kívánt GitHub-szervezetet.
    Adattár Válassza a jekyll-static-app lehetőséget.
    Ág Válassza ki a fő elemet.

    Megjegyzés:

    Ha nem lát tárházakat, lehetséges, hogy engedélyeznie kell az Azure Static Web Appst a GitHubon. Keresse meg a GitHub-adattárat, és nyissa meg Gépház > Alkalmazások > engedélyezett OAuth-alkalmazásait, válassza az Azure Static Web Apps lehetőséget, majd válassza a Grant lehetőséget. A szervezeti adattárak esetében az engedélyek megadásához a szervezet tulajdonosának kell lennie.

  9. A Build Details (Build részletei) szakaszban válassza az Egyéni lehetőséget a Build-előre beállított értékek legördülő listából, és tartsa meg az alapértelmezett értékeket.

  10. Az Alkalmazás helye mezőbe írja be a ./.

  11. Hagyja üresen az Api-hely mezőt.

  12. A Kimeneti hely mezőben adja meg a _site.

Áttekintés és létrehozás

  1. Válassza a Véleményezés + Létrehozás lehetőséget , ha ellenőrizni szeretné, hogy a részletek helyesek-e.

  2. Válassza a Létrehozás lehetőséget az App Service Static Web App létrehozásának megkezdéséhez, és üzembe helyezéshez kiépíthet egy GitHub Actionst.

  3. Az üzembe helyezés befejezése után válassza az Ugrás az erőforrásra lehetőséget.

  4. Az erőforrás képernyőjén válassza az URL-hivatkozást az üzembe helyezett alkalmazás megnyitásához. Előfordulhat, hogy várnia kell egy-két percet, amíg a GitHub Actions befejeződik.

    Deployed application

Egyéni Jekyll-beállítások

Statikus webalkalmazás létrehozásakor létrejön egy munkafolyamat-fájl , amely tartalmazza az alkalmazás közzétételi konfigurációs beállításait.

Környezeti változók konfigurálásához például JEKYLL_ENVadjon hozzá egy env szakaszt az Azure Static Web Apps GitHub Actionshez a munkafolyamatban.

- 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

Clean up resources

Ha nem folytatja az alkalmazás használatát, az alábbi lépések végrehajtásával törölheti az Azure Static Web App-erőforrást:

  1. Nyissa meg az Azure Portalt
  2. A felső keresősávon keresse meg az alkalmazást a korábban megadott név alapján
  3. Kattintson az alkalmazásra
  4. Kattintson a Törlés gombra
  5. Kattintson az Igen gombra a törlési művelet megerősítéséhez

További lépések