Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 35

Conectando o GitHub a Serviços de Hospedagem

Recommended resources

Olá! Na lição anterior, você estabeleceu uma ponte segura entre o seu computador e o GitHub, enviando seu código para a sua "fortaleza na nuvem". Seu projeto está versionado e seguro, mas ainda vive como código em um repositório, não como um site que o mundo pode visitar.

Nesta lição, vamos dar vida a esse código. O objetivo é conectar seu repositório do GitHub a um serviço de hospedagem (Vercel) que irá construir e publicar seu site automaticamente. Este é o passo que transforma seu projeto em um endereço web real.

1. Hook (A Trava Mental)

  • Aprendiz: "Mestre, meu código está seguro no GitHub. É um link, mas não é um site. Como transformo esse repositório em um www.meu-novo-site.com que eu possa compartilhar?"
  • Mestre: "Você está no limiar da criação. O GitHub é o seu depósito de materiais de construção. Agora, precisamos do 'mestre de obras' que pega esses materiais e constrói o edifício em um terreno público na internet. Esse mestre de obras será a Vercel, uma plataforma que fará o trabalho pesado por você, de forma automática e, para projetos como o nosso, gratuita."

2. Deep Dive (A Solução: A Conexão de Implantação)

Plataformas como Vercel e Cloudflare Pages são especializadas em uma coisa: pegar o código de um repositório Git (como o seu no GitHub) e publicá-lo na web da forma mais eficiente possível.

O processo é elegantemente simples e se baseia na integração com o Git:

  1. Autorização: Você concede à Vercel permissão para ler seus repositórios no GitHub.
  2. Seleção: Você escolhe qual repositório quer publicar.
  3. Detecção Automática: A Vercel analisa seu código, reconhece que é um projeto Astro e já sabe exatamente como "construí-lo" (build).
  4. Implantação (Deploy): Com um clique, a Vercel executa o processo de build e coloca a versão final do seu site online em uma rede global (CDN), garantindo que ele seja rápido em qualquer lugar do mundo.

Nesta lição, focaremos na Vercel pela sua simplicidade e integração perfeita com o Astro, mas o processo na Cloudflare Pages é quase idêntico.

3. O Fazer (Microlearning Prático: Conectando o GitHub à Vercel)

Vamos colocar a mão na massa. O processo é quase inteiramente visual (feito com cliques).

A documentação oficial do Astro em português descreve exatamente este fluxo. Ela será nossa referência principal.

Faça o deploy do seu site Astro na Vercel

Este guia da documentação oficial do Astro é o nosso mapa. Ele explica como fazer o deploy na Vercel com configuração zero para um site estático como o nosso.

Leia rapidamente as seções 'Configuração do Projeto' (apenas o subtítulo 'Site Estático') e 'Deploy através da interface do site'. Note a frase chave: 'Você não precisa de nenhuma configuração adicional para fazer o deploy de um site Astro estático na Vercel.'

Agora, siga os passos abaixo. Para uma demonstração visual de todo o processo, o vídeo a seguir é um excelente guia.

How To Deploy GitHub Project on Vercel (Step By Step)

Este vídeo do canal KnowledgeBase demonstra visualmente cada clique do processo de deploy na Vercel, desde a conexão com o GitHub até a importação do projeto. Assista para ver o fluxo em ação.

Assista do início até o timestamp 02:15. Observe como o instrutor conecta a conta do GitHub, seleciona o repositório específico e chega na tela de configuração do projeto.

Passo a Passo para o Deploy:

  1. Crie uma Conta na Vercel:

    • Vá para vercel.com.
    • Clique em "Sign Up" e escolha a opção "Continue with GitHub". Isso simplifica todo o processo de autorização. Siga os passos para autenticar e autorizar o acesso da Vercel à sua conta do GitHub.

  2. Importe seu Projeto Astro:

    • Após o login, você estará no seu Dashboard. Clique em "Add New..." e selecione "Project".
    • A Vercel buscará seus repositórios do GitHub. Encontre o repositório do seu projeto Astro na lista e clique em "Import".

  3. Configure e Faça o Deploy:

    • Você chegará a uma tela de configuração como a da imagem abaixo.
    • Observe que a Vercel já detectou seu projeto como "Astro" no campo Framework Preset.
    • As configurações de build (Build and Output Settings) já devem estar preenchidas corretamente. Para Astro, o padrão é o comando npm run build e o diretório de saída dist. Você não precisa mudar nada.
    • Simplesmente clique no botão "Deploy".
Vercel Import Project Interface
Esta é a tela final antes do deploy. Note como a Vercel já preencheu o 'Framework Preset' para Astro, mostrando a inteligência da plataforma. Você só precisa confirmar e clicar em 'Deploy'.

A Vercel começará o processo de build. Você verá um log de construção em tempo real. Não se preocupe em entender cada linha agora; vamos analisar o resultado na próxima lição.

4. Checkpoint (Dica de IA)

  • Mestre: "Interessante, não é? Quase nenhum código, apenas cliques e autorizações. Como a sua expertise em IA se aplica aqui, onde a tarefa não é gerar código?"
  • Aprendiz: "Eu usaria a IA como um consultor de validação. Poderia perguntar: 'Estou fazendo o deploy de um site Astro estático na Vercel. Quais são as configurações de build padrão que devo esperar que a Vercel detecte automaticamente?'. A resposta confirmaria Framework: Astro, Build Command: npm run build e Output Directory: dist, me dando confiança para clicar em 'Deploy' sem hesitação."
  • Mestre: "Perfeito. Você usa a IA não para fazer, mas para confirmar e antecipar. Você a transforma em um copiloto que valida se o sistema automatizado (Vercel) está se comportando como esperado. Essa é uma aplicação avançada de engenharia de contexto: usar a IA para auditar processos."

Conclusão

Você acabou de dar a instrução final para o "mestre de obras" construir seu site. A conexão está feita. A Vercel agora tem acesso aos "planos" (seu código no GitHub) e já começou a construção.

  • Key Takeaways:

    • Vercel e Cloudflare Pages são plataformas que automatizam o processo de build e publicação de sites a partir de um repositório Git.
    • A forma mais simples de conectar é usar sua conta do GitHub para se inscrever, o que lida com a autorização.
    • As plataformas modernas detectam automaticamente o framework (Astro) e aplicam as configurações de build corretas, exigindo intervenção mínima.

  • Próximo Passo: Você clicou em "Deploy", e a mágica começou. Na próxima lição, vamos ver o resultado: seu site publicado em uma URL pública. Iremos acessar o link gerado, verificar se tudo funciona e dar uma olhada rápida no painel da Vercel para entender o que acabamos de criar.