Compartilhar via

Implantar um site do 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 o GitHub Actions associado que fornece controle sobre como o aplicativo é criado e publicado.

Neste tutorial, você aprenderá como:

  • Criar um aplicativo Hugo
  • Configurar um Aplicativo Web Estático do Azure
  • Implantar o aplicativo Hugo no Azure

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

Pré-requisitos

Criar um aplicativo Hugo

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

  1. Siga o guia de instalação do Hugo no sistema operacional.

  2. Abra um terminal

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

    hugo new site static-app

  4. Vá para o aplicativo recém-criado.

    cd static-app

  5. Inicialize um repositório Git.

    git init

  6. Verifique se o branch tem o nome main.

    git branch -M main

  7. Em seguida, adicione um tema ao site instalando um tema como um submodule 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

  8. 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 se conectar aos 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) com o https://github.com/new nome hugo-static-app.

  2. Adicione o repositório GitHub como um remoto ao 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. Efetue push do 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. Ir para o portal do Azure

  2. Selecione Criar um Recurso

  3. Pesquise Aplicativos Web Estáticos

  4. Selecione Aplicativos Web Estáticos

  5. Selecione Criar

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

    Propriedade Valor
    Subscrição 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ê.
    Fonte 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.
    Filial 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.

  9. Na seção Detalhes do Build, selecione Hugo no menu suspenso Predefinições de Build e mantenha os valores padrão.

Revisar e criar

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

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

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

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

    Aplicativo implantado

Versão personalizada do Hugo

Quando você gera um Aplicativo Web Estático, um arquivo de fluxo de trabalho é gerado que contém as configurações 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 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 a CLI da SWA

Se o 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. Veja abaixo 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 do Hugo e o implanta usando a CLI de Aplicativos Web Estáticos do Azure. Ele pressupõe que o go.mod arquivo esteja localizado no diretório raiz do seu projeto para gerenciar dependências e configurações de módulo.

Usar o recurso Informações do Git em seu 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, Hugo vê todos os seus arquivos de conteúdo como provenientes de uma única confirmação, para que eles tenham o mesmo autor, carimbo de data/hora de última modificação e outras .GitInfo variáveis.

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

Buscar o histórico completo aumenta o tempo de construção do fluxo de trabalho do GitHub Actions, mas suas variáveis .Lastmod e .GitInfo são precisas e estão disponíveis para todos os seus 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:

  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

Adicionar um domínio personalizado

  • Last updated on