Compartilhar via


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

Este artigo demonstra como criar e implantar um aplicativo Web Jekyll nos Aplicativos Web Estáticos do Azure.

Neste tutorial, você aprenderá como:

  • Criar um site do Jekyll
  • Configurar um recurso de Aplicativos Web Estáticos do Azure
  • Implantar o aplicativo Jekyll no Azure

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

Pré-requisitos

  • Instalar o Jekyll
    • Você pode usar o Subsistema do Windows para Linux e seguir as instruções do Ubuntu, se necessário.
  • 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 aplicativo Jekyll

Criar um aplicativo Jekyll usando a CLI (Interface de Linha de Comando) jekyll):

  1. No terminal, execute a CLI jekyll para criar um novo aplicativo.

    jekyll new static-app
    
  2. Vá para o aplicativo recém-criado.

    cd static-app
    
  3. Inicialize um novo repositório Git.

     git init
    
  4. Consolide as alterações.

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

Envie por push seu aplicativo para o GitHub.

Os Aplicativos Web Estáticos do Azure usam o GitHub para publicar seu site. As etapas a seguir mostram como criar um repositório GitHub.

  1. Crie um repositório GitHub em branco (não crie um README) com https://github.com/new o nome jekyll-azure-static.

  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>/jekyll-azure-static
    
  3. Efetue push do repositório local para o GitHub.

    git push --set-upstream origin main
    

    Observação

    Seu branch git pode ser nomeado de forma diferente de main. Substitua main neste comando pelo valor correto.

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 por 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 jekyll-static-app
    Nome jekyll-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 jekyll-static-app.
    Ramo 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 Personalizado na lista suspensa Predefinições de Build e mantenha os valores padrão.

  10. Na caixa Local do aplicativo, insira ./.

  11. Deixe a caixa Local da API vazia.

  12. Na caixa Local de saída , insira _site.

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

Configurações personalizadas do Jekyll

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.

Para configurar variáveis de ambiente, como JEKYLL_ENVadicionar uma env seção ao GitHub Actions dos Aplicativos Web Estáticos do Azure no fluxo de trabalho.

- 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 source code path - optional
      output_location: "_site" # Built app content directory - optional
      ###### End of Repository/Build Configurations ######
   env:
      JEKYLL_ENV: production

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