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

Artigo
01/10/2024

Este artigo demonstra como criar e implantar um aplicativo Web Hugo para Aplicativos Web Estáticos do Azure. O resultado final são novos Aplicativos Web Estáticos do Azure com o GitHub Actions associado que dão controle a você sobre como o aplicativo é criado e publicado.

Neste tutorial, você aprenderá como:

Criar um aplicativo Hugo
Configurar Aplicativos Web Estáticos do Azure
Implantar um aplicativo Hugo no Azure

Caso você não tenha uma assinatura do Azure, crie uma conta gratuita do Azure antes de começar.

Pré-requisitos

Uma conta do Azure com uma assinatura ativa. Se você não tiver uma, crie uma conta gratuita.
Uma conta do GitHub. Se você não tiver uma, crie uma conta gratuita.
Uma configuração do Git instalada. Se você não tiver um, poderá instalar o Git.

Criar um aplicativo Hugo

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

Siga o guia de instalação do Hugo em 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
```
Verifique se o branch tem o nome main.
```
git branch -M main
```
Em seguida, adicione um tema ao site instalando um tema como um submódulo git e especificando-o no arquivo de configuração do Hugo.
```
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml
```

Confirme as alterações.

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

Envie por push seu aplicativo para o GitHub.

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

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

Implantar o 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
Pesquise por Aplicativos Web Estáticos
Selecione Aplicativos Web Estáticos
Escolha Criar

Na guia Básico, insira os valores a seguir.

Propriedade	Valor
Assinatura	Seu nome da assinatura do Azure.
Grupo de recursos	my-hugo-group
Nome	hugo-static-app
Tipo de plano	Gratuito
Região da API do Azure Functions e dos ambientes de preparo	Selecione a região mais próxima de você.
Origem	GitHub

Selecione Entrar com o GitHub e faça a autenticação no GitHub.
Insira os valores do GitHub a seguir.

Propriedade Valor

Organização Selecione a organização do GitHub desejada.

Repositório Selecione hugo-static-app.

Branch Selecione main.

Observação

Se você não vir nenhum repositório, talvez seja necessário autorizar o Aplicativos Web Estáticos do Azure no GitHub. Navegue até o repositório do GitHub e vá para Configurações > Aplicativos > Aplicativos OAuth Autorizados, selecione Aplicativos Web Estáticos do Azure e Conceder. Em repositórios corporativos, você precisa ser um proprietário da organização para conceder as permissões.
Na seção Detalhes do Build, selecione Hugo no menu suspenso Predefinições de Build e mantenha os valores padrão.

Propriedade	Valor
Organização	Selecione a organização do GitHub desejada.
Repositório	Selecione hugo-static-app.
Branch	Selecione main.

Examinar e criar

Selecione Examinar + Criar para verificar se todos os detalhes estão corretos.
Selecione Criar para iniciar a criação do aplicativo Web estático do Serviço de Aplicativo e provisione uma GitHub Actions para a implantação.
Assim que a implantação for concluída, selecione Ir para o recurso.
Na tela de recursos, selecione o link URL para abrir o aplicativo implantado. Talvez seja necessário aguardar um minuto ou dois para que a GitHub Actions seja concluída.

Versão personalizada do Hugo

Quando você gera um Aplicativo Web Estático, é gerado um arquivo de fluxo de trabalho, que contém as definições de configuração de publicação do aplicativo. Você pode designar uma versão específica do Hugo no arquivo de fluxo de trabalho fornecendo um valor para HUGO_VERSION na seção env. A configuração de exemplo a seguir demonstra como definir o Hugo com 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

Usar o recurso Informações do Git no aplicativo Hugo

Se o aplicativo Hugo usa o recurso Informações do Git, o arquivo de fluxo de trabalho padrão criado para o aplicativo Web estático usará a ação de check-out do GitHub para buscar uma versão superficial do repositório Git, com uma profundidade padrão igual a 1. Nesse cenário, o Hugo vê todos os arquivos de conteúdo como provenientes de um só commit, portanto, eles têm o mesmo autor, o carimbo de data/hora da última modificação e outras variáveis .GitInfo.

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

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

Efetuar fetch do histórico completo aumenta o tempo de build do fluxo de trabalho do GitHub Actions, mas as variáveis .Lastmod e .GitInfo são precisas e estarão disponíveis para cada um dos arquivos de conteúdo.

Limpar os recursos

Se você não quiser continuar usando esse aplicativo, poderá excluir o recurso Aplicativo Web Estático do Azure com as seguintes etapas:

Abra o portal do Azure
Na barra de pesquisa superior, pesquise seu aplicativo pelo nome fornecido anteriormente
Clique no aplicativo
Clique no botão Excluir
Clique em Sim para confirmar a ação

Próximas etapas

Adicionar um domínio personalizado

Compartilhar via