Git para Desenvolvimento Web: Conheça o Fluxo de Trabalho Típico de um Projeto

O desenvolvimento da Web está intrinsecamente relacionado à colaboração. Na maioria das vezes, você estará trabalhando com outros desenvolvedores e, mesmo que não o faça, o Git pode ajudá-lo de muitas outras maneiras.

Git é o software que controla a versão dos aplicativos que fazemos. É usado por desenvolvedores solo, grandes empresas e até Linux, o maior projeto de código aberto do mundo.

Como desenvolvedor web, é extremamente importante saber como usar o Git para desenvolvimento web corretamente. Não estamos falando apenas de “git add”, “git commit” e “git push”. Você deve conhecer todo o fluxo de trabalho da criação de um projeto web com o Git.

Ainda não está convencido? Vamos começar!

Por que usar o Git?

Estes são apenas alguns dos motivos para começar a usar o Git:

• Organização: Ao invés de gerenciar seu projeto em pastas como v1, v2, v3, etc, você tem um projeto com um banco de dados especial que armazena todas as versões dos arquivos
• Colaboração: o Git permite que você e outras pessoas trabalhem no mesmo projeto ao mesmo tempo sem criar conflitos.
• Open-source: Git é open-source, mas também é a ferramenta que usamos para colaborar e criar ótimos softwares open-source. Qualquer pessoa pode fazer pull requests para projetos de código aberto em plataformas como GitHub ou Bitbucket.
• Flexibilidade de plataforma: Atualmente, você tem muitos serviços de hospedagem Git diferentes para escolher, como Gitlab, GitHub, Bitbucket e SourceForge. Você pode até usar uma solução auto-hospedada para todos os seus projetos.
• Backups fáceis: Desfaça erros com facilidade e nunca perca a base de código do seu projeto.

Mencionamos o termo GitHub uma ou duas vezes agora, então qual é a diferença entre Git e GitHub?

Isso pode confundi-lo se você for totalmente novo no Git. Para colocar em palavras simples, Git e GitHub são ferramentas relacionadas, mas diferentes.

Git é o sistema de controle de versão (VCS) que usamos para manter o controle das alterações de nossos arquivos, enquanto o GitHub é um serviço que usamos para armazenar nossos arquivos de projeto e seu histórico do Git online (localizado na pasta .git/ do seu projeto) .

O Git é instalado localmente, em sua máquina, e sem serviços de hospedagem como GitHub ou GitLab, seria muito difícil colaborar com outros desenvolvedores.

O GitHub sobrecarrega o Git adicionando outros recursos que melhoram a colaboração, como clonagem, bifurcação e mesclagem. Juntas, essas duas ferramentas se combinam para trazer a você um ecossistema relativamente amigável para desenvolver, gerenciar e mostrar seu projeto para outras pessoas.

Git básico para fluxo de trabalho de desenvolvimento da Web

Nas próximas seções, você aprenderá mais sobre o fluxo de trabalho Git para desenvolvimento web por meio da prática prática.

Requerimentos de instalação

Se você ainda não instalou o Git, este é o momento perfeito. É fácil de instalar e está disponível na maioria dos sistemas operacionais.

Faça o download na página oficial de downloads ou instale-o com um gerenciador de pacotes se estiver usando Linux ou macOS:

Para testar se tudo correu bem com a instalação, inicie um terminal no Linux ou macOS procurando por “Terminal” no menu de aplicativos ou abrindo o Git bash no Windows (que vem instalado com o Git por padrão).

Então digite:

 git --version

Se você receber uma versão do Git como resposta, está pronto.

Também precisaremos de uma conta do GitHub, portanto, inscreva-se ou faça login no GitHub:

Depois de instalar o Git e fazer login na sua conta do GitHub, você pode passar para a próxima seção.

Fluxo de trabalho básico do Git para projetos colaborativos

Como mencionado anteriormente, na maioria das vezes você não estará desenvolvendo projetos solo. Colaborar é uma habilidade essencial, e o Git e o GitHub nos ajudam a torná-lo um processo simples, mas eficaz.

O fluxo de trabalho típico de um projeto Git é assim:

