GitHub

Para saber o que é o GitHub e quais são as melhores formas de aproveitá-lo, por favor leia o artigo O que é o GitHub - e porque utilizá-lo, em que cobrimos os seguintes tópicos:

1. O que é GitHub: Como funciona / Privacidade / Cotas
2. Hospedagem gratuita de websites com o GitHub: Como funciona / Limitações / Extensões / Privacidade
3. Primeiros Passos: Criando uma conta / Criando um repositório / Adicionando arquivos / Acesso público

No presente artigo explicaremos como hospedar gratuitamente seu website com o GitHub, incluindo um passo-a-passo e tutoriais em vídeo que facilitarão o processo.

Como utilizar o GitHub para hospedar seu website

Condições

Para publicar seu website com o GitHub, você precisa estar ciente das seguintes condições:

1. Primeiro: seu código-fonte será público, ou seja, qualquer pessoa conectada à internet poderá acessá-lo.
2. Segundo: o GitHub suporta apenas websites estáticos construídos em linguagem de web browsers (navegadores) e não em linguagem de servidor. Portanto, o seu website deverá ser publicado em html, css e js. Arquivos em php não são permitidos pelo GitHub para hospedagem, e nem o uso de base de dados - em MySQL por exemplo.
3. Terceiro: Você poderá utilizar os subdomínios so GitHub (sempre nome-do-usuario.github.io) ou seu próprio domínio (suaempresa.com).

Todo o processo de hospedagem oferecido pelo GitHub acontece via GitHub Pages, que será explicado em seguida.

Entendendo o GitHub Pages

O GitHub Pages é a ferramenta do GitHub utilizada para hospedar websites. Você poderá ter dois tipos de websites:

1. Website do Usuário ou Organização
2. Website de Projetos

Ambos hospedam os websites com as mesmas condições e características expostas no tópico anterior, mas eles diferem no método que você utilizará para colocá-los no ar.

Website do Usuário ou Organização

Estes websites são construídos nos branches master de um repositório que tenha exatamente este nome: nome-do-usuario.github.io, onde nome-do-usuario, é claro, é o seu nome de usuário. Nem uma letra nem símbolo poderá ser alterada, de outra forma não funcionará.

Ao criar um repositório com este nome, ele estará automaticamente programado para ser utilizado para hospedar um website, que será acessado através da URL http://nome-do-usuario.github.io. Ou seja, basta inserir o conteúdo do seu website neste repositório que, quando esta URL for acessada, você verá seu website no ar.

De fato, não há difença nenhuma entre websites de usuários e de organizações. A única coisa que difere é o tipo de conta que você tem no GitHub: contas pessoais (“usuário”) e contas empresariais (“organização”). As contas têm inúmeras diferenças entre si, mas os websites são criados exatamente da mesma forma, a partir do mesmo método descrito acima. Para mais detalhes sobre estas contas, veja nosso artigo anterior “O que é o GitHub - e porque utilizá-lo”.

Website de Projetos

Websites de projetos estão sujeitos às mesmas três condições descritas acima, e têm o desempenho idêntico aos websites de usuários ou organizações. O que é diferente é o método para colocá-los no ar:

1. Você poderá dar o nome que quiser ao repositório.
2. Você não poderá utilizar um branch master - deverá criar um branch chamado gh-pages, que será a raiz do seu website, para onde você fará o upload do conteúdo (index.html, arquivos e pastas).
3. Por padrão, seu website será acessado via http://nome-do-usuario.github.io/nome-do-repositorio, e não mais apenas http://nome-do-usuario.github.io como nos websites de usuário/organização. Mas você poderá também utilizar seu próprio domínio como endereço do website do seu projeto.

Vantagens

O maior ganho que temos é a possibilidade de utilizar uma conta do GitHub apenas para hospedar múltiplos websites. Isso mesmo, podemos criar quantos websites quisermos, pois o GitHub não impõe limite de cotas de utilização, conforme explicado detalhadamente no artigo anterior O que é o GitHub - e porque utilizá-lo. Mas atenção! Você poderá publicar apenas UM website de usuário, mas poderá criar quantos websites de projetos precisar.

Então caso você precise de um website para sua empresa, com o domínio suaempresa.com e precise de um outro website para você mesmo, com um segundo domínio voce.com, é possível fazer isso com apenas uma conta do GitHub e sem gastar um centavo em hospedagem! Basta alocar cada um deles em um repositório diferente e pronto!

