GitHub Pages: Crie uma página de apresentação para seu projeto!

em Artigos, Desenvolvimento, Git.

Você que conhece e utiliza o GitHub, certamente já escreveu um README com pelo menos uma breve descrição sobre o seu projeto. Pois bem, mas será que você já pensou em ter uma página web que descrevesse o que seu projeto faz ao invés de um simples README? Tem preguiça de fazer? Não manja de HTML e CSS? Acha que não compensa o trabalho e os gastos sendo que você já consegue apresentar o seu trabalho no próprio repositório mesmo que de uma maneira simples?

Bom, hoje é seu dia de sorte! Você sabia que é possível gerar uma página de apresentação do seu projeto automaticamente diretamente do seu repositório (mais conhecido como repo)  na sua conta do GitHub? E o melhor, já existem alguns templates prontos que você pode utilizar e não ter que escrever uma linha sequer de HTML e CSS! Ótimo, não é? Então vamos logo aprender como fazer, é mais simples do que você imagina.

Eu vou utilizar aqui um repositório da minha própria conta do GitHub de uma aplicativo Android que eu estou desenvolvendo apenas para fins de estudo. O nome dele é myIMDB. Como você pode ver, eu já escrevi um README para ele é claro!

imagem1

Bom, é bem simples e explica o propósito desse projeto. Eu provavelmente não faria uma página web que o descrevesse se eu tivesse que criar todo o HTML, CSS e ainda tivesse que tratar de conseguir um servidor web para hospedá-la. Mas como eu disse, hoje é o nosso dia de sorte e podemos utilizar o GitHub Pages. É só seguir estes passos que eu vou lhe apresentar.

Primeiro, estando na raiz do seu repositório clique em Settings

imagem2

Feito isso você será redirecionado para a página de configurações do seu repo. Role um pouco a página até que você veja a opção.

GitHub Pages. Quando encontrar clique em ‘Launch automatic page generator’.

imagem3

Ao clicar, você será redirecionado já para a área de edição da sua página:

imagem4

Eu alterei um pouco o texto para não ficar com o padrão que é gerado. Aqui vou alterar só o texto e deixar os menus e links que a página gerar do jeito que estão. Após fazer todas as alterações que você achar necessária, clique em ‘Continue to layouts’.

imagem 5

Agora vem a parte legal: podemos escolher um template dentre os vários disponíveis pelo GitHub. Existe também a possibilidade de você customizar a página totalmente e criar o seu próprio template via repo. Eu não vou ensinar aqui (quem sabe numa próxima), mas fica a dica!

Você pode ver que quando clica em algum template ele mostra um preview de como sua página ficará. Depois de escolher um template você só precisará clicar em ‘Publish page’.

imagem6

Pronto, agora você tem uma página web de apresentação do seu projeto. Como você pode ver, quando você publicar a página, voltará para o seu repositório, e o GitHub te informará qual o endereço web que foi gerado.

imagem7

No meu caso é: http://phsilbr.github.io/MyIMDb vamos testar?

imagem8

E está ai, a página do meu projeto totalmente online e gratuita!

Gostaram? Espero que lhes sejam útil em algum momento! Sintam-se livres para compartilhar esse post com todos os seus amigos e deem um level up no REAME de vocês!

Um abraço e até mais!