Nesse post você encontra um tutorial passo a passo de como utilizar o Git e GitHub para versionar seus projetos de código. De cara já vamos fazer essa distinção entre esses conceitos: o Git é um versionador criado por Linus Torvalds (o mesmo criador do Linux) que permite que os desenvolvedores criem software em conjunto (de forma distribuída) e controlem versões dos arquivos; já o GitHub é uma plataforma que funciona como um repositório online de código, e por ter se tornado tão popular no mundo do desenvolvimento de software, hoje é utilizada muitas vezes como portfólio para desenvolvedores. Simplificando, os arquivos do Git estão em um repositório local (sua própria máquina) enquanto os arquivos do GitHub estão em repositório remoto.

Ahh, antes que eu me esqueça, esse post foi produzido para auxiliar o desenvolvimento dos meus projetos de front-end. Então não esquece da dar uma olhadinha aqui 😀.

Para começar nossa jornada, precisamos instalar o versionador em nossa máquina. Para isso, siga o passo a passo abaixo:

Como instalar o Git

Como faço pra instalar e configurar o Git? Vem comigo que te mostro um passo a passo bem simples que eu segui quando dei meus primeiros passos na área de computação. Bora?

1. Baixe o software aqui, selecionando apenas o sistema operacional instalado na sua máquina. Quando fiz essa instalação, a versão disponível era 2.34.1.
2. Siga as configurações padrões sugeridas de instalação, exceto na escolha do editor, pois preferi usar o VSCode.

3. Abra o GitBash e digite os seguintes comandos iniciais:

// esses comandos configuram seu usuário e e-mail globais do Git:
git config --global user.name "<seunome>"
git config --global user.email <seuemail>

Como conectar o Git com o GitHub

4. Após essas configurações iniciais, precisamos conectar o Git com nosso repositório no GitHub. Para isso, você precisa primeiramente se cadastrar aqui.

5. Depois de criar sua conta e fazer login, você já pode criar seu primeiro repositório, clicando no sinal de + e escolhendo a opção “New repository”, como na imagem. Em seguida, é só dar um nome para esse repositório e escolher se você quer que ele fique público ou privado na plataforma.

6. Após a criação do repositório, você verá uma tela como essa, com um link que será usado para conectar seu computador ao repositório do GitHub. Copie esse link.

7. Crie uma pasta no seu computador, de preferência com o mesmo nome do repositório do GitHub, e com o botão direito do mouse sobre a pasta, clique em “GitBash Here”. Agora dentro do terminal GitBash, vamos executar os seguintes comandos:

// esse comando inicializa um repositório vazio:
git init
// esse comando conecta o repositório vazio com o repositório do GitHub:
git remote add origin <link do repositório>

Adicionando novos arquivos ao repositório

8. Agora vamos abrir o VSCode, clicar em “Abrir Pasta” (ou arrastar a pasta para dentro do VSCode) e selecionar a pasta que criamos. A seguir, clicamos no botão mostrado abaixo e digitamos “readme.md”, por exemplo, para criar um novo arquivo de instruções. Já é possível editar esse arquivo e digitar as instruções do repositório, ou seja, um mini tutorial do porquê o repositório existe. Quando encerrar, salve o documento e ele já estará na sua pasta no computador. Esse passo pode ser feito pra qualquer tipo de arquivo que você queira colocar no seu repositório.

9. Para que essa alteração esteja no seu GitHub, é preciso primeiro colocar esse arquivo em “stage”, ou seja, pronto pra ser commitado. Então abra o GitBash e digite o seguinte código:

// esse comando adiciona o arquivo criado para ser commitado
git add "readme.md" 
// esse comando adiciona TODOS os novos arquivos criados para serem commitados
git add .

10. Agora que o arquivo está pronto, é preciso “commita-lo”, ou seja, empacotá-lo para ser enviado ao repositório. Digite os seguintes códigos e a mensagem do commit, que serve para identificar quais alterações foram feitas em cada etapa do versionamento.

// esse comando efetiva o commit:
git commit -m "mensagem aqui"
// esse comando manda as alterações para seu GitHub:
git push -u origin <my-branch>

11. Nesse ponto, o Git vai te pedir acesso para entrar no seu GitHub. Clique em “sign in with your browser” e autorize o acesso ao repositório no botão verde (essa etapa só acontece na primeira vez que acessa um repositório remoto). Pronto, seu novo arquivo já estará disponível no seu GitHub.

GitHub Desktop

Essa sequência de comandos apresentada é a mais indicada para todos os desenvolvedores de software (inclusive iniciantes), no entanto, sabemos que alguns ficam um pouco “assustados” com o terminal. Bom, eu recomendo que você aos poucos vá reduzindo esse medo, visto que você vai trabalhar com o terminal talvez pro resto da sua vida. Mas eu entendo que muitas vezes essa solução para o trabalho diário poderia ser mais simplificada, principalmente quando você quer reduzir a quantidade de comandos que você precisa decorar.

Para isso, nosso querido GitHub disponibiliza uma ferramenta chamada GitHub Desktop. Ela funciona como uma interface funcional para o Git e você pode controlar suas versões por ela.

Para instalar essa ferramenta:

1. Visite esse website e faça download do software (de acordo com seu sistema operacional);
2. Faça a instalação;
3. Conecte sua conta do GitHub efetuando o login;
4. E pronto!

Comandos importantes

// esse comando abre uma pasta (Repositorio-de-Git) com o seguinte caminho:
cd Documents/GitHub/Repositorio-de-Git

// esse comando sai de dentro da última pasta:
cd ..

// esse comando sai de todas as pastas e volta para a origem, onde o git está instalado:
cd /

// esses comandos listam os arquivos que estão dentro da pasta atual:
ls (para linux)
dir (para windows)

// esse comando cria uma pasta nova dentro da pasta atual:
mkdir NomeDaPasta

// esse comando limpa a tela:
clear

// esse comando mostra o estado do repositório:
git status

// comandos de histórico de ações:
git log (mostra todas as alterações)
git log --oneline (mostra o histórico resumido)
git log -p (detalha cada alteração)
git diff <numero>..<numero> (mostra as diferenças entre 2 commits)

// comandos que desfazem ações:
git checkout -- <arquivos> (antes do add)
git reset HEAD <arquivos>
git checkout -- <arquivos> (depois do add e antes do commit)
git revert (depois do commit)

Esse site te mostra várias opções de comandos de git log para customização.

Conclusão

A utilização básica dos nossos amigos Git e Github foi resumida nesse post/tutorial. É claro que existem outros conceitos que precisam de um maior aprofundamento, por exemplo, desenvolvimento usando branches diferentes, merge, rebase etc. Esses comandos fazem parte do trabalho de todo DEV e são essenciais para a carreira, portanto, no futuro farei um novo post falando sobre esses comandos mais “avançados”!

Se você quiser acessar meu repositório de conhecimento, não esqueça de acessar meu GitHub!