TL;DR

Con Firebase Hosting y Jekyll podremos tener nuestra página web, portfolio o blog, totalmente gratis.

Jekyll

Como se indica en su página web, jekyll nos ayuda a transformar archivos de texto plano en páginas web estáticas y blogs. Instalarlo en Ubuntu es muy fácil, pero antes necesitamos asegurarnos de que tenemos Ruby instalado:

sudo apt-get update
sudo apt-get install ruby ruby-dev make gcc
sudo gem install jekyll bundler

Una vez instalado, podemos seleccionar un theme de los muchos que hay para modificarlo a nuestro gusto y configurar nuestro sitio. Puedes ver una lista bastante amplia aquí, aunque por el momento, usaremos el de mi página a modo de ejemplo. Clónate el proyecto e instala todas las dependencias:

git clone https://github.com/joshgerdes/jekyll-uno
cd jekyll-uno
bundle install
bundle package

Léete la ayuda, configura el archivo _config.yml y publica unos cuantos posts. Recuerda que puedes comprobar cómo quedaría tu sitio gracias al servidor que incluye. Lánzalo con el siguiente comando:

jekyll serve --drafts --force_polling

y navega a la url que te indica, generalmente http://localhost:4000.

Con esto ya tendríamos nuestro sitio, blog o portfolio configurado y listo para publicar. Ahora tenemos dos opciones. La primera es hacerlo en Github Pages. Es una opción muy recomendable, pero te “obliga” a que el repositorio donde esté alojado el proyecto sea público (al menos con una cuenta gratuita) Así que por el momento hablaremos de otra opción: Firebase Hosting.

Firebase Hosting

Gracias a Firebase, cualquier usuario dispone de 1GB para hospedar páginas estáticas. Tanto si tienes cuenta como si no, lo primero que tenemos que hacer es acceder a la consola de Firebase: https://console.firebase.google.com.

Ahora tenemos que agregar un nuevo proyecto.

Ponle el nombre que más te guste, pero fíjate en el campo ID del proyecto. De hecho léete la ayuda, ya que ese campo formará parte de la url de nuestro blog (eso si no vamos a usar un dominio personalizado; ya hablaremos de eso más adelante). A modo de ejemplo, si creáramos un proyecto con los datos que ves en la captura, la url sería algo como: https://unused-project-name.firebaseapp.com.

Una vez creado, solo tienes que seguir las instrucciones que aparecen dentro de la sección “Hosting”.

npm install -g firebase-tools
firebase login
firebase init

Termina de configurar Firebase desde la consola y ya tendrás tu hosting listo para recibir tu código. Hacerlo no podía ser más sencillo:

firebase deploy

Bonus Tip: conecta tu dominio

La url que nos ofrece Firebase, aunque funcional, no es bonita. Si dispones de un dominio, Firebase nos ofrece la posibilidad de conectarlo. Pulsa el botón “Conectar dominio” y sigue las instrucciones en pantalla.

Listo; más sencillo imposible. ¡Ah! Una cosa más: Firebase Hosting nos ofrece un certificado gratuito https. Tanto si usamos un dominio propio como si te quedas con la dirección por defecto, Firebase se encargará de todo y nuestro sitio siempre será “https”.

En futuros post hablaré de cómo alojando nuestro código gratuitamente en Bitbucket, y gracias a CircleCI, podremos publicar todos los cambios en Firebase de forma automática.