S01 Configuração: Instale o Git e Clone Seu Repositório
Visão Geral
Você deve concluir as etapas para instalar o VS Code e configurar seu repositório GitHub antes de iniciar esta atividade.
Se você não concluiu essas atividades com êxito, pare e conclua-as antes de iniciar a atividade atual.
Agora que você criou seu repositório do curso no GitHub, precisa baixar uma cópia dele em seu computador para que possa trabalhar em seus arquivos e depois enviá-los ao GitHub quando estiverem prontos para serem publicados.
Git é um software que gerencia os arquivos que você usa em programas e páginas web. É bem popular na indústria e ajuda a controlar diferentes versões de arquivos, além de ajudar os membros da equipe a compartilhar código entre si. Com ele, você pode clonar ou baixar um repositório em seu computador. Você também pode dar push ou fazer upload do seu código no GitHub quando terminar.
Esta atividade de configuração ajudará você a instalar o Git no seu computador e usá-lo para clonar o repositório que você criou no GitHub.
Instruções
Instale o Git no computador
Selecione apenas um dos seguintes conjuntos de instruções, dependendo do seu sistema operacional.
Usuários do Windows
- Antes de baixar o Git, verifique se você ainda não tem o Git instalado no seu computador.
- Abra um prompt de comando usando o botão Iniciar e digitando
cmdna caixa de pesquisa. O terminal do prompt de comando será aberto.Outra opção é usar o painel do terminal no VS Code para concluir qualquer tarefa de linha de comando. Use o atalho de teclado
Ctrl+`para alternar o painel do terminal. - Digite o seguinte comando e pressione Enter:
git --version - Se você vir um número de versão, significa que o Git já está instalado. Se você não vir um número de versão, precisará instalar o Git.
- Abra um prompt de comando usando o botão Iniciar e digitando
- Para instalar o Git para Windows, acesse
git-scm.com/downloads - (conteúdo em inglês)
e selecione Download for Windows.
Um arquivo .exe será baixado. - Clique duas vezes nesse arquivo para abrir e executar o executável de instalação. O processo de instalação
do Git será iniciado.
- Permita que o instalador faça alterações no seu computador.
- Selecione Next em todas as janelas de configuração, sem mexer nas definições padrão. Haverá várias janelas.
- A última janela permitirá que você selecione Install e clique em Finish.
- Abra uma nova janela do prompt de comando fechando a primeira janela dele e inicie uma
instância clicando no botão Iniciar e digitando
cmdna caixa de pesquisa. - Digite o comando
git --versione pressione Enter para verificar se o Git está instalado. Você deverá ver o número da versão. - No prompt de comando, digite mais dois comandos para configurar o nome de usuário e e-mail associados à sua
conta do GitHub.
Certifique-se de usar seu próprio nome de usuário e e-mail entre aspas "". Use o nome de usuário e o e-mail da conta do GitHub. Esses dados serão diferentes para cada estudante.
- Digite este comando de configuração para definir o nome de usuário global do git:
e pressione Enter. Nada acontecerá se você tiver feito do jeito certo. Se ocorrer um erro, você precisará corrigi-lo.git config --global user.name "seunomedeusuario" - Digite este comando de configuração para definir o e-mail:
Nada acontecerá se você tiver feito do jeito certo. Se ocorrer um erro, você precisará corrigi-lo.git config --global user.email "seuemail@byupathway.edu" - Digite este comando de configuração para não ignorar alterações de maiúsculas e minúsculas em nomes de
arquivos e pastas:
Nada acontecerá se você tiver feito do jeito certo. Se ocorrer um erro, você precisará corrigi-lo.git config --global core.ignorecase false
- Digite este comando de configuração para definir o nome de usuário global do git:
Demonstração
Link: ▶️ Instalando o Git para Windows
Usuários do MacOS:
- Antes de baixar o Git, verifique se você ainda não tem o Git instalado no seu computador.
- Selecione o ícone de busca (parece uma lupa) na tela, próximo ao canto superior direito.
- Digite
"Terminal"e abra a aplicação Terminal. Independentemente de qual caminho nosso prompt de comando está mostrando, todos os comandos que digitarmos funcionarão em qualquer lugar. - Digite
git --versione selecione Enter. - Agora você deve ver um número de versão do git ou uma janela pop-up que diz algo como
"O comando git requer as ferramentas do desenvolvedor de linha de comando ...". Se você vir o número da versão do git, você já tem o git instalado e não precisa instalá-lo, mas recomendamos definir sua configuração conforme mostrado abaixo. Se você receber a mensagem pop-up, selecione Install and Agree. - A instalação pode levar alguns minutos. Com a instalação, você receberá um conjunto de ferramentas de desenvolvimento, incluindo o Git.
- Digite
git --versione selecione Enter. Agora você deve ver o número da versão. - No prompt de comando, digite comandos adicionais para configurar o nome de usuário e e-mail associados à
conta do GitHub. Novamente, como essas são configurações globais, você pode digitá-las em qualquer prompt
de caminho.
Certifique-se de usar seu próprio nome de usuário e e-mail entre aspas "". Use o mesmo nome de usuário e e-mail da sua conta do GitHub. Esses dados serão diferentes para cada estudante.
- Digite este comando de configuração para definir o nome de usuário global do git:
e pressione Enter. Nada acontecerá se você tiver feito do jeito certo. Se ocorrer um erro, você precisará corrigi-lo.git config --global user.name "seunomedeusuario" - Digite este comando de configuração para definir o e-mail:
Nada acontecerá se você tiver feito do jeito certo. Se ocorrer um erro, você precisará corrigi-lo.git config --global user.email "seuemail@" - Digite este comando de configuração para não ignorar alterações de maiúsculas e minúsculas em nomes
de arquivos e pastas:
Nada acontecerá se você tiver feito do jeito certo. Se ocorrer um erro, você precisará corrigi-lo.git config --global core.ignorecase false
- Digite este comando de configuração para definir o nome de usuário global do git:
- Se você quiser verificar as configurações globais, digite
para revisar o nome de usuário e o e-mail. Não se preocupe com as outras configurações informadas.git config --list
Usuários Linux
- Guia: Instalação do Git para Linux - (conteúdo em inglês)
- Instale o Git usando o link acima e siga os últimos passos das instruções do Windows ou Mac para configurar seu nome de usuário e e-mail de configuração global para corresponder à sua conta do GitHub.
Clone Seu Repositório GitHub
Agora que você instalou o Git no computador, pode usá-lo para clonar ou baixar seu repositório do GitHub. O VS Code é integrado ao Git, para que você possa executar funções do Git diretamente no programa.
- Abra o VS Code.
- Se a janela do VS Code não abrir na página de boas-vindas, selecione Arquivo -> Nova Janela para abrir uma nova janela que deve começar com a página de boas-vindas.
- Na página de boas-vindas, selecione a opção: Clonar Repositório Git....
Página inicial do VS Code mostrando a opção "Clonar Repositório Git...". - Após clicar em Clonar Repositório Git..., o VS Code exibirá uma caixa para você digitar o URL
do seu repositório. Digite o URL do seu repositório e pressione Enter ou
Return.
- O URL do seu repositório é:
https://github.com/seu-nomedeusuario/wdd130(substituaseu-nomedeusuariopelo seu nome de usuário real). - Talvez seja mais fácil copiar e colar o URL de um navegador em que você abriu seu repositório.
Exemplo da caixa de URL do GitHub. - O URL do seu repositório é:
- Nesse ponto, uma janela de login pode aparecer e solicitar que você insira seu nome de usuário e senha do GitHub, bem como autorize o VS Code a se conectar ao GitHub.
- Você precisará selecionar um local no seu computador para salvar seu repositório. Pode ser qualquer lugar que você desejar, mas lembre-se desse local para poder encontrá-lo no futuro.
- Em seguida, o Git clonará uma cópia do seu repositório em o seu computador. Assim, você poderá selecionar a opção para abrir esse repositório na sua janela atual.
Abrir uma Página Web
Agora que você clonou seu repositório em seu computador, pode editar os arquivos HTML e visualizá-los em seu navegador usando a extensão Live Server (Five Server) que instalou anteriormente.
- No painel "Explorador" do VS Code, encontre o arquivo
index.html. - Clique com o botão direito do mouse em
index.htmle selecione Abrir com Live/Five Server.
Opção para Abrir com Live/Five Server - A página inicial deve ser exibida no seu navegador.
Exemplo de página web que deve ser exibida no seu navegador.