Git: GitHub, GitHub Pages, GitHub Desktop e Atom

Publicado a 19/02/2018, 01:44 por Luis Pitta -org-   [ atualizado a ]


GitHub


Criar e gerir um novo repositório no GitHub:

0. Caso ainda não tenha uma conta no GitHub, deve começar por criar uma em https://github.com/join

1. Entrar no GitHub em https://github.com identificando-se com o seu login e password.

2. Vamos criar um novo Repositório

Procedimento:

a. Clicar em + (canto superior direito) e escolha New Repository
b. Escolha um nome sugestivo e curto (sem maiúsculas, nem espaços)
c. Preencha a Descrição apasar de ser opcional (é uma boa prática)
d. Colocar o visto na opção "Initialize this repository with a README"
e. Clique em "Create repository"

3. Para permitir a publicação vamos ativar o GitHub Pages

Procedimento:

Devemos ir a Settings (mais acima do lado direito) descer até à área "GitHub Pages" e em Source ativar o Master Branch. 
Clicar em Save.

Exemplo para o repositório hello-world: Deve surgir a mensagem: Your site is ready to be published at https://lpitta.github.io/hello-world/.

4. Para carregar os nossos ficheiros HTML, CSS e JS devemos ir a Code (mais acima do lado esquerdo) e  clicar no botão "Upload files" (mais abaixo do lado direito)

Quando os projectos ficarem mais complexos (com dezenas ou centenas de ficheiros) devemos
instalar o GitHub Desktop que nos permite sincronizar automaticamente com o Github.


5. Para testar o resultado do nosso código (HTML, CSS e Javascript)

Devemos esperar cerca de 10 a 20 segundos para que o upload seja validado pelo GitHub e enviado para o GitHub Pages

A seguir basta clicar no URL fornecido pelo GitHub Pages no passo 3:

Exemplo para o repositório hello-world https://lpitta.github.io/hello-world/ e verificar o resultado.






GitHub Pages


O GitHub Pages é um serviço gratuito que permite alojar as nossas páginas web estáticas a partir do repositório GitHub.

Cada conta GitHub recebe um site que pode armazenar um numero ilimitado de projetos.
O URL inicial tem a seguinte sintaxe: https://username.github.io

Configurar o URL inicial?

Para configurar o URL inicial devemos:

1. Criar um repositório com o nome especial username.github.io (trocar username pelo seu username!)
2. Criar ou carregar o ficheiro index.html (que até pode estar vazio)
3. Criar o ficheiro readme.md (que até pode estar vazio)
4. Agora o URL inicial já deve funcionar. Ver exemplo: https://lpitta.github.io

Mais informação em https://pages.github.com

Exemplo do URL inicial
URL inicial do user LPitta: https://lpitta.github.io
Acesso à página GitHub do utilizador LPitta (Público): https://github.com/lpitta


Utilizando o FreeNom (SLD* gratuito)

Foi criado no FreeNom o seguinte SLD: lpitta.ga
O domínio lpitta.ga deve apontar para o URL inicial do user, ou seja para 
https://lpitta.github.io

*SLD: Second Level Domain.

Exemplo para o repositório "Hello-World" do user LPitta
Acesso ao output do repositório "Hello-World": https://lpitta.github.io/hello-world/
Acesso à página do repositório "Hello-World": https://github.com/lpitta/hello-world





Github Desktop e Git scm


Github Desktop

GitHub Desktop permite fazer o controlo de versões a partir do computador pessoal em ambiente gráfico.

Procedimento de instalação:
Aceder a https://desktop.github.comdescarregar e instalar o Github Desktop.
(Nota: só funciona em SOs de 64bit)


Git scm

O Git scm permite fazermos o controlo de versões a partir do computador pessoal com um interface de linha de comando.

Procedimento de instalação:

Qualquer uma das aplicações fazem a sincronização automática e bidireccional entre o computador local e o repositório remoto GitHub.


Atom
Porquê o editor Atom?


O editor Atom é bastante poderoso, gratuito e tem integração total com o Github.
Por esta razão, se estivermos a trabalhar com o Github, é o nosso favorito.

Procedimento de instalação:
Aceder a https://atom.iodescarregar e instalar.

A integração com o Github já vem pré configurada, só precisamos de fazer login (via token).


Procedimento para começar um novo projeto no Atom e enviá-lo (push) para o Github:

No computador local:

Criar uma pasta vazia para o projeto, com o nome "Projeto1" (por exemplo)

No Atom:

a. Escolher File > Add Project Folder > selecionar a pasta "Projeto1"
b. Adicionar ficheiros ao projeto a partir de File > New File
c. Guardar os ficheiros clicando em CTRL+S (File > Save)

Instalar o package Git Plus em File > Settings > + Install (caso ainda não esteja instalado)

No Github:

Criar o repositório com o nome pretendido (pode ser o mesmo da pasta criada inicialmente: "Projeto1")
Não alterar nenhuma opção e clicar em "Create Repository" (botão verde)

Executar as seguintes 2 linhas de comando, a partir do Atom no package Git Plus (atalho para abrir o Git Plus: CTRL+SHIFT+P)

…or push an existing repository from the command line

git remote add origin https://github.com/username/nome_projeto.git
git push -u origin master

No Atom:

Carregar em CTRL+SHIFT+P para abrir a consola Git Plus
Escrever: git plus: init (para inicializar o repositório localmente)
Escrever: git plus: run (para abrir a consola de comandos e argumentos do git)
Escrever: remote add origin https://github.com/username/nome_projeto.git
(não digitar o git inicial e trocar username e nome_projeto pelo seu username e pelo nome do projeto atual, neste caso Projeto1)
Escrever: push -u origin master

Quando pretendermos enviar de novo (push) para o Github devemos aceder a:

Packages > Git Plus  e escolher "Add All + Commit + Push"
Como temos, sempre, de escrever um comentário surge o ficheiro COMMIT_EDITMSG onde devemos
escrever uma mensagem e 
clicar em CTRL+S para guardar.

Todos os ficheiros editados e salvos localmente vão ser Commit e Push para o Github :)