Recomiendo ver el post desde la fuente original, para que no preste tanto a la confusión el tema de los códigos.
Crear un blog puede ser un tema complicado, o simple, dependiendo de las plataformas y las ganas. Blogger, Wordpress o Tumblr suelen ser las opciones predilectas, por la facilidad que presentan para poder empezar a escribir en pocos pasos y poco tiempo. Por otro lado se puede optar por blogs estáticos, una versión mucho más simple y acotada, y por eso interesante, ya que permite laburar las entradas mediante FTP.
En este tutorial voy a detallar como se arma uno con Octopress, un generador estático basado en Jekyll, aunque en este enlace podés ver más opciones para crear estáticas.
Como dije, Octopress, que está desarrollado en Ruby, es un framework de Jekyll que genera los archivos necesarios para armar un blog y dejarlo andando, se supone que rápido. Esto depende de la familiaridad de uno con Linux, y de saber, o tener ganas de aprender Markdown, el lenguaje por el que se escriben las entradas. Entre muchas funcionalidades que no me voy a poner a detallar, para eso pasá por la página oficial, puedo destacar la conectividad con Disqus, Analytics, Facebook, Twitter, GitHub, diseño web adaptable (responsive), y una linda cantidad de plugins.
El paso a paso lo voy a hacer como si fuese alguien que nunca usó GitHub ni Ruby -exactamente mi caso- por lo que debería ser fácil. Asumo que para llevar a cabo el setup de Octopress ya tenés instalado Linux -yo uso Ubuntu 14.04- ya sea de forma nativa o virtual.
Instalación inicial
En el Terminal de Linux (CTRL+ALT+T) tipeamos
sudo apt-get install build-essential git rbenv ruby1.9.1-full nodejs
Instalación y configuración de Octopress
Copiamos del repositorio oficial los archivos de Octopress con
git clone git:https://github.com/imathis/octopress.git madrugado
Yo agregué el â??madrugadoâ?? al final de la sentencia para que cree y descargue automaticamente a esa carpeta.
cd madrugado
sudo gem install bundle
rbenv rehash
bundle install
rake install
En esta porción de código estamos dejando apto el ambiente de Ruby para trabajar con Rake, e instalamos el tema clásico de Octopress que viene por defecto.
Antes de continuar con el siguiente paso, asumo ya tenés creada tu cuenta de Git, y el repositorio. En mi caso el nombre del repositorio es Madrugado, y el de usuario pstuarts, por lo que la dirección del repositorio donde vamos a alojar el blog es https://github.com/pstuarts/madrugado.git
rake setup_github_pages
https://github.com/pstuarts/madrugado.git
git config --global user.name "pstuarts"
git config --global user.mail "stuartspato@gmail.com"
Después de dejarle dicho a Git cual es la URL con la que va a trabajar, configuré Octopress según los pasos de este documento oficial, que a fin de cuentas nos explica como configurar el archivo _config.yml.
Lo último que nos quedaría por hacer es configurar las SSH Keys de GitHub, tutorial que seguí paso a paso desde acá y no demoré mas de diez minutos. Ante errores de este o el anterior paso, dejame un comentario más abajo y vemos que se puede hacer, pero como digo, seguir los pasos de ambos enlaces no debería ser para nada difícil.
rake generate, preview y deploy
Conforme hayas hecho los pasos previos, faltaría familiarizarse con los comandos de rake, para poder previsualizar y generar cambios en nuestro nuevo blog.
rake generate
Ã?ste viene a ser el comando matriz. Una vez hayamos hecho algún cambio en el blog, ya sea una nueva entrada, una modificación en la plantilla o simplemente cambiar alguna configuración del archivo _config.yml, mediante rake generate le vamos a pedir que compile los archivos para que aplique estos cambios.
rake preview
Por otro lado, rake preview nos permite visualizar el blog en tiempo real sin necesidad de cargarlo ene nuestro repo de GitHub. Al correr este comando se alojará en http://localhost:4000/madrugado (madrugado en mi caso, el suyo iría con el nombre de la carpeta donde tienen alojado Octopress y los archivos del blog) donde podemos entrar desde un navegador web y corroborar que los cambios hayan aplicado.
rake deploy
Para finalizar, rake deploy se conecta con el repositorio Git (para eso requerimos de las SSH Keys mencionadas anteriormente) y sube los archivos al mismo, para así tener el blog funcional en, mi caso, http://pstuarts.github.io/madrugado . Tené en cuenta que este comando pide usuario y contraseña de Git, por lo que hay que estar atentos a lo que procesa el Terminal de Linux al correr deploy.
Obviamente no termina acá, ya que hay muchos comandos más que podés consultar acá.
rake new_post
Otro comando clave a la hora de bloggear es rake new_post[â??título del postâ??] (modificando titulo del post por el título que le quieras dar) que sirve para, valga la redundancia, crear nuevas entradas en el blog. Lo que yo hago es, escribo y edito la entrada en Haroopad (un editor de textos MarkDown para Linux, Windows y Mac súper simple y con ayuda de sintaxis) y una vez que la tengo lista, creo la nueva entrada mediante rake new_post, me dirijo a source/_posts , busco esa entrada que acabo de crear, y pego el contenido del texto ya editado en Haroopad en la misma. Cuando corro rake generate, el blog es recompilado con la entrada incluida.
Cuidado, porque las entradas se crean de determinada manera que NO es modificable. Por ejemplo, en el directorio source/_posts vamos a ver que las entradas, previo al nombre de la misma, tienen una fecha conformada por AAAA/MM/DD. Esta fecha NO tiene que tocarse, ya que así Octopress organiza las entradas por fecha.
Otro punto a tener en cuenta, es la sintaxis inicial de los artículos. Como dije, una vez que cree la entrada con Haroopad copio y pego el contenido de la misma en la entrada generada con rake new_post. Al abrir el artículo, vas a ver algo similar a esto:
De esas cinco líneas, se supone, no hay que tocar nada. Unicamente cambiar true por false en comments, si no querés que se pueda comentar en el artículo, y agregar las categorías que consideres necesarias mediante corchetes. Justo después de las tres rayas finales, pegamos el contenido que ya tenemos listo, guardamos, corremos rake generate, y rake preview para ver si la entrada quedó bien, o rake deploy, si estamos muy seguros, (aunque no lo recomiendo) y cargar todo junto en el repositorio.
Instalando un tema personalizado
Hasta acá todo bien, ya deberíamos tener el blog andando. El problema es, cómo anda. La plantilla por defecto que suministra Octopress no es mala ni mucho menos, pero que es fea, de eso no hay dudas. En este enlace tenés todo un listado con los temas creados por terceros, disponibles para la descarga e instalación. En mi caso, después de revisar, volver a revisar, e ir eliminando los que menos me gustaron, me senté y probé con varios. Algunos fueron cuestión de segundos, y otros directamente no los logré hacer andar.
Finalmente me quedé con un tema creado por Aron Cedercrantz, simple, limpio, minimalista, y de fácil instalación.
En el repositorio del tema, clickeas en Download ZIP. Una vez descargado, descomprimís el archivo en /.themes y en el terminal de Linux tipeas:
rake install[BlogTheme]
rake generate
rake preview
Entramos en http://localhost:4000/â??nombre de la carpeta del blogâ?? y vamos a ver que, definitivamente el blog cambió, y mucho. Probablemente haya cosas que te gustaría modificar, como los botones del nav, agregar páginas, modificar el footer, entre quien sabe que otras cosas no te terminan de cerrar del tema. En este documento oficial se pueden ver todos los cambios que se pueden hacer al blog.
En mi caso, únicamente modifiqué el footer y el nav, aunque a medida que vaya agregando cosas nuevas las voy a ir publicando. Para el footer, nos dirigimos a source/_includes/custom y modificamos el archivo footer.html. El mío quedó así:
<p>
Copyright © 2015 -
<span class="credit">Blog creado por Patricio Stuarts</a>,
con la tecnología de <a href="http://octopress.org">Octopress</a></span>
</p>
Y para el nav (los botones para navegar por la página) lo mismo, nos dirigimos a source/_includes/custom y abrimos el archivo navigation.html. Lo único que modifiqué en este último es el idioma (cambié de â??Archivesâ?? a â??Archivoâ??).
Como se puede ver, dentro de esa carpeta también hay otros archivos como head.html, header.html, y after_footer.html, los cuales también se pueden modificar en el caso de necesitarlo, aunque no lo hice porque no le encontré lógica a modificar algo que está bien diagramado.
Configurando Disqus
Disqus es, según mi punto de vista, la mejor plataforma de comentarios de la red. Se integra ávidamente con las redes sociales más utilizadas, la interfaz es completa, y el gestor de comentarios óptimo. Si esto fuese Wordpress, no habría necesidad de explicar como configurar Disqus, pero esto no es Wordpress, es Octopress, y como dice su slogan â??A blogging framework for hackersâ?? todo tiene una vuelta de tuerca más.
Primero que nada, necesitamos una cuenta en Disqus. Una vez logeados, click en la ruedita de ajustes, en la parte superior derecha de la web, y entramos en la sección Admin.
Como se ve en la imagen, una vez en Admin pinchamos en las tres líneas del margen izquierdo > Add new site.
Los pasos para la configuración son muy simples, nombre del blog (Madrugado: Ideas post 4 AM), una URL (madrugado-4am.disqus.com) y elegir una categoría. Finalizado el setup inicial, nos va a devolver a la pantalla de Admin, dándonos la posibilidad de modificar Disqus en lo referente al blog.
Una vez terminamos en la web de Disqus, hay que modificar los archivos del blog. Lo lógico sería utilizar la función Install de Disqus, aunque a mi particularmente no me sirvió el código que te entregan, por lo que tuve que pasarme toda una tarde en internet para dar con la configuración correcta.
Primero que nada, abrimos el archivo config.yml y bajamos hasta la sección 3rd Party Settings.
disqus_short_name: madrugado-4am
disqus_show_comment_count: true
En el primer renglón ingresamos el nombre que le pusimos al blog para la URL de Disqus, en mi caso, madrugado-4am. El segundo renglón tiene que quedar en true, de lo contrario, por mas configuraciones que hagas, nunca te va a funcionar la caja de comentarios.
Con eso, debería funcionar, aunque como suele pasar en informática, nunca nada es tan fácil como parece, y hay todavía un paso más. Dentro de source/_includes deberíamos tener un archivo de nombre disqus.html. Sino existe, crealo, y adentro del mismo pegas lo siguiente:
<script type="text/javascript">
var disqus_shortname = 'madrugado-4am';
// var disqus_developer = 1;
var disqus_identifier = 'http://pstuarts.github.io/madrugado/blog/2015/03/27/creando-un-blog-estatico-con-octopress-y-github/';
var disqus_url = 'http://pstuarts.github.io/madrugado/blog/2015/03/27/creando-un-blog-estatico-con-octopress-y-github/';
var disqus_script = 'embed.js';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
De este código únicamente hay que modificar var disqus_shortname, var disqus_identifier y finalmente, var disqus_script, como se ve en la imagen:
Cambiando el Favicon
El favicon puede ser más o menos importante, dependiendo de la persona, pero si algo está claro es que da cierta sensación de página seria.
Primero hay que buscar o crear una imagen .png de 16x16 o 32x32. Yo elegí de 16, pero no creo que haya diferencia entre un proceso y otro.
Una vez lista la imagen, ingresamos a Favicon Generator, importamos el .png y descargamos el nuevo archivo, ahora en formato .ico. En la carpeta source copiamos y pegamos el nuevo archivo, reemplazando el anterior, y al correr rake generate el favicon del blog debería quedar funcional.
Si seguís viendo el ícono de la â??Oâ?? distintiva de Octopress, hay tres posibles soluciones: limpiar la caché del navegador que utilicemos, probar cambiando de navegador, y por último cerciorarse de que en el archivo head.html de source/_includes se encuentre la línea <link href="/madrugado/favicon.ico" rel="icon">
De no ser así, crearla.
Error a la hora de correr rake deploy
Es muy probable que después de cargar archivos al repositorio de Git, la tercera o cuarta vez, veas un error como este:
Si bien no sé por qué es que da este error, y tampoco me interesé demasiado, navegando por internet llegué a dar con este comando:
git push origin :gh-pages
Después de correrlo, podemos volver a cargar archivos al repositorio sin problemas.
Me tomó bastante laburo, tanto el armado del blog en si, como el tutorial, por lo que dejo algunos enlaces que me sirvieron muchísimo:
Lee Green
Gustavo Caso
Vabadus
LibreBit
Blog Bitix
Octopress Docs
Si tenés alguna duda, no dudes en comentar o mandarme MP!
Redactado por: Anónimo
0 comentarios
Publicar un comentario