Hoje iremos enfim tornar nosso projeto um projeto no GitHub e um site acessível para quem quiser poder relaxar usando nosso app rs
É o último tópico desse nosso primeiro projeto. Ao final dele, vocês terão o app de vocês hospedado na web e poderão mostrar para quem vocês quiserem o primeiro projeto feito por vocês nessa quarentena. O resultado do meu está neste link:
Exercício para respiraçãoPrimeiramente, vamos criar uma conta no GitHub. Acessem
The world’s leading software development platform · GitHubEsta tela irá aparecer para vocês:
Cliquem em Sign up para realizar o cadastro de vocês. A tela abaixo irá ser visualizada:
Criem um nome de usuário, adicionem seu email e criem uma senha. Após isso, confirmem a criação da conta.
Logando no GitHub, uma tela parecida com esta irá aparecer para vocês:
Agora iremos criar um novo repositório, que é onde iremos hospedar nosso projeto. Cliquem em New, onde o círculo vermelho acima está sinalizando, para criar um novo repositório.
A tela abaixo irá aparecer:
Criem um nome para o repositório de vocês. Adicionem uma descrição se quiserem. Você pode selecionar se o repositório vai ser público ou privado, mas se for privado ninguém vai poder acessar o site de vocês, então marquem "Public".
Adicionem um README se quiserem, que basicamente é um documento em formato markdown que mostra alguma descrição do projeto, como usar, etc. Poderemos ver um pouco de markdown em posts mais pra frente.
Confirmem a criação do repositório em Create repository. Esta tela irá aparecer:
Agora precisaremos do git, que é a ferramenta que irá nos ajudar a subir nossos arquivos em nosso repositório, a controlar nossas versões de aplicativos, etc.
Prossigam para
Git - Downloads e instalem o git. Se estiverem em ambiente Windows baixa baixar e instalar seguindo o velho next > next > next > next sem precisar mexer muito nas configurações padrão.
Dando tudo certo, abra a pasta onde está seu projeto e abra um terminal ali.
No Windows, para abrir o terminal na pasta que você quer, pressione shift + segundo botão do mouse e clique em "Abrir janela do PowerShell aqui" ou "Abrir prompt de comando aqui".
Em Linux acho que mexer com terminal não deve ser muito problema pra maioria então caso fique alguma dúvida nessa parte perguntem nos comentários.
Para conferir se deu tudo certo com a instalação do git, no terminal digite:
git --version
Se o git foi instalado corretamente, você verá a versão do git instalada:
git version 2.26.0
Agora vamos fazer o necessário para subir nossos arquivos.
Primeiramente, você já tem um repositório remoto que é o que você criou no GitHub, mas vai precisar de um repositório local na sua máquina, na pasta do seu projeto. Vamos transformar nossa pasta em um repositório local:
git init
Você verá um retorno assim:
Initialized empty Git repository in /run/media/thiago/Backup HDD/Programming/Bastter programação/QuarantineDaysOfCode/D1/.git/
Agora precisamos linkar esse nosso repositório local ao nosso repositório remoto. No GitHub, pegue o link do seu repositório remoto git aqui:
Copie esse link e digite no terminal:
git remote add origin <link>
No meu caso:
git remote add origin The world’s leading software development platform · GitHubThiagoDiasV/relax-app.git
Confirme.
Agora, adicione tudo que você tem nessa pasta para "commitar" (não vou detalhar o que é um commit agora, foge do escopo do post) seus arquivos para seu repositório remoto (o do GitHub).
git add *
Agora faça o commit dessa sua adição, que é indicar para o git as suas alterações feitas até o momento, que no caso foi adicionar tudo para ser enviado para o repositório remoto.
No commit, adicione um comentário:
git commit -m "adicionando os arquivos do app de relaxamento"
Se tudo der certo você visualizará o seguinte:
4 files changed, 156 insertions(+)
create mode 100644 img/bg5.jpg
create mode 100644 index.html
create mode 100644 main.js
create mode 100644 style.css
Agora você precisa, antes de enviar para o GitHub, criar uma branch chamada gh-pages, a fim de que seu app esteja visível online em formato de site para quem quiser ver.
Um branch em git é uma divisão do seu projeto. Por exemplo, se você está desenvolvendo um app e vai criar uma nova funcionalidade, para preservar a segurança da sua primeira versão funcional, você não cria as alterações em cima dessa primeira versão, mas cria uma branch que irá receber as alterações e após terminar tudo, você junta as alterações da sua branch secundária à sua branch principal. Isso evita erros de controle de versão.
Para seu site ficar visível na web usando o GitHub, seu projeto deve ter uma branch chamada gh-pages. Vamos criá-la:
git checkout -b gh-pages
Agora você pode enviar tudo para seu repositório remoto (o do GitHub):
git push -u origin gh-pages
Será solicitado seu login e senha do GitHub. Informe esses dados e confirme.
Dando tudo certo, volte para o repositório do GitHub e clique aqui:
Selecione a branch gh-pages. Você verá seus dados que estavam no repositório local no repositório remoto.
Clique em "1 environment" para ver o deploy da aplicação, e nesta janela clique em "View deployment":
E voilá, seu app de relaxamento está disponível online agora para quem quiser ver. No caso do meu repositório, ele se encontra neste link:
Exercício para respiraçãoQuem quiser ver o código do projeto todo, ele está aqui:
GitHub - ThiagoDiasV/relax-app at gh-pagesCom alguns comandos no terminal conseguimos fazer nosso primeiro deploy de um site estático. Esse passo a passo pode ser seguido para publicar qualquer site estático que você quiser. Inclusive recentemente fechei meu segundo job freelancer e foi um site estático que está hospedado no GitHub pages.
Se mais alguém tiver seguido a trilha desse nosso primeiro projeto de quarentena, posta o link nos comentários do seu site na web. Vamos usar essa quarentena para nos desenvolver, pessoal.
