Tutorial: Publicar um site do Hugo em Aplicativos Web Estáticos do Azure

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

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

Pré-requisitos

Criar um aplicativo Hugo

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

  1. Siga o guia de instalação do Hugo em seu SO.

  2. Abra um terminal

  3. Execute a CLI do Hugo para criar um novo aplicativo.

    hugo new site static-app
    
  4. Navegue até o aplicativo recém-criado.

    cd static-app
    
  5. Inicialize um repositório Git.

     git init
    
  6. 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
    
  7. 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.

  1. Crie um repositório GitHub em branco (não crie um README) a partir do https://github.com/newhugo-static-app nomeado.

  2. 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
    
  3. 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

  1. Navegue até o portal do Azure

  2. Selecione Criar um Recurso

  3. Pesquise por Aplicativos Web Estáticos

  4. Selecione Aplicativos Web Estáticos

  5. Escolha Criar

  6. 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
  7. Selecione Entrar com o GitHub e faça a autenticação no GitHub.

  8. 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.
  9. Na seção Detalhes do Build, selecione Hugo no menu suspenso Predefinições de Build e mantenha os valores padrão.

Examinar e criar

  1. Selecione o botão Examinar + Criar para verificar se os detalhes estão todos corretos.

  2. Selecione Criar para iniciar a criação do aplicativo Web estático do Serviço de Aplicativo e provisione uma GitHub Action para a implantação.

  3. Assim que a implantação for concluída, clique em Ir para o recurso.

  4. Na tela de recursos, clique no link URL para abrir o aplicativo implantado. Talvez seja necessário aguardar um minuto ou dois para que a GitHub Action seja concluída.

    Aplicativo implantado

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@v2
        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

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:

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

Próximas etapas