Implantar um site Hugo nos Aplicativos Web Estáticos do Azure

Este artigo demonstra como criar e implantar um aplicativo Web Hugo nos Aplicativos Web Estáticos do Azure. O resultado final é um novo Aplicativo Web Estático do Azure com Ações do GitHub associadas que lhe dão controle sobre como o aplicativo é criado e publicado.

Neste tutorial, aprenderás como:

Criar uma aplicação Hugo
Configuração de Aplicações Web Estáticas do Azure
Implantar o aplicativo Hugo no Azure

Se não tiver uma conta do Azure, crie uma conta gratuita antes de começar.

Pré-requisitos

Uma conta do Azure com uma assinatura ativa. Se não tiver uma, pode criar uma conta gratuitamente.
Uma conta GitHub. Se não tiver uma, pode criar uma conta gratuitamente.
Uma configuração do Git instalada. Se você não tiver um, você pode instalar o Git.

Criar uma App Hugo

Crie um aplicativo Hugo usando a Interface de Linha de Comando (CLI) Hugo:

Siga o guia de instalação do Hugo no seu SO.
Abra um terminal
Execute a CLI do Hugo para criar um novo aplicativo.
```
hugo new site static-app
```
Vá para o aplicativo recém-criado.
```
cd static-app
```
Inicialize um repositório Git.
```
git init
```
Certifique-se de que a sua sucursal tem o nome main.
```
git branch -M main
```
Em seguida, adicione um tema ao site instalando um tema como um submódulo git e, em seguida, especificando-o no arquivo de configuração Hugo.
```
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml
```

Consolide as alterações.

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

Envie seu aplicativo para o GitHub

Você precisa de um repositório no GitHub para se conectar aos Aplicativos Web Estáticos do Azure. As etapas a seguir mostram como criar um repositório para seu site.

Crie um repositório GitHub em branco (não crie um LEIA-ME) a partir do https://github.com/new nome hugo-static-app.
Adicione o repositório GitHub como um remoto ao seu repositório local. Certifique-se de adicionar seu nome de usuário do GitHub no lugar do <YOUR_USER_NAME> espaço reservado no comando a seguir.
```
git remote add origin https://github.com/<YOUR_USER_NAME>/hugo-static-app
```
Empurre seu repositório local para o GitHub.
```
git push --set-upstream origin main
```

Implantar seu aplicativo Web

As etapas a seguir mostram como criar um novo aplicativo de site estático e implantá-lo em um ambiente de produção.

Criar o aplicativo

Vá para o portal do Azure
Selecione Criar um recurso
Procure Aplicações Web Estáticas
Selecionar aplicativos Web estáticos
Selecione Criar

Na guia Noções básicas, insira os seguintes valores.

Propriedade	Valor
Subscrição	Seu nome de assinatura do Azure.
Grupo de recursos	Grupo-Hugo
Nome	hugo-static-app
Tipo de plano	Gratuito
Região para API do Azure Functions e ambientes de preparo	Selecione a região mais próxima de si.
Fonte	GitHub

Selecione Entrar com o GitHub e autentique-se com o GitHub.

Insira os seguintes valores do GitHub.

Propriedade	Valor
Organização	Selecione sua organização desejada no GitHub.
Repositório	Selecione hugo-static-app.
Filial	Selecione principal.

Observação

Se você não vir nenhum repositório, talvez seja necessário autorizar os Aplicativos Web Estáticos do Azure no GitHub. Navegue até o repositório do GitHub e vá para >, selecione > do Azure e selecione Conceder. Para repositórios de organização, você deve ser um proprietário da organização para conceder as permissões.

Na seção Detalhes da compilação , selecione Hugo na lista suspensa Predefinições de compilação e mantenha os valores padrão.

Revisar e criar

Selecione Rever + Criar para verificar se os detalhes estão corretos.
Selecione Criar para iniciar a criação do Aplicativo Web Estático do Serviço de Aplicativo e provisionar uma Ação do GitHub para implantação.
Quando a implantação for concluída, selecione Ir para o recurso.
Na tela de recurso, selecione o link de URL para abrir seu aplicativo implantado. Talvez seja necessário aguardar um ou dois minutos para que as Ações do GitHub sejam concluídas.

Versão personalizada do Hugo

Quando você gera um aplicativo Web estático, um arquivo de fluxo de trabalho é gerado que contém as definições de configuração de publicação para o aplicativo. Você pode designar uma versão específica do Hugo no arquivo de fluxo de trabalho fornecendo um valor para HUGO_VERSION na env seção . O exemplo de configuração a seguir demonstra como definir Hugo para uma versão específica.

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

Implantação alternativa usando SWA CLI

Se seu aplicativo Hugo tiver dependências que exigem configuração adicional, como módulos GoLang, você poderá usar a CLI de Aplicativos Web Estáticos do Azure para implantação diretamente. Abaixo está um exemplo de fluxo de trabalho do GitHub Actions que instala a CLI e implanta seu aplicativo:

jobs:
   build_and_deploy_job:
      runs-on: ubuntu-latest
      name: Build and Deploy with SWA CLI
      steps:
         - name: Checkout code
            uses: actions/checkout@v3
            with:
               submodules: true

         - name: Install SWA CLI
            run: npm install -g @azure/static-web-apps-cli

         - name: Build Hugo site
            run: |
               # Install Hugo modules
               hugo mod get

               # Minify the supported output formats
               hugo --minify

         - name: Deploy with SWA CLI
            env:
               AZURE_STATIC_WEB_APPS_API_TOKEN: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
            run: |
               swa deploy ./public --api-location ./api --env production

Esse fluxo de trabalho cria o site Hugo e o implanta usando a CLI dos Aplicativos Web Estáticos do Azure. Ele assume que o go.mod arquivo está localizado no diretório raiz do seu projeto para gerenciar dependências e configurações de módulo.

Use o recurso Git Info em seu aplicativo Hugo

Se seu aplicativo Hugo usa o recurso Git Info, o arquivo de fluxo de trabalho padrão criado para o Static Web App usa a ação GitHub de checkout para buscar uma versão superficial do repositório Git, com uma profundidade padrão de 1. Nesse cenário, Hugo vê todos os seus arquivos de conteúdo como provenientes de uma única confirmação, portanto, eles têm o mesmo autor, carimbo de data/hora da última modificação e outras .GitInfo variáveis.

Atualize seu arquivo de fluxo de trabalho para buscar seu histórico completo do Git adicionando um novo parâmetro na actions/checkout etapa para definir o fetch-depth como 0 (sem limite):

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

Obter o histórico completo aumenta o tempo de construção do seu fluxo de trabalho de Ações do GitHub, mas suas .Lastmod variáveis e .GitInfo são precisas e estão disponíveis para cada um dos seus arquivos de conteúdo.

Limpeza de recursos

Se não pretender continuar a utilizar esta aplicação, pode eliminar o recurso Azure Static Web App através dos seguintes passos:

Abra o portal do Azure
Na barra de pesquisa superior, procure a sua aplicação pelo nome que forneceu anteriormente
Clique no aplicativo
Clique no botão Excluir
Clique em Sim para confirmar a ação de exclusão

Próximos passos

Adicionar um domínio personalizado

Feedback

Esta página foi útil?

Last updated on 2025-09-29