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

  • Cikk

Ez a cikk bemutatja, hogyan hozhat létre és helyezhet üzembe Hugo-webalkalmazásokat az Azure Static Web Appsben. A végeredmény egy új Azure Static Web App és a társított GitHub Actions, amely lehetővé teszi az alkalmazás létrehozásának és közzétételének szabályozását.

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

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

Ha nem rendelkezik Azure-előfizetéssel, első lépésként hozzon létre egy ingyenes Azure-fiókot.

Előfeltételek

  • Egy Azure-fiók, aktív előfizetéssel. 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.

Hugo-alkalmazás létrehozása

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

  1. Kövesse az operációs rendszeren található Hugo telepítési útmutatóját .

  2. Terminál megnyitása

  3. Futtassa a Hugo CLI-t egy új alkalmazás létrehozásához.

    hugo new site static-app

  4. Nyissa meg az újonnan létrehozott alkalmazást.

    cd static-app

  5. Git-adattár inicializálása.

    git init

  6. Győződjön meg arról, hogy az ág neve el van nevezve main.

    git branch -M main

  7. Ezután vegyen fel egy témát a webhelyre egy téma git-almodulként való telepítésével, majd adja meg a Hugo konfigurációs fájljában.

    git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml

  8. 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 Appshez való csatlakozáshoz szüksége van egy GitHub-adattárra. Az alábbi lépések bemutatják, hogyan hozhat létre adattárat a webhelyéhez.

  1. Hozzon létre egy üres GitHub-adattárat (ne hozzon létre README-t) a hugo-static-app nevű alkalmazásból.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>/hugo-static-app

  3. A helyi adattár leküldése a GitHubra.

    git push --set-upstream origin main

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. Nyissa meg az Azure Portalt

  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 my-hugo-group
    Név hugo-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 ki a hugo-static-app lehetőséget.
    Ág Válassza ki a fő elemet.

    Feljegyzé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 (Összeállítás részletei) szakaszban válassza ki a Hugo elemet a Build Presets legördülő listából, és tartsa meg az alapértelmezett értékeket.

Á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 Hugo-verzió

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. Egy adott Hugo-verziót a munkafolyamat-fájlban úgy jelölhet ki, hogy megad egy értéket HUGO_VERSION a env szakaszban. Az alábbi példakonfiguráció bemutatja, hogyan állíthatja be Hugot egy adott verzióra.

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
      - 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" # Api source code path - optional
          output_location: "public" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env:
          HUGO_VERSION: 0.58.0

A Git Info funkció használata a Hugo-alkalmazásban

Ha a Hugo-alkalmazás a Git Info funkciót használja, a statikus webalkalmazáshoz létrehozott alapértelmezett munkafolyamat-fájl a pénztári GitHub-művelettel kéri le a Git-adattár egy sekély verzióját, amelynek alapértelmezett mélysége 1. Ebben a forgatókönyvben Hugo úgy látja, hogy az összes tartalomfájl egyetlen véglegesítésből származik, így ugyanazzal a szerzővel, utolsó módosítási időbélyegzővel és más .GitInfo változókkal rendelkeznek.

Frissítse a munkafolyamat-fájlt, hogy lekérje a teljes Git-előzményt úgy, hogy hozzáad egy új paramétert a actions/checkout lépéshez, amely a következőre állítja a fetch-depth következőt 0 (nincs korlát):

      - uses: actions/checkout@v3
        with:
          submodules: true
          fetch-depth: 0

A teljes előzmény lekérése növeli a GitHub Actions-munkafolyamat buildelési idejét, de a .Lastmod.GitInfo változók pontosak és elérhetők az egyes tartalomfájlokhoz.

Az erőforrások eltávolítása

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

Következő lépések

Egyéni tartomány hozzáadása