Nuevo diseño en Blog Bitix

Escrito por el , actualizado el .
blog planeta-codigo
Enlace permanente Comentarios

Blog Bitix

En diciembre de 2013 pasé de utilizar Blogger a usar Octopress creando la bitácora Blog Bitix. Octopress fue una gran mejora a la hora de editar el contenido y gestionar las imágenes o trozos de código con gist. Hace relativamente poco que he pasado a utilizar Octopress pero desde hace un tiempo quería personalizar mucho más el diseño de la bitácora. Estaba esperando a ver como avanzaba el desarrollo de la siguiente versión sin embargo va lentamente por mucho que hayan dicho ya en el 15 de enero que Octopress 3 de está en camino, aún en mayo no hay ninguna nueva noticia desde entonces.

Posiblemente usando Jekyll directamente (Octopress está basado en Jekyll) podría conseguir el nivel de personalización que quería. Sin embargo, revisando otras opciones dí con otra plataforma de generación de sitios estáticos, Hugo. De Hugo me han gustado varias cosas que en Octopress no tenía:

  • Ejecutable: Hugo es un único binario, basta descargar este único archivo. Está desarrollado en el lenguaje go (Jekyll y Octopress en Ruby). No hay dependencias que descargar que «ensucien» el sistema, esto también tiene la ventaja de que la actualización a una nueva versión es sencilla.
  • Temas: crear un tema para Hugo es sencillo y hay una documentación básica pero suficiente.
  • Rapidez: el lenguaje go y Hugo alardean de rapidez y mis sensaciones coinciden con ello, la bitácora completa se genera en unos pocos segundos, los cambios en un artículo son casi instantáneos y el servidor web local arranca muy rápido.
  • Taxonomía: con Hugo al contenido se le puede aplicar una taxonomía muy versátil que por ejemplo permite crear series de artículos. Con Octopress tenía que modificar cada artículo de la serie para incluir uno nuevo, con Hugo basta que lo defina en el front matter y el resto de artículos de la serie se actualizarán incluyéndolo.

Con Hugo también he tenido que hacer algún hack y es que en los diferentes artículos de la bitácora suelo incluir enlaces a un montón de herramientas, para no estar repetirlos constantemente y en el caso de que uno cambie no tener que modificar los artículos individualmente tengo un archivo de enlaces comunes que incluyo en cada artículo, y en esta inclusión está el hack, usando algunas de las funciones que proporciona Hugo. También he tenido que crear un script para subir los cambios al alojamiento que uso con GitHub Pages cosa que Octopress proporciona de serie, usar Grunt para generar el archivo de estilos css a partir de un archivo Less o reescribir las urls de los feeds para que sean absolutas.

Entre las cosas de diseño que quería cambiar estaba la cabecera intentando que fuese pequeña verticalmente para que según se cargue la página se vea la mayor parte posible de contenido, con esto he quitado la descripción de la bitácora de la cabecera y la he puesto en el pié de página. En el menú he puesto enlaces a las secciones de las que suelo hablar: Java, GNU/Linux, JavaScript y Apache Tapestry. Los usuarios podrán encontrar más fácilmente el contenido de los temas principales que escribo y quizá Google averigüe un poco mejor de que trata la bitácora. Entre otras cosas he cambiado el tema a uno basado en el color blanco, reorganizado los bloques de anuncios de publicidad Adsense, eliminado Karmacracy por nulo uso para compartir contenido y dejando solo Share This para este propósito, he situado los enlaces de sindicación al lado del logotipo para darles más visibilidad, cambiada la visualización de los thumbnails de las imágenes ahora se podrán ver en un tamaño mucho más grande y mejor, la página de inicio ahora solo incluye un resumen de los artículos en vez del artículo completo con lo que espero que esta página se cargue mucho más rápido, un fondo que varía de forma aleatoria en cada carga de página (lo mismo que hago en Blog Stack), añadidos algunos estilos para poner pies en las imágenes y algunas correcciones y modificaciones más en el pie y en la barra lateral.

Diseño nuevo Diseño anterior

Diseño de Blog Bitix ahora con Hugo y antes con Octopress

Las urls del contenido no han variado, sí algunas del archivo y de las etiquetas pero como tengo bloqueadas estas con el archivo robots.txt Google no me indicará errores 404. Probablemente si me informe de algún 404 en el contenido aunque espero que no muchos, si ocurre los corregiré en los próximos días o cualquier otra cosa de la que vaya dándome cuenta.

El código fuente completo del tema que he creado y del blog realizado con Hugo puedes encontrarlo en el siguiente repositorio de GitHub.

¿Que te parece el nuevo diseño?


Comparte el artículo: