Observação
O acesso a essa página exige autorização. Você pode tentar entrar ou alterar diretórios.
O acesso a essa página exige autorização. Você pode tentar alterar os diretórios.
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):
No terminal, execute a CLI jekyll para criar um novo aplicativo.
jekyll new static-app
Vá para o aplicativo recém-criado.
cd static-app
Inicialize um novo repositório Git.
git init
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.
Crie um repositório GitHub em branco (não crie um README) com https://github.com/new o nome jekyll-azure-static.
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
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
. Substituamain
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
Ir para o portal do Azure
Selecione Criar um Recurso
Pesquise por Aplicativos Web Estáticos
Selecione Aplicativos Web Estáticos
Selecione Criar
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 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 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.
Na seção Detalhes do Build , selecione Personalizado na lista suspensa Predefinições de Build e mantenha os valores padrão.
Na caixa Local do aplicativo, insira ./.
Deixe a caixa Local da API vazia.
Na caixa Local de saída , insira _site.
Revisar 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.
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_ENV
adicionar 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:
- 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