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

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

Como um desenvolvedor web, é extremamente importante saber como usar Git para o 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 Git.

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

Por que usar Git?

Estas são apenas algumas das razões para começar usar 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: Git permite que você e outras pessoas trabalhem no mesmo projeto ao mesmo tempo, sem criar conflitos.
  • Código aberto: Git é open-source, mas é também a ferramenta que usamos para colaborar e criar grandes softwares open-source. Qualquer pessoa pode fazer pedidos para projetos open-source em plataformas como GitHub ou Bitbucket.
  • Flexibilidade de plataforma: Atualmente, você tem muitos serviços diferentes de hospedagem Git para escolher, tais como Gitlab, GitHub, Bitbucket, e SourceForge. Você pode até mesmo usar uma solução auto-hospedada para todos os seus projetos.
  • Backups fáceis: Desfaça os erros com facilidade, e nunca perca sua base de código do projeto.
É hora de aprender mais do que apenas 'git add', 'git commit' e 'git push'👩‍💻 Mergulhe em tudo o que você precisa saber sobre um fluxo de trabalho típico Git neste guia 👇Clique para Tweetar

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

Isto pode confundir você se você é totalmente novo em Git. Para colocar isso em palavras simples, Git e GitHub são ferramentas relacionadas, porém diferentes.

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

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.

GitHub supercarrega Git adicionando outras características que melhoram a colaboração, como clonagem, bifurcação e fusão. Juntas, estas duas ferramentas combinam para trazer a você um ecossistema relativamente amigável para desenvolver, gerenciar e mostrar o seu projeto para outras pessoas.

Git básico para o fluxo de trabalho de desenvolvimento web

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

Requisitos de instalação

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

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

Página de downloads Git
Página de downloads Git

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

Em seguida, digite:

git --version
Versão Git
Versão Git

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

Também precisaremos de uma conta GitHub, então certifique-se de se inscrever ou fazer o login no GitHub:

Página de inscrição no GitHub
Página de inscrição no GitHub

Uma vez que você tenha Git instalado e tenha feito login em sua conta GitHub, você pode passar para a próxima seção.

Fluxo de trabalho básico do Git para projetos colaborativos

Como mencionado anteriormente, a maior parte do tempo você não estará desenvolvendo projetos solo. Colaborar é uma habilidade chave, e Git e GitHub nos ajudam a fazer disso um processo simples e eficaz.

O fluxo de trabalho típico de um projeto Git se parece com isto:

  1. Obtenha uma cópia local do projeto clonando um repositório, ou repo. Se você estiver colaborando, você deve bifurcar o repo primeiro.
  2. Crie uma filial com um nome representativo do recurso em que você estará trabalhando.
  3. Edite o projeto.
  4. Comprometa as mudanças em sua máquina local.
  5. Mova as mudanças para o reporte remoto.
  6. Crie um pull request para o reporte original.
  7. Unifique e resolva conflitos na ramificação principal do repo original.

Tutorial

Agora é hora de sujar nossas mãos!

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

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

Fork GitHub
Fork GitHub

Agora você tem um fork do repo original que só está disponível na sua conta GitHub. É exatamente o mesmo repo – até que você comece a cometer mudanças.

Como você pode ver, a procura de um reporte público leva apenas alguns segundos. Isto é ótimo para projetos open-source, mas tenha em mente que se sua organização tem um repo privado, você precisará ser incluído como um contribuinte 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 a URL exata de um repo GitHub, vá para sua página e clique em Code. Então escolha SSH, e copie o link que ele lhe dá:

URL SSH
URL SSH

O comando que você executaria para clonar o repo bifurcado é:

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

Quando você clona um repo, você recebe uma pasta com seu nome. Dentro dessa pasta está o código fonte do projeto (neste caso, o site HTML) e o Git repo, 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 de Unsplash, onde você pode baixar imagens grátis para o seu site.

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

A página web simples que estamos criando
A página web simples que estamos criando

É 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 HTML-site e crie uma filial chamada header. Nesta nova filial, nós podemos editar todos os arquivos e implementar todo o código que quisermos porque ele não afetará a filial principal (original).

Execute o seguinte comando:

git checkout -b header

Isto criará uma filial chamado “header” e o trocará por ele logo após isto. É 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 você foi deslocado da filial “main” para “header”, mas a árvore de trabalho ainda está limpa desde que 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 tirar proveito dos componentes prontos para uso do framework.

Adicione o seguinte código ao arquivo index.html dentro da tag <body> e acima do recipiente da 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>
Nossa página web com um novo cabeçalho
Nossa página web com um novo cabeçalho