1. Obtenha uma cópia local do projeto clonando um repositório ou repo. Se você estiver colaborando, primeiro faça o fork do repositório.
2. Crie uma ramificação com um nome representativo do recurso em que você trabalhará.
3. Edite o projeto.
4. Confirme as alterações em sua máquina local.
5. Envie as alterações para o repositório remoto.
6. Crie uma solicitação pull para o repositório original.
7. Mescle e resolva conflitos no branch principal do repositório original.

Tutorial

Agora é hora de sujar as mãos!

Neste guia, você criará um site HTML simples. Para fins práticos, você fará o fork do projeto base do repositório do site HTML para sua conta do GitHub. Isso pode ser feito para todos os repositórios públicos disponíveis.

Para bifurcar o site HTML, acesse este repositório do GitHub e clique no botão Fork localizado no canto superior direito da página:

Agora você tem uma bifurcação do repositório original que está disponível apenas na sua conta do GitHub. É exatamente o mesmo repositório — até você começar a confirmar as alterações.

Como você pode ver, bifurcar um repositório público leva apenas alguns segundos. Isso é ótimo para projetos de código aberto, mas lembre-se de que, se sua organização tiver um repositório privado, você precisará ser incluído como colaborador antes de tentar bifurcá-lo.

É hora de trazer seu fork para sua máquina local. Para fazer isso, você precisa cloná-lo com o comando git clone , que recupera o repositório Git do servidor remoto:

 git clone remote_url

Você precisa substituir remote_url pela URL do seu fork. Para obter o URL exato de um repositório do GitHub, acesse sua página e clique em Code . Em seguida, escolha SSH e copie o link que ele fornece:

O comando que você executaria para clonar o repositório bifurcado é:

 git clone [email protected]:yourusername/HTML-site.git

Ao clonar um repositório, você obtém uma pasta com seu nome. Dentro dessa pasta está o código-fonte do projeto (neste caso, o site HTML) e o repositório Git, que está localizado dentro de uma pasta chamada .git .

Você pode ver a lista de arquivos dentro do novo diretório abrindo a nova pasta em um gerenciador de arquivos gráfico ou listando-os diretamente do terminal com os comandos ls ou dir :

 # Linux/macOS ls HTML-site/ # Windows dir HTML-site\ .git images .gitignore index.html LICENSE README.md styles.css

Este site HTML é muito simples. Ele usa Bootstrap para fins práticos e algumas fotos do Unsplash, onde você pode baixar imagens gratuitas para o seu site.

Se você abrir o arquivo index.html em seu navegador, verá uma página simples com algumas imagens:

É hora de brincar com este projeto. Parece muito vazio, e talvez um cabeçalho com o nome do site possa melhorar a experiência do usuário.

Para fazer isso, entre no diretório do site HTML e crie uma ramificação chamada header . Nesta nova ramificação, podemos editar todos os arquivos e implementar quanto código quisermos, pois isso não afetará a ramificação principal (original).

Execute o seguinte comando:

Assine a newsletter

Quer saber como aumentamos nosso tráfego em mais de 1000%?

Junte-se a mais de 20.000 pessoas que recebem nossa newsletter semanal com dicas privilegiadas do WordPress!

Inscreva-se agora

 git checkout -b header

Isso criará uma ramificação chamada “header” e mudará para ela logo após isso. É equivalente a:

 git branch header git checkout header

Para confirmar que tudo correu bem, execute:

 git status # On branch header # nothing to commit, working tree clean

Você verá que foi deslocado da ramificação “principal” para a ramificação “cabeçalho”, mas a árvore de trabalho ainda está limpa, pois não editamos nenhum arquivo.

Em seu editor de código favorito, abra o arquivo index.html em seu projeto ramificado. Este arquivo inclui alguns links para o Bootstrap 5, para que possamos aproveitar os componentes prontos para uso do framework.

Adicione o seguinte código ao arquivo index.html dentro da tag <body> e acima do contêiner de imagem:

 <header> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-brand mb-0 h1">HTML site</span> </div> </nav> </header>

Muito mais bonito! Sinta-se à vontade para fazer outras ramificações e alterações que desejar.

Quando terminar de editar o projeto, é hora de confirmar todas as alterações em seu repositório local. Dentro do diretório do projeto, digite o seguinte em seu terminal:

 git add --all git commit -m "Added simple header in index.html file"

Quando você inicia um projeto, é comum ter mensagens de confirmação descritivas, mas com o tempo e o foco deslocado, a qualidade das mensagens tende a cair. Certifique-se de manter a boa prática de nomenclatura.

