Entre para a LISTA VIP da Black Friday

00

DIAS

00

HORAS

00

MIN

00

SEG

Clique para saber mais

Clonando um repositório com Git e GitHub

Clonando um repositório com Git e GitHub
LUZDALIS LOPEZ D´ROMERO
LUZDALIS LOPEZ D´ROMERO

Compartilhe

Antes de começar a abordar este tema, é conveniente relembrar que este artigo é o terceiro de uma sequência de três, onde o primeiro é sobre como Iniciar um repositório local com o Git e o segundo é sobre Criar um repositório remoto no GitHub.

Clonando o repositório

Primeiramente, é importante saber que a clonagem de um projeto lhe dará o benefício de criar um repositório Git na máquina local com todas as alterações feitas durante o seu desenvolvimento. Além de trazer todo o código, virá com seu próprio histórico de commits, com detalhes explicativos sobre as modificações que foram feitas. Outra vantagem é que você pode fazer alterações no repositório local e enviar para o repositório remoto.

Nota: Todas as pessoas que são novas usuárias do GitHub precisam gerar uma chave SSH, já que muitos servidores Git e, em particular, GitHub, usam a autenticação através de chaves públicas SSH. Desta forma cada usuário do sistema deve ter uma, para poder escrever e enviar modificações para o repositório remoto.

Primeiro passo: copiando o URL do repositório remoto

Para começar, clique em Repositories e acesse o repositório desejado. No canto superior direito, você verá a opção <>Code:

Gif com: Página inicial de um perfil no gitHub; Clique sobre "Repositories"; Clique sobre repositório a ser clonado; Clique no botão "<> Code"."

Ao clicar em <>code abrirá um menu de opções, onde poderá escolher a URL que deseja copiar para fazer o clone. Seja com o HTTP ou mediante uma chave SSH, como na imagem a seguir:

Gif com: botão "<> Code" clicado; Clique sobre endereço HTTP do repostório; Clique sobre chave SSH, clic sobre botão "copiar""

Segundo passo: abrindo terminal Git Bash

Abra a janela do terminal Git Bash e acesse a pasta Desktop (pode utilizar qualquer outra pasta do seu diretório principal ou ou criar uma própria), onde será anexada a cópia do projeto, utilizando o comando $ git clone e colando. Em consequência copiará na linha de comando o endereço da URL que foi copiada no passo anterior e utilizará a chave de SSH para e este exemplo:

$ git clone [email protected]:Luzdalis-Lopez/template_natureza.git

Gif com: Terminal Git Bash; comando `$ cd Desktop`; comando `$ ls`; comando `$ git clone git@github.com:Luzdalis-Lopez/templete_naturaleza.git`; mensagem de clonagem com êxito."

Uma vez clonado o repositório, verifique sua existência na pasta escolhida, listando o que há nela através do comando $ ls:

Gif com:  Terminal Git Bash; Comando `$ ls`; Pasta local com repositório clonado."

Agora, entre no repositório clonado para ver a Branch principal e mostrar os arquivos que existem nela com o comando $ cd nome_do_repositorio:

Gif com: Terminal Git Bash; Comando `$ cd templete_naturaleza`;  Branch principal e arquivos do repositório clonado."

Visualize o histórico de commits com o seguinte comando:

$ git log

Gif com: Terminal Git Bash; Comando ` $ git log`; Último commit feito destacado; Primeiro commit feito destacado."

Vejamos os dados do commit com mais detalhes:

Gif com: Terminal Git Bash; Hash do commit; Autor do commit; Data e hora do commit; Descrição do commit."

Com o comando $ git log --oneline, se mostrará a informação do commit de uma maneira mais resumida:

Gif com: Terminal Git Bash; Comando `$ git log --oneline`; Resumo do commit; Comando `$ code  .`; Tela inicial do Visual Studio Code."

Além disso, foi executado o comando $ code .

Este comando é utilizado para abrir o VS Code nesta mesma pasta se realizarão algumas alterações no repositório local, que posteriormente serão enviadas ao repositório remoto.

Terceiro passo: visualizando o repositório clonado no editor Visual Studio Code

A seguir vamos observar os arquivos que estão no repositório clonado no editor de código:

Gif com: Tela inicial do Vs Code; Zoom no canto superior esquerdo; Clique sobre pasta de imagens; Clique sobre o arquivo HTML; clique sobre o arquivo CSS; repositório clonado destacado."

Utilizando o atalho (Ctrl + J), abrirá o terminal integrado de VS Code. No canto direito do terminal, mude a opção predeterminada Powershell para terminal Git Bash, como na imagem a seguir:

Gif com: Vs Code na janela do arquivo HTML;  Frase: Pressione as teclas: Ctrl+ J; Terminal integrado do VS Code; Clique no símbolo v, no canto inferior direito ao lado de "powershell"; Menu de opções; Clique em Git Bash."