Domínios próprios

Você poderá utilizar seu próprio domínio que o GitHub fará o redirecionamento automático, tanto em websites de usuários/empresas quanto em websites de projetos. Mas este é um passo posterior que não será coberto pelo presente artigo. Mais tarde publicaremos um artigo explicando este processo, quando o fizermos vamos inserir o link aqui para você. De qualquer forma, você poderá acessar às informações diretamente no GitHub Help Guide.

Links entre websites

Os seus websites poderão estar “linkados” entre si, mas somente se você quiser que estejam. Para tal, basta inserir o link onde você desejar, seja em tags no conteúdo, seja em tags no menu. Basta copiar a URL e colar como valor para o parâmetro href do seu link.

Exemplos Práticos

Se não ficou muito claro, vamos exemplificar com os websites de Virtua Creative:

Temos nosso website do usuário:

Nosso usuário do GitHub, @virtuacreative, tem como website de usuário a seguinte URL: http://virtuacreative.github.io, que “mora” no repositório especialmente nomeado como virtuacreative.github.io.

Temos dois websites de projetos:

1. Virtua Creative Blog, acessado via http://virtuacreative.github.io/blog, que “mora” no repositório chamado blog;
2. Virtua Creative & GitHub, acessado via http://virtuacreative.github.io/git, que mora no repositório chamado git.

As estruturas dos websites não precisam ser as mesmas, e no exemplo dado, de fato não são!

Integração com Redes Sociais e outros serviços

Como a maior parte das empresas que fornecem serviços variados para serem integrados aos websites de terceiros normalmente fornecem um bloco de código pronto e escrito em javascript para inserirmos no <body> ou na <head> dos nossos arquivos, não há a menor dificuldade em utilizá-los. Proceda normalmente sua integração com o Google Analytics, Facebook, Twitter, Gravatar, etc.

Como criar seu Website de Usuário/Organização no GitHub

O vídeo a seguir mostra como fazer o processo inteiro. Caso prefira, logo abaixo descreveremos o passo-a-passo do processo.

Passo-a-Passo

1. Vá até o GitHub e faça login na sua conta.
2. Crie um repositório de nome nome-do-usuario.github.io (note que, neste momento, você poderá tender a digitar apenas .github.io, uma vez que seu nome de usuário já aparece na tela. Não faça isso! Repita o nome do usuário, escrevendo exatamente como descrevemos.)
3. Defina-o como Repositório Público, de outra forma não poderá ser usado para hospedar nenhum website.
4. Defina as demais opções para seu repositório (criar automaticamente um README.md, adicionar um gitigonore e licensas para seu conteúdo). Nada disso precisa ser feito, fica a seu critério como utilizar as opções adicionais.
5. Depois de criado, o GitHub automaticamente redirecionará para a página do repositório. Nesta página, clique em Settings (barra lateral direita), que é a parte que define as configurações do repositório.
6. Se deu tudo certo até aqui, você verá o seguinte alerta: “Your site is published at http:// username.github.io”, mostrando o endereço de acesso do seu website de usuário/orgazinação.
   • 6.1. Neste momento, você poderá executar o comando “Launch automatic page generator”, que gerará uma Home Page para você. Ao clicar nesta opção, o GitHub o redirecionará para uma nova página, onde você poderá escolher um tema do GitHub e editar o conteúdo da sua Home Page. Ao clicar em “Publicar”, seu website estará no ar. Mas digamos que você queira continuar o processo sem utilizar um dos templates do GitHub, e vamos aos próximos itens.
7. Ignorando o sub-item 6.1., vamos voltar ao seu repositório e criar sua Home Page. Clique sobre o nome do repositório.
8. Clique no sinal de + para adicionar um arquivo. Escreva na caixa de texto index.html. Escreva o conteúdo na área de texto ou copie e cole de um arquivo que você já tenha pronto.
   • 8.1. Se você ainda não tem nada para colocar no arquivo, mas deseja testar o processo, copie e cole o código abaixo na área de texto fornecida pelo GitHub. Depois você poderá voltar e editar o conteúdo como quiser.
9. Clique em Commit New File para salvá-lo. Pronto! Seu website já estará no ar!