Agora que você fez um commit no seu repositório local (que ainda está disponível apenas no seu computador), é hora de enviá-lo para o repositório remoto.

Se você tentar enviar o commit normalmente, não funcionará porque você está trabalhando no branch header . Você precisa definir o branch upstream para header :

 git push --set-upstream origin header

A partir de 13 de agosto de 2021, o GitHub requer o uso de autenticação SSH, portanto, verifique se suas chaves estão configuradas corretamente.

Depois disso, você poderá ver um novo branch chamado header em seu repositório bifurcado (por exemplo, https://github.com/yourusername/HTML-site/branches ):

Para criar uma solicitação pull para o repositório original, clique em Comparar , na seção Ramificações ativas .

Isso irá guiá-lo para uma solicitação pull, onde você precisará escolher com qual branch (o original ou seu fork) você deseja mesclar. Por padrão, mostra a opção de mesclar com o repositório base:

Depois de clicar na opção de solicitação de pull, você precisará escrever uma breve descrição das alterações feitas, assim como em seus commits anteriores. Mais uma vez, tente ser conciso, mas descritivo:

Clique no botão Create pull request e espere que o proprietário do repositório base aceite ou dê feedback sobre suas alterações.

Parabéns — você acabou de concluir todas as etapas de um fluxo de trabalho Git comum para desenvolvimento web!

Este foi um exemplo realmente básico, mas a lógica se estende a projetos de todos os tamanhos. Certifique-se de implementar esse fluxo de trabalho de perto também em projetos colaborativos maiores.

Como usar o Git na Kinsta

Se você é um usuário Kinsta, você já tem duas maneiras de usar o Git e o GitHub no seu portal MyKinsta.

Vamos começar com a primeira opção. Você pode facilmente fazer o SSH e extrair um repositório de qualquer serviço de hospedagem Git, como GitHub, Gitlab ou Bitbucket.

Para fazer isso, vá para a guia Sites , selecione um site e vá para a seção de detalhes do SSH e copie o comando do terminal SSH.

Faça login via SSH no seu site colando o comando acima em seu terminal e entrando na pasta pública do seu site (localizada em /www/yoursitename/ ). Aqui é onde todos os seus arquivos do WordPress estão localizados, então você pode baixar um repositório Git com um tema ou plugin personalizado no qual você está trabalhando.

Veja como você poderia baixar um repositório Git em um comando simples:

 ssh [email protected] -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"

Agora, apresentando o novo recurso de implantação do GitHub na Kinsta, você pode implantar um site WordPress completo a partir de um repositório do GitHub.

Seu repositório do GitHub deve incluir uma cópia dos arquivos principais do WordPress e, claro, o conteúdo do seu site dentro da pasta wp-content .

Vamos dar uma olhada rápida nesta opção.

Acesse um dos sites da sua empresa e crie um ambiente de teste. Isso não levaria mais do que alguns minutos.

Quando estiver no site de teste, vá para a guia Implantação e clique no botão Iniciar configuração . Você verá um modal do GitHub que permitirá que Kinsta se conecte à sua conta do GitHub.

Agora, selecione o repositório do qual você extrairá seu site.

Por fim, implante seu site e visite-o por meio da URL do site de teste.

Esse recurso ainda está em Beta , mas em breve todo usuário Kinsta terá acesso a ele.

Usar Git e Kinsta pode ser uma combinação poderosa se você souber usá-los bem. Embora nosso tutorial aqui apresente apenas um exemplo simples, você pode aprender muito mais com nosso artigo da base de conhecimento do Git.

Resumo

Atualmente, o Git é uma ferramenta obrigatória para desenvolvimento web, já que na maioria das vezes você estará colaborando com outras pessoas para criar o melhor projeto possível.

Neste artigo, discutimos alguns motivos importantes para usar o Git em seus projetos e mostramos o fluxo de trabalho básico de colaboração em um repositório Git.

O Git é uma ferramenta tão poderosa que você pode estender seu uso até mesmo para hospedagem WordPress, então só pode beneficiá-lo aprender e implementá-lo como parte de seu arsenal de habilidades de desenvolvimento web.

Você tem alguma outra sugestão para melhorar esse fluxo de trabalho básico do Git para desenvolvimento web? Deixe-nos saber na seção de comentários!