Repositório da iniciativa #7DaysOfCode da Alura, tema GitHub.
Elaborado por Fabrício Carraro, Product Owner e Instrutor na Alura.
Criar um repositório do zero a partir da própria página do GitHub.
Como um desafio opcional, pesquise como alterar a descrição do seu perfil para adicionar as suas habilidades e deixá-lo estilizado. Solte a sua criatividade e deixe essa página a mais legal possível!
Escolha um nome bem autoexplicativo para os seus repositórios, assim, eles serão encontrados mais facilmente por você e, quem sabe, outras pessoas desenvolvedoras no futuro.
Ao criar o repositório, é interessante adicionar uma boa descrição e deixar a visibilidade como "Pública", para que outras pessoas possam contribuir com o seu projeto.
Para o exercício opcional, você terá que alterar o arquivo "Readme" do seu repositório pessoal. Caso não queira pesquisar, você terá mais informações sobre isso na seção "Extra".
A Alura tem um artigo excelente criado pelo Paulo Silveira (@paulo_caelum) que você pode ler para ter uma ideia melhor inicial sobre GitHub.
Neste vídeo, a Rafaella Ballerini mostra como personalizar o seu arquivo "Readme" pessoal para deixar o seu perfil lindo!
E tem também este ótimo artigo com várias dicas mais avançadas de como você pode estilizar o seu arquivo "Readme".
A primeira parte do seu desafio hoje será criar no seu repositório os arquivos HTML e CSS que eu compartilhei neste template, mas isso será feito diretamente a partir da própria página do seu repositório no GitHub, copiando e colando o código manualmente. Assim que cada arquivo for criado, você deverá realizar o commit do mesmo, ao final da página.
A segunda parte do desafio será fazer o upload de uma pasta "images" para o repositório, contendo as 4 imagens compartilhadas no template acima.
Ao realizar um commit, sempre escolha uma mensagem muito clara e, de preferência, iniciada com verbos no presente ou no gerúndio.
Para fazer o upload de uma pasta, você pode criá-la localmente na sua área de trabalho com as imagens ou arquivos desejados e selecionar a opção "Upload Files".
Se você nunca utilizou o Github, calma! Eu tenho o vídeo perfeito para te ajudar nessas primeiras atividades de criação de repositório e adição de arquivos: GitHub sem linhas de comando.
Você também pode assistir essa live que debulha tudo sobre GitHub para iniciantes.
Hoje, você vai começar a usar uma IDE para continuar brincando com o seu repositório. Recomendo o uso do Visual Studio Code.
Para poder conectar a sua conta GitHub ao Visual Studio Code, você terá que fazer o download e instalação do Git também.
Tendo tudo isso instalado, o seu desafio de hoje será clonar o seu repositório criado no GitHub para editá-lo localmente, pela sua IDE.
A IDE do Visual Studio Code te dá a opção de clonar um repositório qualquer a partir de uma URL ou a partir de sua conta no GitHub. Você pode associar a sua conta e fazer isso diretamente, ou então ir na página do seu repositório, na aba "Code", e copiar a URL disponibilizada lá (escolha a da aba HTTPS).
Esse artigo explica como instalar, usar atalhos e dá outras dicas sobre o Visual Studio Code.
Hoje, você vai continuar a fazer coisas a partir da IDE. Uma grande vantagem de usar uma IDE como o Visual Studio Code é que fazer alterações no código torna-se uma tarefa muito fácil.
O template que você está utilizando, do jeito que está agora, está muito básico e genérico. O mesmo filme está sendo repetido três vezes, o texto de descrição não tem nada relevante e a imagem também está igual para todos.
A primeira parte do seu desafio de hoje será alterar o arquivo "index.html" a partir do Visual Studio Code para que você tenha três filmes diferentes, cada um com a sua descrição, imagem e nota correspondente.
Quando essas alterações estiverem prontas, você irá salvar o arquivo e, ao fazer isso, notará que, do lado esquerdo da tela, aparecerá um número "1" ao lado da aba "Source Control". Isso quer dizer que há uma alteração no seu código em relação ao código que foi baixado do repositório.
Se você clicar duas vezes no nome do arquivo "index.html" visto acima, o Visual Studio Code abrirá uma nova janela e você poderá ver claramente onde foram feitas todas as alterações no código.
A segunda e mais importante parte do desafio de hoje será realizar o commit dessas alterações que você fez no código. Você fará o commit diretamente a partir da aba "Source Control" do Visual Studio Code e passando uma mensagem explicando sobre o que se tratam as alterações.
Outra coisa que você pode fazer para praticar os seus conhecimentos é usar os comandos do Git diretamente no Terminal do Visual Studio Code.
Para abrir o Terminal, basta ir na aba superior "Terminal" e selecionar "New Terminal".
Para alterar as imagens, basta trocar a URL encontrada em:
<img src="URL_DA_IMAGEM" alt="DESCRIÇÃO_DA_IMAGEM"/>
Já o texto de descrição pode ser encontrado dentro da tag <span></span>.
Escolha uma mensagem relevante e clara ao realizar o commit, para que você mesmo (e outros) no futuro saibam exatamente de que se trata.
Esse vídeo dá uma boa explicação sobre a base do Git e como funcionam os commits.
A Alura tem um artigo excelente para você aprender melhor os comandos do Git que são usados no Terminal.
Primeiramente, você irá abrir o seu arquivo "index.html" no Visual Studio Code. Altere algo que vá quebrar o seu código (como o fechamento de uma ‘div’ ou de um ‘h2’) e faça o commit e o Push dessas alterações para a sua master. Pode tentar abrir o "index.html" para ver o erro.
O seu desafio de hoje será reverter esse commit para remover o erro do seu código.
Para o desafio de hoje, é preferível você usar os comandos diretamente no Terminal do Visual Studio Code, assim como no Exercício Opcional de ontem.
Neste vídeo, o Mário Souto (Dev Soutinho) explica como reverter um commit mal feito.
Hoje, você vai simular um conflito.
Para isso, acesse a página do seu repositório no GitHub e abra o arquivo "index.html". Clique no lápis para editá-lo e altere o texto de descrição do terceiro filme da lista. Ao terminar, vá até o final da página, insira uma mensagem e clique em "Commit changes", deixando selecionada a opção "Commit directly to the main branch".
Agora, abra o seu arquivo "index.html" dentro do Visual Studio Code, vá até o mesmo ponto do código e altere o texto de descrição do terceiro filme da lista por um texto diferente do original e também diferente do texto alterado diretamente no GitHub. Salve o arquivo, vá até a aba "Source Control", insira uma mensagem e faça o commit dessas alterações (seja clicando no símbolo de "correto" ou usando o atalho "CTRL+Enter" ou "Command+Enter".
Agora, ainda na aba "Source Control", clique nas reticências (...) e selecione a opção "Pull". Você verá que, ao fazer isso, a IDE irá te informar que houve um conflito de "merge" (mescla).
O seu desafio de hoje será resolver esse conflito e fazer um commit do resultado do seu "merge". Dê preferência para realizar esse desafio usando os comandos diretamente no Terminal do Visual Studio Code.
Uma feature legal é que, ao fazer o "Pull", o próprio Visual Studio Code te mostra onde exatamente está o conflito e te dá algumas opções de solução. Elas são:
- Accept Current Change: você escolhe ficar com a versão aberta no seu Visual Studio Code
- Accept Incoming Change: você escolhe ficar com a versão que está sendo baixada através do "Pull"
- Accept Both Changes: você aceita ambas as alterações
- Compare Changes: o Visual Studio Code abre uma outra tela para você ver as duas versões lado a lado
E você pode simplesmente clicar na opção desejada.
O Mário Souto (Dev Soutinho) tem um vídeo muito legal sobre como lidar com merges.
Ele também tem outro vídeo sobre problemas com sincronização.
Também disponibilizamos gratuitamente as primeiras aulas do curso "Git e Github: estratégias de ramificação, conflitos e pull requests", que podem te ajudar a ter uma visão mais ampla.
Você avançou muito no seu projeto e, para fechar com chave de ouro, uma coisa MUITO legal que você pode fazer é colocar o seu projeto em produção usando o próprio GitHub. É isso mesmo que você leu!
Dessa forma, você irá tornar a sua aplicação disponível de forma pública na internet.
Para fazer isso, você precisará hospedar os arquivos do seu aplicativo em alguma página de hospedagem na nuvem. Um dos jeitos mais fáceis é usar o seu repositório no GitHub e publicá-lo no Github Pages.
Depois de publicá-lo pelo GitHub Pages, para visualizar o seu projeto você irá até a página:
https://SEU_USUARIO.github.io/NOME_DO_SEU_REPOSITORIO
Onde, obviamente, você terá que trocar SEU_USUARIO pelo seu nome de usuário e NOME_DO_SEU_REPOSITORIO pelo nome do repositório em questão.
Aqui você encontra a documentação oficial do Github Pages, que também permite a publicação gratuita.
Se quiser algo mais debulhado, aqui está um vídeo onde o Mário Souto ensina como publicar o seu site no Github Pages.