Enmilocalfunciona

Si estás pensando en crear un blog personal, al igual que me ha pasado a mí, me gustaría compartir contigo cómo lo he hecho con Vue.js y mostrarte los pasos que he seguido.

Vue.js

Lo primero de todo, cuando pensé en qué tecnologías usar, tenía claro que me apetecía conocer en profundidad Vue.js, así que comencé por donde todos deberíamos empezar con algo nuevo, con la documentación oficial.

Está muy bien explicada, y muchos de los conceptos son sencillos de entender, porque ya los conocemos de otros frameworks: componentes, propiedades, eventos, ciclos de vida, ...etc. Vue.js está fuertemente inspirado en Angular y React. Hasta tal punto que ng-if, *ngIf pasa a ser en Vue v-if.

Esa fue la primera sensación que tuve, todo me resultaba familiar. Tanto que, si ya has trabajado con Angular, puedes leerte la documentación de Vue.js en solo una tarde, y tener claros los conceptos más básicos. Lo recomiendo encarecidamente si aún tienes esa espinita de aprender Vue.

Vamos a comenzar instalando Vue CLI, recuerda tener instalado y actualizado Node.js con su versión LTS.

npm install -g @vue/cli-service-global  

Nuxt.js

Como bien sabrás y al igual que ocurre con Angular, el navegador tiene que ejecutar los scripts necesarios para cargar nuestro framework, evaluar nuestros componentes, interpretarlos y finalmente pintar el contenido en el navegador.

Pero claro, aquí tenemos un problema con el Search Engine Optimization (SEO) de nuestra página. El problema es, que básicamente el SEO para los crawlers, es básicamente nulo cuando hablamos de Single Page Application (SPA).

En muchas ocasiones, el SEO puede ser despreciable, bien porque nuestra aplicación esté dentro de una intranet o no porque no queramos ser indexados, pero en este caso, para nuestro blog es un motivo mas que razonable para preguntarnos: ¿Cómo puedo utilizar la potencia de un framework respetando el SEO de nuestra página?

Seguramente esa pregunta me llevaría a crear otro artículo explicando las diferentes técnicas que hay para mejorar el SEO de nuestra aplicación, pero en este caso entra en juego Nuxt.js , primo hermano de Next.js:

Nuxt.js nos permite crear aplicaciones universales, es decir, que la parte servidora renderice nuestra página y la sirva al cliente. Este proceso se conoce como Server Side Rendering o SSR. Algo muy útil en nuestro caso, porque necesitamos que cualquier crawler, cuando consulte cierta url, obtenga todo el html ya generado, listo para ser indexado.

Además tiene la opción de hacer un Prerendering de nuestras páginas cuando construimos nuestra aplicación, algo mucho mas aconsejable, ya que el coste de nuestro servidor se verá reducido ya que no tendrá que procesar y generar contenido, simplemente servirlo.

Este proceso de prerendering es el que he utilizado en mi blog. Construyo las páginas con el comando que ofrece Nuxt.js

npm run generate  

Esto me genera las páginas ya renderizadas en la carpeta dist/, listas para ser desplegadas.

Nuxt.js está implementado para trabajar con Vue.js y resulta muy sencillo empezar a trabajar con él. Si bien es cierto que tienes que tener en cuenta cómo se construye todo en Nuxt.js y te tocará echar otro vistazo a su documentación oficial. En ella veras que tiene un directorio específico para crear nuestras páginas, y ciertos procesos como la obtención de datos asíncronos, que sin entrar en detalle, es necesario que se hagan desde puntos marcados por Nuxt.js para su correcto funcionamiento.

Nuxt.js provee de una estructura y un scaffolding específico de nuestra aplicación, aunque los componentes reutilizables que usemos podemos organizarlos como queramos.

Vamos a crear nuestro proyecto

vue init nuxt-community/starter-template <PROYECT-NAME>  

cd <PROYECT-NAME>  
npm install  
npm run build  
npm run dev  

Desde este momento ya tienes todo lo necesario para empezar.

¿Donde alojo mi blog?

Donde quieras. En este caso yo he optado por la vía rápida y sencilla, delegar. Atención porque entra en juego Firebase, una herramienta muy potente de Google que probablemente muchos ya conozcan. Firebase te provee de un montón de cosas que aún he de reconocer que no he usado, pero si he usado 4 cosas fundamentales: Authentication, Hosting, Storage y Database.

Con estas 4 patas, firebase nos da todo lo necesario para, alojar nuestro sitio web, subir nuestras imágenes, hacer login y guardar nuestros post en base de datos. Lo mejor de todo, es que tiene un plan Spark gratuito al inicio de nuestro proyecto por el cual no pagaríamos nada hasta alcanzado cierto límite en cuanto a volúmenes de usuarios simultáneos, capacidad de disco, etc. Puedes consultar esos límites en su página oficial.

Una vez creada la cuenta de Firebase (que estará asociada con tu cuenta de Google) tendrás que crear un nuevo proyecto en Firebase, donde alojaremos tu aplicación.

Firebase-tools

Vamos a instalar las herramientas de Firebase para poder desplegar nuestra app en Firebase, para ello:

npm install -g firebase-tools  
firebase init  

