Distribuire un sito Jekyll in App Web statiche di Azure

  • Articolo

Questo articolo illustra come creare e distribuire un'applicazione Web Jekyll in App Web statiche di Azure.

In questa esercitazione apprenderai a:

  • Creare un sito Web Jekyll
  • Configurare una risorsa App Web statiche di Azure
  • Distribuire l'app Jekyll in Azure

Se non si ha una sottoscrizione di Azure, creare un account Azure gratuito prima di iniziare.

Prerequisiti

  • Installare Jekyll
    • Se necessario, è possibile usare il sottosistema Windows per Linux e seguire le istruzioni di Ubuntu.
  • Un account Azure con una sottoscrizione attiva. Se non si ha un account, è possibile crearne uno gratuito.
  • Un account GitHub. Se non si ha un account, è possibile crearne uno gratuito.
  • Installazione di Git installata. Se non è disponibile, è possibile installare Git.

Crea l'app Jekyll

Creare un'app Jekyll usando l'interfaccia della riga di comando di Jekyll:

  1. Dal terminale eseguire l'interfaccia della riga di comando di Jekyll per creare una nuova app.

    jekyll new static-app

  2. Passare all'app appena creata.

    cd static-app

  3. Inizializzare un nuovo repository Git.

     git init

  4. Esegui il commit delle modifiche.

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

Eseguire il push dell'applicazione in GitHub

App Web statiche di Azure usa GitHub per pubblicare il sito Web. I passaggi seguenti illustrano come creare un repository GitHub.

  1. Creare da https://github.com/new un repository GitHub vuoto denominato jekyll-azure-static (non creare un file LEGGIMI).

  2. Aggiungere il repository GitHub come repository remoto al repository locale. Assicurarsi di sostituire il segnaposto <YOUR_USER_NAME> nel comando seguente con il proprio nome utente di GitHub.

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

  3. Eseguire il push del repository locale in GitHub.

    git push --set-upstream origin main

    Nota

    Il ramo Git può essere denominato in modo diverso da main. Sostituire main in questo comando con il valore corretto.

Distribuire l'app Web

I passaggi seguenti illustrano come creare una nuova app del sito statica e distribuirla in un ambiente di produzione.

Creare l'applicazione

  1. Accedere al portale di Azure

  2. Selezionare Crea una risorsa

  3. Cercare App Web statiche

  4. Selezionare App Web statiche

  5. Selezionare Crea.

  6. Nella scheda Informazioni di base immettere i valori seguenti.

    Proprietà valore
    Abbonamento Il nome della sottoscrizione di Azure.
    Gruppo di risorse jekyll-static-app
    Nome jekyll-static-app
    Tipo di piano Gratuito
    Area per Funzioni di Azure ambienti di gestione temporanea e API Selezionare un'area più vicina.
    Origine GitHub

  7. Selezionare Accedi con GitHub ed eseguire l'autenticazione con GitHub.

  8. Immettere i valori di GitHub seguenti.

    Proprietà valore
    Azienda Selezionare l'organizzazione GitHub desiderata.
    Repository Selezionare jekyll-static-app.
    Ramo Selezionare main.

    Nota

    Se non è visualizzato alcun repository, potrebbe essere necessario autorizzare App Web statiche di Azure in GitHub. Passare al repository GitHub e passare a Impostazioni > Applicazioni > autorizzate per le app OAuth, selezionare App Web statiche di Azure e quindi selezionare Concedi. Per concedere le autorizzazioni per i repository dell'organizzazione, è necessario essere un proprietario dell'organizzazione.

  9. Nella sezione Dettagli compilazione selezionare Personalizzato nell'elenco a discesa Set di impostazioni di compilazione e mantenere i valori predefiniti.

  10. Nella casella Percorso app immettere ./.

  11. Lasciare vuota la casella Percorso API.

  12. Nella casella Percorso output immettere _site.

Rivedi e crea

  1. Selezionare Rivedi e crea per verificare che i dettagli siano tutti corretti.

  2. Selezionare Crea per avviare la creazione del servizio app'app Web statica ed eseguire il provisioning di GitHub Actions per la distribuzione.

  3. Al termine della distribuzione, selezionare Vai alla risorsa.

  4. Nella schermata della risorsa selezionare il collegamento URL per aprire l'applicazione distribuita. Potrebbe essere necessario attendere un minuto o due per il completamento di GitHub Actions.

    Deployed application

Impostazioni Jekyll personalizzate

Quando si genera un'app Web statica, viene generato un file del flusso di lavoro che contiene le impostazioni di configurazione di pubblicazione per l'applicazione.

Per configurare le variabili di ambiente, ad esempio JEKYLL_ENV, aggiungere una env sezione all'App Web statiche di Azure GitHub Actions nel flusso di lavoro.

- 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

Pulire le risorse

Se non si intende continuare a usare questa applicazione, è possibile eliminare la risorsa di App Web statiche di Azure seguendo questa procedura:

  1. Aprire il portale di Azure
  2. Nella barra di ricerca superiore cercare l'applicazione in base al nome specificato in precedenza
  3. Fare clic sull'app
  4. Fare clic sul pulsante Elimina
  5. Fare clic su Sì per confermare l'azione di eliminazione

Passaggi successivi

Aggiungere un dominio personalizzato