Crea tu Sitio Web con Nuxt.js y GitHub Pages

Que es Nuxt.js ?

Nuxt.js es un framework que nos permite crear aplicaciones universales utilizando Vue.js. Se enfoca en renderizar y compilar UI tanto del cliente como del servidor y determinar cuando corresponde realizar cada tipo de renderización.

Este framework combina muchas de las tecnologías mas utilizadas para el desarrollo web: Node.js, Vue.js, Webpack y Babel.

Lo importante para nosotros (y por eso este post), es que también nos permite generar versiones compiladas totalmente estáticas de nuestro proyecto.

Recientemente empece el desarrollo de mi nuevo sitio web utilizando Nuxt.js y me pareció genial la facilidad con la que pude hacerlo (créeme que es fácil, incluso aunque no sepas Vue.js). No solo eso, sino también poder aprovechar el hosting de GitHub Pages usando el proceso de generate de Nuxt.js para crear versiones estáticas.

Los resultados son muy buenos, si bien es un sitio sencillo tiene muy buena performance y anda muy muy rápido, (obviamente porque “no hay” compilación en tiempo real).

En este post te voy a mostrar como en 10 minutos podes crear tu propio sitio web estático con Nuxt.js y subirlo a GitHub Pages 😮

Como crear tu sitio usando Nuxt.js

Lo primero que debes hacer es instalar vue-cli, es la herramienta oficial para crear la estructura base de todos tus proyectos Vue.js (a través de distintos templates).

1. Instalar vue-cli 💻

El CLI es un modulo de npm, para instalarlo simplemente abri la terminal y escribí el siguiente comando (debes tener instalado Node.js y npm).

$ npm i -g vue-cli

2. Generar el proyecto 🏗

Una vez instalado el CLI, podemos usar el comando $ vue init [nombre-template] [nombre-proyecto] para generar el proyecto, utilizando el template de Nuxt.js.

$ vue init nuxt/starter mi-sitio

3. Instalar dependencias 🔩

Con el proyecto generado debemos navegar dentro del mismo para instalar las dependencias de npm.

$ cd mi-sitio
$ npm i

Es momento de abrir el editor de texto y generar el contenido del sitio web. En realidad ya tenemos el contenido base que necesitamos, el template nos crea una especie de hello world! con un sitio web funcional ya configurado para que sea publicado. Simplemente tenemos que agregar nuestro contenido, assets, paginas, etc.

Para probar tu sitio localmente podes hacerlo corriendo el comando $ npm run dev.

Este post no pretende explicar como utilizar Nuxt.js y todas sus características, pero si es importante aclarar que cada archivo .vue que agregamos dentro de la carpeta pages se compilará automáticamente como una nueva URL (página) de nuestro sitio web. Como podes ver, dentro de pages hay un archivo llamado index.vue que corresponde al path default del sitio: por ejemplo mi-sitio.com. Pero si creamos otro archivo llamado about.vue vamos a poder navegar esa página con el path mi-sitio.com/about.

Pueden encontrar mas información sobre la estructura de archivos del proyecto en este link. Es fácil de seguir y rápidamente van a aprender el propósito de cada directorio y como seguir creando contenido.

4. Iniciar el repositorio 🚀

Antes de hacer el deploy tenemos que realizar los típicos pasos que seguimos cada vez que trabajamos con un proyecto en GitHub:

• Crear el repositorio en GitHub
• Inicializar el repositorio local: $ git init
• Enlazar el repositorio de GitHub con el local de nuestra computadora: $ git remote add origin https://github.com/usuario/repositorio.git
• Agregar nuestros cambios locales al index: $ git add .
• Commitear los cambios: $ git commit -m "Inicio del Proyecto 🚀 "
• Subir los cambios al repositorio: $ git push origin master

5. Deploy a GitHub Pages 🚢

Para realizar el deploy vamos a utilizar un modulo de npm llamado push-dir.

Recuerden que vamos a estar trabajando con contenido estático que se genera por fuera del repositorio (sera ignorado por git). Ese mismo contenido (ignorado) es el que queremos subir a otro branch (llamado gh-pages) para luego publicar en GitHub. Hacer este procedimiento de forma manual es un tanto engorroso, es por eso que vamos a automatizarlo usando push-dir.

Para que se entienda el proceso que vamos automatizar consta de:

• Generar la version estática de nuestro sitio compilando con Nuxt.js
• Generar un branch de git llamado gh-pages (previamente borrarlo si ya existe)
• Publicar dentro de ese branch SOLO los archivos generados por el proceso de compilación Nuxt.js

Si nunca escuchaste hablar de GitHub Pages o no entendés porque creamos un branch llamado gh-pages te recomiendo que primero leas este post.

Lo que nos queda por hacer es agregar un script de npm llamado deploy para ejecutar el proceso de publicación del sitio. Abrimos el archivo package.json, localizamos le sección scripts y agregamos lo siguiente:

"scripts": {
  // otros scripts (no borrarlos)
  
  "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
}

El comando indica que queremos subir el directorio dist (contiene la salida del proceso de compilación) y subirlo al branch gh-pages. Ahora simplemente nos queda compilar nuestro sitio estático y publicarlo en GitHub.

1. Corremos el proceso de compilación

$ npm run generate

2. Corremos el proceso de deploy

$ npm run deploy

Tenés que tener en cuenta que ambos comandos debes correrlos cada vez que realices cambios en el proyecto y quieras hacerlos públicos.

6. Activar GitHub Page ✅

Como último paso, nos queda entrar a GitHub para activar dentro de nuestro repositorio la funcionalidad de GitHub pages:

1. Entramos al sitio de nuestro repositorio
2. Vamos a la opción de Settings
3. Localizamos la sección de GitHub Pages
4. Seleccionamos el branch gh-pages y listo.

Dentro de la misma sección de configuración vas a poder encontrar el link público para acceder al sitio.

Listo, ya tenés tu sitio web funcionando 👏👏👏

Solo te queda aprender un poco de Nuxt.js para dominarlo y sacarle el máximo provecho al framework. Te dejo el repositorio de mi sitio web, el cual cree siguiendo esta metodología.

Mi nombre es Ignacio Anaya, soy desarrollador Full Stack, Mentor y Embajador de AuthO. Si te interesa lo que escribo o tenés preguntas, no dejes de seguirme en @ianaya89 ✍️.