Correr GitHub Pages en localhost

Hay diversas plataformas que están especializadas en páginas web estáticas tales como Now, Surge y GitHub Pages (hay muchas más claro). Después de haberlas probado, puedo recomendar que si lo que queremos es una página de portafolio GitHub Pages es la mejor opción. Por las siguientes razones:

• Tenemos subdominio con su certificado SSL gratis.
• Nuestro repositorio y página web estarán en el mismo lugar.
• Estará disponible las 24 horas todos los días sin cobrarte.
• No habrá ningún tipo de espera entre solicitudes prolongadas.
• Dispone de templates llamativos.
• Podemos usar la misma sintaxis de Markdown para crear páginas web (el mismo que usamos al crear los README en GitHub)
• En caso de un deploy que rompa todo, GitHub Pages no lo mostrará en tu página sino en el último commit en que funcionaba todo perfectamente. En caso de algún error, en el apartado de Settings te aporta algo de información.

GitHub Pages

Una de las buenas prácticas de DevOps es que el entorno de producción (donde está nuestra aplicación en internet) debe ser la misma que la del desarrollo.

De seguro pensarás que diseñar páginas web estáticas con HTML, CSS y Javascript no amerita crear un entorno de producción emulado. Y tienes toda la razón 😄

Esto tiene más sentido cuando usamos uno de los themes que nos brinda GitHub Pages al momento de crear la página web pero estos templates están escritos usando Markdown, ¿la ventaja? Pues solo debes preocuparte por escribir en el Markdown como si estuvieras escribiendo en cualquier README.md para tener tu página web. ¿La desventaja? El navegador no te correrá el index.md, lo abrirá pero no cargará el sitio.

Debo aclararte que esto no es una escapatoria a no estudiar HTML y CSS, porque si quieres darle un par de toques personales debes conocer las bases. El curso de Desarrollo web online puede ayudarte mucho en esta parte.

Muy bien, para emular el entorno de producción de GitHub debemos usar Jekyll. Para instalarlo en ArchLinux, estos son los pasos:

Nota Ya debes tener instalado y configurado Git.

• Instalar ruby

sudo pacman -S ruby

• Instalar Jekyll

yaourt -S ruby-jekyll

• Dependencias adicionales, para evitar errores

gem install blunder
gem install jekyll
gem install rdiscount -s http://gemcutter.org

Para probar que todo haya salido bien, creamos una carpeta y en ella hagamos un index.html

mkdir prueba-platzi
cd prueba-platzi
echo"Hola compañeros de platzi" > index.html

Luego de eso corremos el servidor con Jekyll y visitamos localhost:4000

jekyll serve

En este punto debe mostrarte una imagen como esta.

¡Felicitaciones! 😄

Al momento de crear tu página web en GitHub, desde Settings puedes seleccionar fácilmente el tema que más te guste.

Yo utilicé Hacker theme

Para correrlo en localhost tuve que hacer unos ajustes:

• Eliminar el archivo Gemfile.
• Comentar la línea theme: jekyll-theme-hacker en _config.yml
• Eliminar {% seo %} en _layouts/default.html

De esta manera puedo editar a mi gusto y con mayor tranquilidad mi página destinada para mi portafolio que puedes encontrar en osmandi.github.io

¿Qué usos puedes darle a jekyll?

Nota Me gustó mucho que el ícono de Jekyll, un tubo de ensayo 😄 No sé por qué la tendencia de usar instrumentos químicos en plena reacción con desprendimento de gas. Tengo curiosidad de su contenido 😄.

Saludos,