Segredos do Github - Hospedando seu site no Github

Mas eu já sei que eu posso usar o Github para versionar meu site. O que tem de segredo nisso?

Eu disse hospedar! Isso mesmo! Seu site pode ficar hospedado no Github, for free, e ser executado diretamente de lá, sem a necessidade de um servidor! Não sabe como fazer? Vem que eu te mostro então ;)

Uma ponto importante que eu preciso frizar antes de começar: o Github só aceita arquivos estáticos. Não adianta querer usar o Github para hospedar um site em PHP que não vai funcionar, blz? ;)

Ele só vai servir os arquivos estáticos gerados - HTML, CSS e JS, imagens, fontes, etc.

Para se aproveitar dessa feature, você pode cair em duas situações:

1) Tenho um site pessoal que quero hospedar no Github
2) Tenho um projeto Open Source, em um repositório dentro da minha conta, e quero criar um site para ele.

Site Pessoal

Para o seu site pessoal, você deve fazer o seguinte:

  • crie um novo repositório na sua conta, com o seguinte padrão:
1
username.github.io

Obviamente, trocando username pelo seu nome de usuário no Github. No meu caso, ficou fdaciuk.github.io. O repositório é esse: https://github.com/fdaciuk/fdaciuk.github.io/

Fazendo isso, você pode subir seus arquivos estáticos para a branch master normalmente, e acessá-los pelo endereço:

1
https://username.github.io

De novo: trocando o username pelo seu nome de usuário!

Site para projeto open source

Se você já tem um projeto open source no Github, e quer criar um site para ele, você precisa fazer o seguinte:

  • crie uma branch orfã - em branco - chamada gh-pages.
  • suba os arquivos para essa branch.

Para criar uma nova branch em branco, use o seguinte comando:

1
git checkout --orphan gh-pages

Só lembre de NUNCA fazer merge dessa branch na master. Os arquivos das duas branches serão completamente diferentes! Na master, ficarão os arquivos do seu projeto. Na gh-pages, somente os estáticos do site do projeto.

Você conseguirá acessar pelo seguinte endereço:

1
https://username.github.io/repositoryname

Não precisa falar do username de novo, né? :P

E troque o repositoryname pelo nome do seu repositório.

Para facilitar, veja como fica o acesso ao site do Odin:

1
https://wpbrasil.github.io/odin

Onde temos a conta da organização wpbrasil e o repositório cadastrado como odin. Fácil, não?

Usando um domínio personalizado

Para usar um domínio personalizado, você só precisa criar um arquivo chamado CNAME, - na branch onde estão os estáticos do seus site - e o conteúdo dele deve ser o seu domínio.

O CNAME do meu blog está com o conteúdo assim:

1
blog.da2k.com.br

Não precisa do http(s).

Depois você só precisa configurar para que o seu domínio aponte para os DNS do Github. Para fazer isso, siga esse tutorial: https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages/

Você pode usar tanto um domínio principal, como um subdomínio :)

Geradores de estáticos

E já respondendo à pergunta: Não! Você não precisa criar todos os seus arquivos HTML manualmente!

Existem milhares de ferramentas que geram estáticos, onde você escreve em uma linguagem específica - NodeJS, Ruby, etc - e o framework gera toda a estrutura dos estáticos para você. Aqui no blog, eu estou usando o Hexo. Inclusive, fiz um post, mostrando como é simples usá-lo para começar um blog :D

O Hexo tem um plugin que gera um sitemap.xml e um atom.xml, onde fica o feed.

Eu posso criar templates para as páginas, usando EJS, Jade ou Markdown, posso usar Stylus para pré-processar o CSS, me aproveitar de partials para não ficar repetindo código, etc. No final, tudo é compilado para HTML, CSS e JS.

E para escrever os posts, posso utilizar Markdown <3

Ele gera também uma estrutura de URLs amigáveis, que você pode escolher. Ou seja, é perfeito para SEO :)

Se quiser outras opções de geradores de estáticos, veja esses links:

Have fun :)

Jekyll

Um outro detalhe importante, é que o Github consegue compilar seus estáticos sozinho, se você estiver usando o Jekyll. O Willian Justen já mostrou porque é interessante usar o Jekyll com o Github, nesse ótimo post! E nesse outro ele tira algumas dúvidas sobre a ferramenta. Vale muito a leitura!

That’s all folks! Até a próxima :D

Sobre o #1postperday: https://blog.da2k.com.br/2014/12/31/um-post-por-dia/

Tem alguma sugestão para os próximos posts do #1postperday? Deixe ela aqui: https://github.com/fdaciuk/fdaciuk.github.io/issues/1