Utilizaremos alguns comandos que já vimos anteriormente e mais um, que se usa para baixar o conteúdo de um repositório remoto e atualizar imediatamente o repositório local, para que o conteúdo de ambos seja o mesmo, este comando é $ git pull:

Comando `$ git pull`; "Alread up to date" destacado no terminal; Frase "Dados Atualizados" é escrita na tela; Comando `$ git status`; "Nothing to commit" aparece e é destacado no terminal; Frase "Nada a comitar" é escrita na tela."

Cabe ressaltar que ao clonar um repositório na máquina local, este já vem conectado ao repositório remoto de origem, o que facilita muito a interação entre eles. Por tanto, não precisamos realizar o passo de conectar os repositórios.

Banner da promoção da black friday, com os dizeres: A Black Friday Alura está chegando. Faça parte da Lista VIP, receba o maior desconto do ano em primeira mão e garanta bônus exclusivos. Quero ser VIP

Alterar o repositório local e enviar atualizações para o remoto

Passo 1: Criando um arquivo readme.md

Criaremos um novo arquivo readme.md, com o objetivo de criar um link para a página Web publicada no GitHub Pages, pertencente ao mesmo repositório.

  1. Primeiro copie a URL da página, como na imagem:
Página inicial de GitHub; Clique no repositório desejado; Clique em botão "github-pages" no canto inferior direito; Clique em "View Deployment" no canto direito; Página do projeto do repositório escolhido; Endereço da página sendo selecionado e copiado
  1. Voltando ao Visual Studio Code:

Crie um novo arquivo readme.md e escreva dentro do arquivo o # Nome do repositório e uma âncora <a href="url_do_repositorio_copiado_anteriormente">Vizualize minha página</a>, como no exemplo:

Página inicial de Visual Studio Code com a pasta do repositório aberta; Clique em "New File" no canto superioir esquerdo; Arquivo "readme.md" sendo criado; Dentro do arquivo; Escrita de "# Nome do repositório";  Escrita da âncora.
  1. Finalmente, vamos salvar as mudanças feitas:
  • Primeiramente, ao abrir o terminal integrado do Vs Code e digitar o comando $ git status, você verá o novo arquivo readme.me como não rastreado;
  • Com o comando $ git add readme.mdo arquivo será preparado para a próxima confirmação;
  • $ git status mais uma vez para confirmar as mudanças;
  • Logo dê o comando $ git commit -m "Adicionando o arquivo readme.md" e aparecerão as informações do commit, como no exemplo:
Janela do terminal integrado; Comando `$ git status`; Tela com arquivo redme.md aparecendo em vermelho; Escrita na tela "Arquivo não rastreado"; Comando `$ git add readme.md`; Comando `$ git status`; Tela com arquivo redme.md aparecendo em verde; Escrita na tela: "Arquivo pronto para commitar"; comando `$ git commit -m "Adicionando o arquivo readme.md"` Escrita na tela: "Mensagem de sucesso."
  • Agora, veja o histórico do commit, a última confirmação(commit) que foi realizada através do comando $ git log --oneline:
Janela do terminal integrado; Comando `$ git status`; Comando  `$ git commit -m`; Último commit destacado; Escrita na tela "Último commit feito."

Passo 2: Enviando atualizações para o repositório remoto

  1. Para enviar as alterações para o repositório remoto, execute o comando $ git push:
Janela do terminal integrado; Comando `$ git push`; Escrita na tela: "Mensagem de sucesso".
  1. Vejamos as mudanças no repositório remoto:
Tela do repositório no gitHub; Atualização da página; Aquivo redme.md recebido e destacado; Histórico de commits  atualizado e destacado.

Agora faça um teste, clicando no link que foi criado no readme.md:

Gif com: Página inicial do repositório; Clique no link "Visualize minha página" na sessão readme.md; Tela inicial do programa.

Observações:

Existe uma maneira muito fácil de enviar seu projeto para o Github sem linhas de comando. Mas no mercado de trabalho ela não é muito utilizada; Portanto, se você é um daqueles que quer conquistar o mundo do trabalho, será necessário um pequeno esforço para conseguir dominar as linhas de comando. No início estas não parecem ser muito amigáveis, mas se você se dedicar e praticá-las, acabará gostando.

Para terminar, colocarei aqui novamente os links dos outros artigos sobre versionamento com Git e GitHub, que poderão ser um complemento para seu aprendizado.

LUZDALIS LOPEZ D´ROMERO
LUZDALIS LOPEZ D´ROMERO

Sou desenvolvedora web Full Stack e Scuba aqui na Alura Latam, formada em Computação. Estou em constante aprendizado, pois a tecnologia também está em constante desenvolvimento, por isso gosto de estar atualizada, pois assim poderei compartilhar meu conhecimento sabendo que assim poderei ajudar outras pessoas. Nos meus momentos livres gosto de ouvir música e cantar.

Veja outros artigos sobre DevOps