Condividi tramite

Distribuire un sito Hugo in App Web statiche di Azure

  • Articolo

Questo articolo illustra come creare e distribuire un'applicazione Web Hugo in App Web statiche di Azure. Il risultato finale è una nuova istanza di App Web statiche di Azure che include azioni di GitHub Actions associate per controllare la creazione e la pubblicazione dell'app.

In questa esercitazione apprenderai a:

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

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

Prerequisiti

  • 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.

Creare un'app Hugo

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

  1. Seguire la guida all'installazione di Hugo relativa al sistema operativo usato.

  2. Aprire un terminale

  3. Eseguire l'interfaccia della riga di comando di Hugo per creare una nuova app.

    hugo new site static-app

  4. Passare all'app appena creata.

    cd static-app

  5. Inizializzare un repository Git.

    git init

  6. Assicurarsi che il ramo sia denominato main.

    git branch -M main

  7. Aggiungere quindi un tema al sito installando un tema come modulo secondario GIT e quindi specificandolo nel file di configurazione di Hugo.

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

  8. Esegui il commit delle modifiche.

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

Eseguire il push dell'applicazione in GitHub

Per connettersi ad App Web statiche di Azure, è necessario un repository in GitHub. I passaggi seguenti illustrano come creare un repository per il sito.

  1. Creare da https://github.com/new un repository GitHub vuoto denominato hugo-static-app (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>/hugo-static-app

  3. Eseguire il push del repository locale in GitHub.

    git push --set-upstream origin main

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 my-hugo-group
    Nome hugo-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 hugo-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 Hugo dall'elenco a discesa Build Presets (Impostazioni di compilazione) e mantenere i valori predefiniti.

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

Versione di Hugo personalizzata

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. È possibile designare una specifica versione di Hugo nel file del flusso di lavoro fornendo un valore per HUGO_VERSION nella sezione env. La configurazione di esempio seguente illustra come impostare Hugo su una versione specifica.

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

Usare la funzionalità Informazioni Git nell'applicazione Hugo

Se l'applicazione Hugo usa la funzionalità Informazioni Git, il file del flusso di lavoro predefinito creato per l'app Web statica usa l'azione GitHub checkout per recuperare una versione superficiale del repository Git, con una profondità predefinita pari a 1. In questo scenario Hugo vede tutti i file di contenuto come provenienti da un singolo commit, quindi hanno lo stesso autore, il timestamp dell'ultima modifica e altre .GitInfo variabili.

Aggiornare il file del flusso di lavoro per recuperare la cronologia Git completa aggiungendo un nuovo parametro nel actions/checkout passaggio per impostare su fetch-depth 0 (nessun limite):

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

Il recupero della cronologia completa aumenta il tempo di compilazione del flusso di lavoro di GitHub Actions, ma le .Lastmod variabili e .GitInfo sono accurate e disponibili per ogni file di contenuto.

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