Bloco de código para o item 8.1.:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Meu novo website</title>
</head>
<body>
	<div>
		<h1>Olá Mundo!</h1>
	</div>
</body>
</html>

  Clique para copiar o código

Passos Seguintes

Criar pasta para seus arquivos CSS

Você poderá utiliza a tag <style>...</style> na <head> dos seus arquivos html, mas provavelmente irá preferir criar arquivos separados para seus estilos CSS. Para fazer isso, por favor siga o passo-a-passo explicado no artigo anterior a este. No vídeo postado acima também incluímos este processo.

Criar pasta para imagens no GitHub

Para criar uma pasta e adicionar imagens a ela para que você possa inserí-las no seu website hospedado no GitHub, não é possível fazer via plataforma web. Será necessário ou fazer o processo via linha de comando ou via GitHub Desktop. É um aplicativo gratuito que permite que você gerencie seus repositórios diretamente do seu computador, seja ele Windows, MAC ou Linux. Basta acessar o link e fazer o download, instalá-lo e fazer o login com sua conta do GitHub. Veja o tutorial de como adicionar uma pasta para suas imagens no vídeo abaixo ou siga o passo-a-passo seguinte, como preferir.

Passo-a-Passo

1. Faça o download e instale o GitHub Desktop e faça login na sua conta.
2. Clone seu repositório criado para websites e escolha uma pasta para alocar seus arquivos.
3. Vá até o diretório clonado e crie uma nova pasta. Digamos que sua pasta chame-se img
4. Adicione a esta pasta quantas imagens quiser. Digamos que uma das imagens chame-se “imagem.png”
5. Volte ao GitHub Desktop - você notará que ele detectou as alterações feitas na pasta clonada.
6. Adicione uma descrição e clique em “Commit changes” para que o GitHub processe as alterações.
7. Clique em “Sync” para fazer o upload para o GitHub.
8. Volte na plataforma web do GitHub e veja as alterações.
9. Abra uma nova aba no seu navegador e entre entre no seu website em http://nome-do-usuario.github.io.
10. Acrescente o endereço da imagem: http://nome-do-usuario.github.io/img/imagem.png e aperte “enter” no seu teclado.
11. Certifique-se de que o endereço digitado está certo. Se estiver, a imagem abrirá conforme o esperado.
12. Copie o endereço completo da imagem http://nome-do-usuario.github.io/img/imagem.png
13. Volte ao GitHub e edite seu arquivo html. Insira nele o link para a imagem e estilize conforme desejar.
14. Salve seu aquivo fazendo um “Commit changes” e pronto! Lá estará sua imagem carregada no seu website!
15. Repita os passos 9 a 12 para copiar novos links para suas imagens e inserí-las nos seus arquivos html conforme desejar.

Caso precise, aqui está um exemplo de tag de imagem para ser inserida no <body> do seu arquivo html:

<img src="http://nome-do-usuario.github.io/img/imagem.png" alt="Exemplo de Imagem">

  Clique para copiar o código

Como criar websites de projetos no GitHub

Caso você precise criar um website de projeto, conforme explicamos acima, por favor pedimos que volte mais tarde, pois estamos preparando um tutorial em vídeo para este passo. Já temos um novo tutorial em Inglês. Quando o mesmo estiver pronto em Português, incluiremos o link aqui. Adicione nosso Blog ao seu feed, siga-nos no Twitter e/ou inscreva-se no nosso Canal do YouTube para receber em primeira mão!

Isso é tudo, pessoal!

Esperamos ter sido úteis! Por favor, contribua para o assunto deixando seu comentário abaixo! Se você gostou do artigo, deixe-nos saber disso, pois nos estimulará a continuar escrevendo!

Se você tiver dúvidas ou sugestões, comente ou acesse nosso formulário de contato.

Obrigada e até o próximo artigo!

Artigos relacionados

• 📌 O que é GitHub - e porque utilizá-lo
• 📌 O que é Jekyll - e para que ele serve
• 📌 Criando blogs com Jekyll no Windows
• 📌 Jekyll e GitHub Markdown

Referências

• ☆ GitHub
• ☆ GitHub Desktop
• ☆ GitHub Pages
• ☆ User, Organization and Project Pages

Último update deste artigo: 30/03/2016 às 20:59h.