Sobre o GitHub

Criar e gerir um repositório no GitHub:

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

1. Entra no GitHub em https://github.com identifica-te com o teu login e password.

2. Começa por criar um novo Repositório (cada projeto deve ser criado no seu próprio 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 apesar de ser opcional (é uma boa prática preenchê-la)

d. Colocar o visto na opção "Initialize this repository with:" Add a README file" (opcional se estivermos a importar um repositório existente)

e. Clique em "Create repository"

3. Para visualizarmos o website do repositório temos de ativar o GitHub Pages em cada um deles

Procedimento:

1. Acede ao repositório que pretendes obter o link do Github Pages (.io)

2. Abre a opção Settings (em cima ao centro mais para o lado direito);

3. No menu vertical do lado esquerdo, em "Code and automation", clica em "Pages"

4. Em Source escolher "Branch: Master" e clicar em "Save"

5. O repositório fica publicado no seguinte URL: https://username.github.io/nome_do_repositorio/

Exemplo do repositório hello-world na conta lpitta:

Na secção Pages podemos ler na caixa de fundo verde claro: "Your site is published at https://lpitta.github.io/hello-world/

4. Para carregar os ficheiros HTML, CSS e JS devemos ir a Code (em cima do lado esquerdo) e clicar no botão "Add file > Upload files" (em cima do lado direito)

Devemos agora utilizar a técnica do Drag and Drop ou clicar em "choose your files" para selecionar os ficheiros locais que pretendemos enviar para o Github.

No final devemos clicar em "Commit changes" (ao main branch)

Nota: Quando os projetos começam a ficar mais complexos (com dezenas ou centenas de ficheiros) devemos instalar o GitHub Desktop que nos permite sincronizar automaticamente as nossas atualizações (locais) com o Github (remoto).

5. Testar o resultado do código (HTML, CSS e JavaScript) que enviámos para o Github

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: ver passo 3.

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

Nota: O ficheiro inicial (aquele que vai ser aberto em 1º lugar) do nosso website deve ter sempre o nome index.html. Só assim é que ele será ser aberto automaticamente sempre que acedermos a esse site.

Sobre o 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, onde username é o seu nome de utilizador

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 (Deve conter os links para cada um dos projetos desenvolvidos)

3. Criar o ficheiro readme.md (nesta fase 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)

Março 2022: Deixou de funcionar >>> 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

Ajuda sobre o GitHub pages:

2020: guides.github.com/features/pages/

2017: programmingliftoff.com/create-your-first-website-on-github-pages/

Sobre o GitHub Desktop e Git scm

Github Desktop

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

Procedimento de instalação:

Acede a https://desktop.github.com, descarrega e instala 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:

Aceda à página de apoio: sites.aebenfica.org/apontamentos-tic/programacao/github

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

Atom: Porquê o editor Atom?

O editor Atom é um editor bastante poderoso, gratuito e tem integração total com o Github.

Por esta razão, se estivermos a trabalhar com o Github poderá ser o nosso editor favorito.

Procedimento de instalação:

Aceder a https://atom.io, descarregar 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 sincronizá-lo (push) com 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 :)