WDD 130: Fundamentos da Web

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
  1. Antes de baixar o Git, verifique se você ainda não tem o Git instalado no seu computador.
    1. Abra um prompt de comando usando o botão Iniciar e digitando cmd na 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.

    2. Digite o seguinte comando e pressione Enter:
      git --version
    3. 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.
  2. 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.
  3. Clique duas vezes nesse arquivo para abrir e executar o executável de instalação. O processo de instalação do Git será iniciado.
    1. Permita que o instalador faça alterações no seu computador.
    2. Selecione Next em todas as janelas de configuração, sem mexer nas definições padrão. Haverá várias janelas.
    3. A última janela permitirá que você selecione Install e clique em Finish.
  4. 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 cmd na caixa de pesquisa.
  5. Digite o comando git --version e pressione Enter para verificar se o Git está instalado. Você deverá ver o número da versão.
  6. 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.

    1. Digite este comando de configuração para definir o nome de usuário global do git:
      git config --global user.name "seunomedeusuario"
      e pressione Enter. Nada acontecerá se você tiver feito do jeito certo. Se ocorrer um erro, você precisará corrigi-lo.
    2. Digite este comando de configuração para definir o e-mail:
      git config --global user.email "seuemail@byupathway.edu"
      Nada acontecerá se você tiver feito do jeito certo. Se ocorrer um erro, você precisará corrigi-lo.
    3. Digite este comando de configuração para não ignorar alterações de maiúsculas e minúsculas em nomes de arquivos e pastas:
      git config --global core.ignorecase false
      Nada acontecerá se você tiver feito do jeito certo. Se ocorrer um erro, você precisará corrigi-lo.
Demonstração
Usuários do MacOS:
  1. Antes de baixar o Git, verifique se você ainda não tem o Git instalado no seu computador.
    1. Selecione o ícone de busca (parece uma lupa) na tela, próximo ao canto superior direito.
    2. 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.
    3. Digite git --version e selecione Enter.
    4. 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.
    5. A instalação pode levar alguns minutos. Com a instalação, você receberá um conjunto de ferramentas de desenvolvimento, incluindo o Git.
    6. Digite git --version e selecione Enter. Agora você deve ver o número da versão.
    7. 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.

      1. Digite este comando de configuração para definir o nome de usuário global do git:
        git config --global user.name "seunomedeusuario"
        e pressione Enter. Nada acontecerá se você tiver feito do jeito certo. Se ocorrer um erro, você precisará corrigi-lo.
      2. Digite este comando de configuração para definir o e-mail:
        git config --global user.email "seuemail@"
        Nada acontecerá se você tiver feito do jeito certo. Se ocorrer um erro, você precisará corrigi-lo.
      3. Digite este comando de configuração para não ignorar alterações de maiúsculas e minúsculas em nomes de arquivos e pastas:
        git config --global core.ignorecase false
        Nada acontecerá se você tiver feito do jeito certo. Se ocorrer um erro, você precisará corrigi-lo.
    8. Se você quiser verificar as configurações globais, digite
      git config --list
      para revisar o nome de usuário e o e-mail. Não se preocupe com as outras configurações informadas.
Usuários Linux
  1. Guia: Instalação do Git para Linux - (conteúdo em inglês)
  2. 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.

  1. Abra o VS Code.
  2. 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.
  3. Na página de boas-vindas, selecione a opção: Clonar Repositório Git....
    Página de boas-vindas do VS Code mostrando a opção Clonar Repositório Git.
    Página inicial do VS Code mostrando a opção "Clonar Repositório Git...".
  4. 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 (substitua seu-nomedeusuario pelo 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.
    Caixa de URL do GitHub.
    Exemplo da caixa de URL do GitHub.
  5. 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.
  6. 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.
  7. 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.

  1. No painel "Explorador" do VS Code, encontre o arquivo index.html.
  2. Clique com o botão direito do mouse em index.html e selecione Abrir com Live/Five Server.
    Opção Abrir com Live/Five Server
    Opção para Abrir com Live/Five Server
  3. A página inicial deve ser exibida no seu navegador.
    Exemplo de página inicial
    Exemplo de página web que deve ser exibida no seu navegador.