Esto creará unos ficheros de configuración de Firebase. Puedes seguir el tutorial de instalación aquí.

Cuando tengamos todo configurado, podremos subir nuestra aplicación al hosting de firebase con:

firebase deploy  

Así de sencillo y en menos de 10 min.

Creando contenido

Ahora que ya tenemos todo lo necesario para desarrollar nuestro blog, probablemente te surja la pregunta de ¿cómo crear contenido de una manera sencilla y sin que el creador de contenido tenga que tirar una sola linea de código?

Vamos a usar un CMS, que nos permita crear contenido totalmente aislado de nuestro código, y con el cual comunicarnos para recibir datos y pintarlos en nuestra aplicación. Para esta tarea, se encargará Flamelink, un CMS que se integra con Firebase de una manera muy sencilla y nos permite crear esquemas de contenido, subir nuestras imágenes y crear nuestros post del blog.

En el momento que escribí este artículo Flamelink se encontraba en versión beta, pero cubría las necesidades que tenía.

Incluir Firebase a Nuxt.js

Ahora necesitaremos añadir la librería de Firebase para poder utilizarla desde Nuxt.js

npm install --save firebase  

Además, como habrás podido observar en la documentación de Nuxt.js, las librerías externas han de ser instaladas de una manera especial. Para ello vamos a crear un Plugin nuevo para cargar Firebase e inicializarlo.

Dentro de la carpeta plugins/, creamos el fichero firebase.js:

import * as firebase from 'firebase/app'  
import 'firebase/storage';  
import 'firebase/database';

let firebaseApp = null

const config = {  
  apiKey: 'XXXXXXXX',
  databaseURL: 'XXXXXXXX',
  projectId: 'XXXXXXXX',
  storageBucket: 'XXXXXXXX',
}

if(!firebase.apps.length) {  
 firebase.initializeApp(config)
}

const db = firebase.database()  
const storage = firebase.storage()

export { firebase, storage, db }  

Tendrás que rellenar tus datos propios de la tu cuenta y proyecto de Firebase. Este plugin básicamente está cargando Firebase, llamando a initializeApp con una configuración específica y está exportando firebase, storage, db para que puedan ser importadas dentro de nuestros componentes Vue. firebase contiene la instancia de firebase, storage tiene la instancia de almacenamiento (subida de media) y db tiene la instancia para hacer consultas o escrituras a base de datos de firebase.

Obtener posts con Firebase

Una vez tengas instalado Flamelink, siguiendo los pasos que se documentan en su página oficial, una vez te has registrado y enlazado tu cuenta de Firebase con Flamelink, ya podrás hacer peticiones para obtener tus recursos.

Para ello, en muchos casos, necesitamos hacer una petición en la parte servidora de Nuxt, que permita obtener información de Firebase para montar nuestro HTML y servirlo al navegador.

Nuxt nos facilita un método especial llamado asyncData, que será el lugar adecuado para:

• Hacer la petición a Firebase.
• Obtener los datos de nuestro post.
• Y pintar los datos en nuestro documento HTML que posteriormente enviaremos al navegador con toda la información necesaria que permitirá rellenar nuestros metas.

Dentro de nuestro componente Vue tendremos algo como ésto:

import { firebase, db } from '../plugins/firebase'

export default {  
  data: function () {
    return {
      posts: []
    }
  },
  async asyncData ({ params }) {
    let posts = []

    await db.ref('flamelink/environments/production/content/.../your-content')
      .orderByChild('id')
      .limitToLast(25)
      .once('value')
      .then((snapshot) => {
        posts = Object.values(snapshot.val())
      })

    return { posts }
  },
  ...
}

asyncData es un método del ciclo de vida que incorpora Nuxt.js, que nos permite realizar nuestras peticiones para obtener datos previamente a la creación de nuestro HTML.

En esta ocasión hemos utilizado async/await para la sincronía, pero podrías utilizar promesas igualmente. De tal manera que hasta que no recibamos los datos de firebase, no resolveremos el return con el objeto posts.

Modulos de Nuxt.js

La comunidad de Nuxt ha creado módulos muy interesantes para añadirlos a nuestra aplicación, entre ellos uno de Progressive Web Applications (PWA) y otro para crear nuestro sitemap de nuestra aplicación de manera dinámica:

Para incluirlos en nuestra aplicación, en el fichero de configuración nuxt.config.js puedes incluir dichos módulos y los que tu quieras añadir. Estos son los que yo utilicé:

  modules: [
    '@nuxtjs/sitemap',
    ['@nuxtjs/pwa', { meta: false }]
  ],

Lo más importante: el dominio

Ahora que ya tenemos todo, prepárate para buscar un buen nombre que te guste y no esté cogido. Probablemente tardes más en elegir el nombre que en implementar tu nuevo blog. Pero te alegrará saber que solo me he gastado 10$ en todo, y es únicamente el precio que pagué por el dominio público, además de unas semanas de mi tiempo disfrutando en su creación.

Espero que este post te haya resuelto algunas dudas. Me alegraría saber si has montado el tuyo, anímate y cuéntanos tu experiencia en los comentarios o a través de nuestra cuenta de Twitter.