O Github é um orgulho pra nós, rubistas. É um case real de sucesso em aplicações ruby “comerciais” e um dos exemplos mais bem sucedidos da onda de serviços na “cloud”. Tirando uns (tenebrosos) apagões aqui e ali, a qualidade do site vem aumentando a cada mês. Dentre as novidades recentes, tivemos o prazer de conhecer uma API e o recurso chamado Pages. E é com esse que eu resolvi brincar ontem.

Já faz um tempo que eu quero fazer uma página para a meu projeto Delicious Ext e decidi investigar no site do Github como fazer.

Páginas Pessoais e Páginas de Projeto

Um detalhe que é importante ressaltar é que o Github diferencia as páginas de projeto das páginas de perfil. E assim, eles devem ser construídos de maneiras diferentes.

Página de Usuário no Github

Essas são as mais fáceis de fazer. Basta criar um novo projeto com o nome seu_username.github.com. Após isso, basta fazer um commit de um arquivo index.html que o github automaticamente saberá que se trata de uma página e não de um simples projeto de códigos-fonte.

Muito fácil, né?

Tratei então de criar meu arquivo index.html:

  1.  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.   <head>
  4.     <meta name="Content-Type" content="text/html; charset=UTF-8" />
  5.     <title>Thiago Bueno’s Github Pages</title>
  6.         <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
  7.    
  8.   </head>
  9.   <body>
  10.     <a href="http://github.com/tbueno"><img id="forkme" src="forkme_left_grey.png" alt="Fork me on GitHub" /></a>
  11.     <div id="container">
  12.       <h1>Hello</h1>
  13.       <h1><strong>I’m Thiago Bueno</strong></h1>
  14.       <h2>and these are my</h2>
  15.      
  16.           <h2>open source projects:</h2>
  17.           <br/>
  18.           <p><a href="http://github.com/tbueno/blue-eyes/tree">Delicious Ext</a> – A extension to Delicious API | <a href="http://github.com/tbueno/blue-eyes/tree">Blue Eyes</a> – A RSS Reader made with Sinatra |
  19.                 <a href="http://github.com/tbueno/egotrip/tree">Egotrip</a> – A Social profile page made with Sinatra | <a href="http://github.com/tbueno/sherlock/tree">Sherlock</a> – A website inspector.
  20.           </p>
  21.     <div id="footer">
  22.         <a href="http://github.com/tbueno">projects</a> | <a href="http://twitter.com/rubyvault">twitter</a> | <a href="http://tbueno.com/blog">blog (portuguese)</a>
  23.     </div>
  24.    
  25.     </div>
  26.    
  27.   </body>
  28. </html>
  29.  

Um detalhe curioso é que eu adicionei a etiqueta “Fork me on Github”, inspirado na página do pessoal responsável pelo desenvolvimento do Github, afinal, todas as páginas possuem o código aberto para nossa inspiração. ;)

Para transformar todo esse HTML em algo agradável aos olhos, eu fiz o commit de um estilo, no arquivo style.css:

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
	background-color: #fff;
	overflow: auto;
	font-size: 16px;
	width:750px;
	margin:0 auto;
	margin-top:30px;}
h1 {
	font-weight: normal;
	margin-bottom: 30px;
	color: #222;
	font-size: 50px;
}
a {
	text-decoration: none;
	color: #777;
}
a:hover { color: #444; }
img#forkme {
	position: absolute;
 	top: 0;
 	left: 0;
 	border: 0;
 }
#container {
	width: 500pt;
	text-align: center;
	margin-top: 100px;
}
#footer {margin-top: 100px;}

Pronto! E o resultado encontra-se no endereço http://tbueno.github.com e no screenshot abaixo:

tbueno-github

Nos próximos posts, descreverei como fazer uma página para um projeto no Github!