¿Te preguntas cómo he hecho este Blog? Sé que a lo mejor no, pero necesitaba un pretexto para comenzar este post. Con lo cual manos a la obra.

Primero necesitaremos instalar varios viruses frameworks:

(Nota, en Linux e IOS viene instalado por defecto Ruby y Ruby Gems, aún así será necesario actualizarlos. Para ello usaremos RVM)

Instalar RVM

RVM es una magnífica herramienta para instalar, administrar y trabajar con Ruby. Aunque nosotros no vayamos a trabajar directamente con este lenguaje, es la forma más fácil y rápida de empezar a configurar el sistema de desarrollo. Para instalarlo serán necesarios tres comandos (Teniendo en cuenta que estés en Ubuntu. Si no es el caso mirar la página oficial de RVM):

gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3

\curl -sSL https://get.rvm.io | bash -s stable

El comando a continuación dependerá de tu sistema operativo. Este es en el caso de Ubuntu 14.04:

source /home/vagrant/.rvm/scripts/rvm

Si todo se ha instalado correctamente deberíamos poder hacer rvm -v y nos saldría la versión.

Actualizar Ruby y Ruby Gems

Desde la línea de comandos escribir:

rvm install 2.2.2

rvm use 2.2.2

Instalar las Gems necesarias

Una vez instalados abriremos la línea de comandos de Ruby (En Linux e IOS valdrá la línea de comandos del sistema). Y comprobaremos que se ha instalado todo correctamente, para ello:

ruby -v

gem -v

(Nota, en el caso de Ruby tienes que tener instalado una versión superior a la 2.0.0)

A continuación, desde esa misma línea de comandos instalar Bundler.

gem install bundle

Y el producto estrella, Jekyll.

gem install jekyll

Generar el proyecto con Jekyll

Ya casi estamos ahora queda inicializar el proyecto con Jekyll con:

jekyll new mi-blog

Si te fijas te habrá creado un montón de carpetas y archivos, los iremos revisando uno a uno. La estructura debería ser la siguiente:

  • _config.yml
  • _drafts
    • Blog-con-Jekyll-y-Github-Pages.markdown
  • _includes
    • footer.html
    • header.html
  • _layouts
    • default.html
    • post.html
  • _posts
    • Blog-con-Jekyll-y-Github-Pages.markdown
    • 2015-06-06-Hello-World.markdown
  • _data
    • members.yml
  • _site
  • .jekyll-metadata
  • index.html

_config.yml: Aquí está la configuración predeterminada de Jekyll.

_drafts: Los drafts son posts que todavía no se han publicado.

_includes: Aquí estarán almacenados los bloques de código que se reutilizarán por toda tu web (Footer, head, header, etc…)

_layout: Esto son plantillas que puedes definir para que el contenido que publiques en tus posts u otras páginas tengan cierto formato.

_posts: El contenido dinámico estará aquí, es decir, los posts. El formato del nombre de estos archivos es AÑO-MES-DIA-título.markdown. Cada vez que quieras escribir un nuevo post no tendrás más que crear un archivo nuevo con las opciones predeterminadas.

_data: Los datos del sitio.

_site: Aquí se guardará todos los archivos compilados por Jekyll.

index.html: La página principal de tu blog.

Debido a requerimientos de Github Pages debemos ejecutar jekyll desde bundle. Para ello crearemos un archivo y lo llamaremos Gemfile (Sí, sin ningún formato). Dentro pondremos lo siguiente:

source 'https://rubygems.org'
gem 'github-pages'

Y ejecutamos:

bundle install

y seguidamente

bundle exec jekyll serve

Para ver la preview del blog, vamos a nuestros navegador favorito, en mi caso Internet Explorer 8, y ponemos en la barra del buscador la siguiente dirección ip: 0.0.0.0:4000. Jekyll nos ha creado un servidor local para que podemos ver nuestro blog antes de subirlo a internet. Eso solo lo tendremos que hacer una vez, luego las demás, simplemente con jekyll serve --watch (Watch mira si hay cambios en el directorio y lo compila, para que al refrescar la página se vean los cambios reflejados.) bastará.

Crear un repositorio nuevo en Github

Empezar un repositorio en Github con el nombre de nombreDeUsuario.github.io donde nombreDeUsuario es tu nombre de usuario (Qué sorpresa, ¿eh?). Tienes que ponerlo público.

(Nota, instalar git en caso que no lo tengas)

Empujar el proyecto a Github

Redoble de tambores por favor, pues hemos llegado a la recta final, solo queda empujar todo el proyecto a Github, y ellos ya se encargan de generar tu sitio y hostearlo. Gratis.

Para empujar tu sitio no tendrás más que añadir los archivos, hacer un commit, añadir el repositorio y hacer un push. Recuerda hacer cd a la carpeta donde está tu blog y tendrás que iniciar git: con:

git init

git add .

git commit -m "Mi primer commit"

git remote add origin url-del-repositorio

(Nota, la urlDelRepositorio podrás encontrarla en github.com/nombre-de-usuario/nombre-de-repositorio. Cópiala y pegala.)

git push origin master

Y ya está, ya tienes tu blog on live, no tendrás más que visitar http:\nombre-de-usuario.github.io para poder contemplar tu obra maestra. Lo siguiente será leer la documentación de Jekyll, Markdown (Que viene preinstalado con Jekyll), SaSS y Yaml.