Guía para la creación de un blog con Octopress

En la primera entrada de este blog usando Octopress ya comentaba las razones por las que he pasado de usar Blogger a usar Octopress. Entre las razones del cambio estaban la posibilidad en Octopress de escribir en markdown, edición desconectado (para textos e imágenes), diseño adaptable y más personalizable, git y control de versiones, alojamiento en cualquier servidor web. Aún sin ser Octpress también tiene cosas mejorables pero desde luego me está resultando mucho mejor que blogger.

En esta entrada quiero escribir una guía con los pasos necesarios para crear un blog en Octopress de forma rápida y algunas funcionalidades a tener en cuenta o que deberemos realizar.

Antes de empezar supondré que ya tenemos en nuestro sistema ruby y git instalados. En Linux basta con buscar el paquete correspondiente para nuestra distribución e instalarlo con el gestor de paquetes. Con Arch Linux tan simple como:

1
2

# pacman -S ruby git

Empezamos clonando con git el repositorio de Octopress y la configuración inicial, sustituyendo blog-bitix por el nombre del repositorio del blog en GitHub que habremos creado previamente:

1
2
3
4
5
6

$ git clone git://github.com/imathis/octopress.git blog-bitix
$ cd blog-bitix
$ gem install bundler
$ bundle install
$ bundle update rake
$ rake install

En esta guía voy a comentar como alojar el blog empleando GitHub Pages que nos ofrece alojamiento gratuito tanto para el blog como para el repositorio git de código fuente, la URL será del estilo http://[usuario].github.io/[nombre-blog]. Para ello, primero en la página de GitHub crearemos el repositorio para alojar el código y el blog, después ejecutaremos el siguiente comando que nos pedirá la dirección de nuestro repositorio en mi caso git@github.com:picodotdev/blog-bitix.git:

1
2

$ rake setup_github_pages

Configuramos git para que conozca nuestro usuario al hacer commits:

1
2
3

$ git config user.email "pico.dev@gmail.com"
$ git config user.name "pico.dev"
$ git config core.editor "vim"

Hacemos lo mismo en el repositorio git de la carpeta _deploy. Octopress usa dos repositorios git, uno para el código fuente del repositorio y otro para lo que ven los usuarios del blog. Octopress configura git de tal forma que los dos repositorios sean dos ramas del mismo repositorio en GitHub:

1
2
3
4
5

$ cd _deploy
$ git config user.email "pico.dev@gmail.com"
$ git config user.name "pico.dev"
$ git config core.editor "vim"
$ cd ..

Cambiamos el origen de la rama master a la de nuestro GitHub en vez del origen de Octopress:

1
2

$ git remote add origin git@github.com:picodotdev/blog-bitix.git
$ git config branch.master.remote origin

Podemos previsualizar el estado actual del blog en el navegador introduciendo en él la dirección http://localhost:4000/blog-bitix/:

1
2

$ rake preview

Haciendo el primer deploy del blog (deberemos configurar SSH) dispondremos del blog en la siguiente dirección https://picodotdev.github.io/blog-bitix/. Puede que el blog tarde unos minutos en estar disponible y deberemos hacerlo cada vez queramos que los cambios se apliquen al blog.

1
2

$ rake generate
$ rake deploy

Ya estamos listos para empezar a hacer cambios en el blog y crear entradas:

1
2

$ rake new_post["titulo"]

Subimos los cambios al repositorio de GitHub con:

1
2
3

$ git add .
$ git commit -m 'Mensaje del commit'
$ git push origin master

Si queremos que el blog tenga un dominio propio en vez de un subdominio de GitHub deberemos crear un archivo CNAME con el nombre del dominio, subirlo al repositorio y hacer el deploy aparte de la configuración que debamos hacer en los registros DNS de dominio:

1
2

$ echo 'dominio.com' >> source/CNAME

Probablemente lo siguiente que deberemos empezar a hacer es configurar ciertas propiedades que afectan al blog, como las urls, nombre del blog, número de post por página, cambiar estilos, etc…

En un futuro quizá necesitemos obtener el repositorio del blog y la forma de disponer de él es diferente que crearlo desde cero con los pasos anteriores. Como comentaba en realidad los blogs con Octopress son dos repositorios de git y por tanto deberemos hacer un clone para cada uno de ellos, los comandos para clonar los repositorios son:

1
2
3

$ git clone -b master git@github.com:picodotdev/blog-bitix.git
$ cd blog-bitix
$ git clone -b gh-pages git@github.com:picodotdev/blog-bitix.git _deploy

Hay algunas cosas adicionales que he tenido que hacer para disponer de un blog completamente funcional como deseaba:

• Dado que el blog lo tengo alojado con el modo Project Pages en vez de User/Organization Pages he necesitado crear otro repositorio para que las Web Master Tools me considere el dueño del dominio http://picodotdev.github.io.
• En el blog es habitual que incluya capturas de pantalla a modo de explicación. Usando ImageMagick para crear las pequeñas vistas previas y Bootstrap Image Gallery consigo reducir el tamaño en KiB de la página ya que inicialmente solo se cargan las thumbnails que son mucho más pequeñas que las imágenes originales, aparte de que si las imágenes son muy grandes y se incluyen en su tamaño original es difícil que entren en el espacio reservado para el texto.
• Para facilitar que el contenido sea compartido he necesitado hacer una cuantas modificaciones para incorporar a Octopress Karmacracy, ShareThis y Disqus. Con estas herramientas sociales facilitaremos a los usuarios que compartan el contenido más fácilmente.
• También he necesitado modificar algunos estilos para dar al blog el aspecto que quería, para una persona con algunos conocimientos de programación y desarrollo web no es nada complicado.
• Para tener el directorio de imágenes organizado y no se convierta en un cajón desastre a cada post le doy un identificador y en la carpeta images/custom/posts creo una carpeta con ese identificador. De esa manera es fácil saber que imágenes he usado en cada post. Los logotipos que usaré en varias entradas las pongo en la carpeta images/custom/logotipos.

En el código fuente del blog se puede ver los archivos para hacerlo. Por ejemplo, para integrar Karmacracy he necesitado modificar los siguientes archivos.

• source/layouts/_post.html
• custom/post/karmacracy.html