Requisitos:

  • Vagrant y Virtualbox instalados para montar nuestro entorno de desarrollo.
  • Git instalado en nuestra maquina local.
  • Servidor remoto para hacer el deploy con Apache (o Nginx) configurado.
  • Apache (o Nginx) configurado en local.

Hoy voy a explicar como crearnos un blog sencillo con Octopress. Para los que no lo conozcáis, Octopress es un framework de blogging que hace uso de Jekyll que nos permite de una manera muy sencilla generar un blog estático. Si has trabajado con Wordpress esta es la mayor diferencia con Octopress, y es que Octopress no tiene nada de contenido dinámico.

Esto implica que no hay admins, uso de base de datos, ni sistemas de comentarios nativos, etc. con el consiguiente impacto positivo en la performance de nuestro blog. Un blog hecho en Octopress consiste simplemente en una colección de ficheros html estáticos con su CSS generado con SASS y el Javascript que nosotros queramos añadir.

El workflow de octopress para generar posts consiste en generar mediante rake un post en blanco, redactarlo con nuestro editor de textos favorito y luego generar el site estático que luego sincronizaremos con nuestro servidor de producción. Para conseguir esto yo voy a usar Vagrant para generar el entorno dev en local y luego mediante rsync subiré mi sitio estático a una microinstancia que tengo en Amazon. También voy a implementar un sistema de backups básico con git para que al hacer cada deploy se guarde el estado del blog actual en un commit y se pushee a un repositorio remoto. Creo que esto último es una buena idea, ya que como Octopress no usa base de datos alguna, si borramos el sistema de archivos perderemos completamente nuestro blog.

Lo primero que voy a hacer es hacer un fork del repositorio oficial de Octopress. Como los contenidos del blog se generan en la misma carpeta, yo voy a hacer el fork en bitbucket.

$ git clone git://github.com/imathis/octopress.git octofork
$ cd octofork
$ git remote rm origin
$ git remote add origin git@bitbucket.org:sergigp/octopress.git
$ git push origin master

Ya tenemos nuestro fork de octopress privado. Ahora vamos a instalar un entorno de desarrollo con Vagrant, para ello debes tener instalado Virtualbox y Vagrant que estén disponibles en sus respectivos sites para todos los sistemas operativos modernos.

Tengo que decir que este paso es opcional, podemos prescindir perfectamente de Vagrant e instalar nuestro Octopress en nuestra máquina local. Yo lo hago así pq no me gusta instalar cosas de más en mi máquina local, como vamos a instalar ruby y yo todavía no lo tengo muy controlado, prefiero hacerlo en una VM :). Además mi servidor de producción es un Ubuntu y como yo uso Mac OS me ahorro problemas tipo “en local funciona”. Si no es tu caso o no te interesa Vagrant puedes saltar este paso.

Para construir mi entorno suelo optar por un Ubuntu Server 12.04 de 64 bits. Tengo un repositorio en githubcon una box limpia de esta distribución.

$ cd
$ cd www # me voy a mi documentroot de apache
$ git clone https://github.com/sergigp/vagrant-base-precise64 octopress
$ cd octopress
$ vagrant up # levantamos la VM

Este proceso puede tardar un rato. Cuando termine tendremos instalada una VM con Ubuntu 12.04 limpia. Debemos fijarnos que al hacer vagrant up, Vagrant nos indicará el mapeo de puertos de la VM con nuestra máquina local. En mi caso me ha mostrado que el puerto HTTP se ha mapeado con el 8888

default] -- 80 => 8888 (adapter 1)

Se mapean más puertos, pero para este manual no nos hacen falta. Si todo ha ido bien al acceder en nuestro navegador a “localhost:8888” ya deberíamos ver un mensaje de que todo ha ido ok. Como podéis ver nuestra carpeta octopress/www contiene el fichero que muestra el navegador. Ahora ya podemos acceder a nuestra VM mediante vagrant ssh. En este punto tenemos dos terminales, el terminal de nuestra máquina local y el terminal de nuestra VM Vagrant. Podéis comprobar que los contenidos de nuestra carpeta octopress/www están mapeados con los de la carpeta de nuestra VM /var/www.