Muito mais bonito! Sinta-se livre para fazer outras filiais e mudanças que você desejar.

Uma vez que você tenha terminado de editar o projeto, é hora de comprometer todas as mudanças no seu repo 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 pela primeira vez, é comum ter mensagens de compromisso descritivas, mas com o tempo e o foco deslocado, a qualidade das mensagens tende a diminuir. Assegure-se de manter uma boa prática de nomeação.

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

Se você tentar mover o compromisso como normal, isso não vai funcionar porque você está trabalhando atualmente na filial header. Você precisa configurar a ramificação 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, então certifique-se de ter suas chaves corretamente configuradas.

Depois disso, você deve ser capaz de ver uma nova filial chamada header em seu repositóri o bifurcado (por exemplo https://github.com/yourusername/HTML-site/branches):

A filial "header"
A filial “header”

Para criar um pull request para o reporte original, clique em Compare, na seção Active branches.

Isto irá guiá-lo para um pull request, onde você precisará escolher com que filial (o original ou seu fork) você quer fundir. Por padrão, ele mostra a opção de fundir com o repositório base:

Criando pull request no GitHub
Criando pull request no GitHub

Uma vez que você clique na opção pull request, você precisará escrever uma breve descrição das mudanças feitas, assim como com seus compromissos anteriores. Mais uma vez, tente ser conciso, porém descritivo:

Escrevendo uma mensagem pull request
Escrevendo uma mensagem pull request

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

Parabéns – você acaba de completar todos os passos de um fluxo de trabalho Git comum para o desenvolvimento web!

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

Como usar Git na Kinsta

Se você é um usuário Kinsta, você já tem duas maneiras de usar Git e GitHub dentro do seu painel MyKinsta.

Vamos começar com a primeira opção. Você pode facilmente entrar no SSH e puxar um repo de qualquer serviço de hospedagem Git como GitHub, Gitlab, ou Bitbucket.

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

Seção de detalhes do SSH
Seção de detalhes do SSH

Faça o login via SSH em seu site colando o comando acima em seu terminal, e entrando na pasta pública do seu site (localizada sob /wwww/yoursitename/). Aqui é onde todos os seus arquivos WordPress estão localizados, assim você pode puxar para baixo um repo Git com um tema ou plugin personalizado no qual você tem trabalhado.

Aqui está como você faria um repo de Git em um simples comando:

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

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

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

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

Vá para um dos sites da sua empresa e crie um ambiente de teste. Isso não demoraria mais do que alguns minutos.

Ambiente de teste
Ambiente de teste

Uma vez que você esteja em seu site de teste , vá para a aba Implantação e clique no botão Começar a configuração. Você vai ver um modal GitHub que deixará Kinsta se conectar com sua conta GitHub.

Guia de implantação do GitHub
Guia de implantação do GitHub

Agora, selecione o repo do qual você irá recuperar seu site.

Conecte Kinsta ao GitHub
Conecte Kinsta ao GitHub

Finalmente, implante seu site e visite-o através da URL do seu site de teste.

Botão Implantar agora
Botão Implantar agora

Este recurso ainda está em Beta, mas em breve todos os usuários Kinsta terão acesso a ele.

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

Aumente seu conhecimento do Git com este guia para um fluxo de trabalho típico de projeto ✅Clique para Tweetar

Resumo

Hoje em dia, Git é uma ferramenta indispensável para o desenvolvimento web, já que na maioria das vezes você estará colaborando com outros para criar o melhor projeto possível.

Neste artigo, nós discutimos algumas razões importantes para usar Git em seus projetos, e mostramos a você o fluxo de trabalho básico de colaboração em um repo Git.

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

Você tem alguma outra sugestão para melhorar este fluxo de trabalho básico do Git para o desenvolvimento web? Nos informe na seção de comentários!


Obtenha todos os seus aplicativos, banco de dados e Sites WordPress on-line e sob o mesmo teto. Nossa plataforma de nuvens de alto desempenho e repleta de recursos inclui:

  • Fácil configuração e gerenciamento no painel MyKinsta
  • Suporte especializado 24/7
  • O melhor hardware e rede do Google Cloud Platform, alimentado por Kubernetes para a máxima escalabilidade
  • Integração Cloudflare de nível empresarial para velocidade e segurança
  • Audiência global com centros de dados de até 35 e 275 PoPs no mundo todo

Teste você mesmo com um desconto de 20 dólares em seu primeiro mês de Hospedagem de Aplicativos ou Hospedagem de Banco de Dados. Explore nossos planos ou entre em contato com as vendas para encontrar seu melhor ajuste.