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

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

Neste tutorial, irá aprender a:

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

Pré-requisitos

• Instale o Jekyll
  • Você pode usar o Subsistema Windows para Linux e seguir as instruções do Ubuntu, se necessário.
• Uma conta do Azure com uma subscrição 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 aplicativo Jekyll

Crie um aplicativo Jekyll usando a interface de linha de comando (CLI) 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 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 LEIA-ME) a partir do https://github.com/new nome jekyll-azure-static.

2. 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>/jekyll-azure-static
   

3. Empurre seu repositório local para o GitHub.

   git push --set-upstream origin main
   

   Nota

   Sua ramificação git pode ser nomeada de forma diferente de main. Substitua main neste comando pelo valor correto.

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 a aplicação

1. Aceda ao Portal do Azure

2. Selecione Criar um recurso

3. Procure Aplicações Web Estáticas

4. Selecionar aplicativos Web estáticos

5. Selecione Criar

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

   Propriedade	valor
   Subscrição	Seu nome de assinatura do Azure.
   Grupo de recursos	jekyll-static-app
   Nome	jekyll-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.
   Source	GitHub

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

8. Insira os seguintes valores do GitHub.

   Propriedade	valor
   Organização	Selecione sua organização desejada no GitHub.
   Repositório	Selecione jekyll-static-app.
   Ramo	Selecione principal.

   Nota

   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 Configurações de Aplicativos OAuth Autorizados, selecione Aplicativos > Web Estáticos 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.

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

10. Na caixa Localização da aplicação , introduza ./.

11. Deixe a caixa Localização da api vazia.

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

Rever e criar

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

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

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

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

   

Configurações personalizadas do Jekyll

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 para o aplicativo.

Para configurar variáveis de ambiente, como JEKYLL_ENV, adicione uma env seção às Ações do GitHub 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

Clean up resources (Limpar recursos)

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

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

Próximos passos