Ahora vamos a recuperar nuestro fork de Octopress que hemos hecho antes. En el terminal de nuestra máquina local subimos hasta encontrarnos en octopress/. A continuación lo que vamos a hacer es borrar la carpeta www e instalar en su lugar un submódulo de git con nuestra copia de octopress. También aprovechamos para crear la carpeta public de nuestro Octopress, que es donde se ubicará el contenido estático de nuestro blog.

$ git rm www
$ git submodule add git@bitbucket.org:sergigp/octopress.git www
$ cd www
$ ls -l # deberíamos ver los contenidos de octopress !
$ mkdir public
$ cd public
$ echo "hello world" > index.html

Ahora vamos crear un virtualhost en nuestro apache local para poder acceder comodamente a nuesto entorno de desarrollo. Yo lo hago sobre Mac OS, pero si lo hacéis en Linux es bastante parecido.

$ cd /etc/apache2
$ sudo vim httpd.conf

Al final de todo de este archivo añadimos nuestra configuración que como véis no tiene mucha complicación y es muy similar al Virtualhost que tendremos en nuestro servidor de producción.


    ServerName dev.sergigp.com
    ServerAlias dev.sergigp.com
    DocumentRoot /Users/sergi/www/octopress/www/public

También debemos editar nuestro archivo /etc/hosts para indicarle a nuestra máquina que cuando pongamos en el navegador dev.sergig.com nos intente cargar los contenidos de nuestra máquina local indicados en el virtualhost

127.0.0.1 dev.sergigp.com

Reiniciamos nuestro Apache para que cargue la nueva configuración con el comando:

$ sudo apachectl restart

Ahora al intentar entrar en dev.sergigp.com en nuestro navegador nos debería mostrar un bonito “hello world”. Si no es así seguramente tengáis algun problema con el virtualhost permisos.

Ahora nos vamos al terminal de nuestra VM para instalar todo lo necesario para que Octopress funcione. Si hemos cerrado el terminal de antes, siempre podemos volver a acceder con vagrant ssh. Una vez dentro instalamos Ruby con RVM.

$ sudo apt-get update # actualizamos ubuntu
$ sudo apt-get upgrade
$ sudo apt-get install git curl git-core rbenv # algunas dependencias
$ bash -sk stable < <(curl -sk https://raw.github.com/wayneeseguin/rvm/master/binscripts/rvm-installer) # instalamos rvm
$ echo '[[ -s "$HOME/.rvm/scripts/rvm" ]] && . "$HOME/.rvm/scripts/rvm" # Load RVM function' >> ~/.bash_profile # añadimos rvm al bash profile
$ source ~/.bash_profile # recargamos el bash profile
$ rvm autolibs enable # dejamos que rvm gestione las dependencias automaticamente
$ rvm requirements # instalamos los requisitos
$ rvm install 1.9.3 # instalamos ruby, esto puede tardar un rato...
$ rvm use 1.9.3 # le indicamos a rvm que vamos a usar ruby 1.9.3
$ rvm rubygems latest # instalamos las gemas
$ cd /var/www # nos vamos a nuestro documentroot
$ gem install bundler
$ bundle install
$ rake install # instalamos el tema por defecto
$ rake generate # genera los posts y el blog en base al _config.yml

En nuestra máquina local ya se nos deberia ver nuestro nuevo blog. Os recomiendo que le echéis un vistazo a la guía de Octopress para generar nuestros posts.

Ya por ultimo vamos a montar nuestro sencillo sistema de deploy y backup. Vamos a nuestra máquina local y en octopress/ creamos nuestro archivo deploy.sh.

$ vim deploy.sh

En el añadimos estas líneas que lo que van a hacer es sincronizar los contenidos de nuestra carpeta public local con la carpeta en la que vamos a poner el blog en nuestro servidor de producción.

rsync -av public/ miusuario@miservidorremoto:/var/www/blog/public
git add .
git commit -m 'backup contenido'
git push origin master

Si todo ha ido bien deberíamos tener nuestro blog ya online en producción :)