Nuxt es un framework web basado en Vue.js, Node.js, Webpack y Babel.js. Viene a solucionar el tema de las configuraciones, que eran mucho más complicadas con Vue.js, ya que hace que este proceso sea realmente fácil y muy sencillo.

En este artículo te enseñaré a desplegar gratuitamente un proyecto hecho con Nuxt.js directamente a GitHub pages.

Creando la aplicación

Creamos la aplicación que deplegaremos, para ello instalamos create-nuxt-app, que se encargará de generar nuestros proyectos.

npm install -g --save create-nuxt-app
create-nuxt-app gdeploy
cd gdeploy
npm run dev

Una vez hecho esto, la aplicación estará corriendo en localhost:3000.

GitHub te permite desplegar una página estática por cada repositorio que tengas. Así que lo primero será crear un repo.

Una vez creado ejecutamos, subimos nuestro primer commit:

echo "# project" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/<username>/<project-name>.git
git push -u origin main

Configurando Nuxt

Si tienes un dominio propio, puedes crear el archivo CNAME en la carpeta static.

Lo primero de todo es configurar nuxt.config.js. Debes especificar de la siguiente manera.

export default {
  target: 'static'
}

Si no posees un dominio, el proyecto se desplegará en http://<username>.github.io/<repository-name>, por lo que debemos configurar el router e indicar como base de url el nombre del repositorio.

export default {
  target: 'static',
  router: {
    base: '/<repository-name>/'
  }
}

Instalamos la librería push-dir que nos permitirá realizar el deploy.

npm install push-dir --save-dev

Una vez instalada, editamos nuestro package.json y agregamos el comando deploy:

"scripts": {
  "dev": "nuxt",
  "generate": "nuxt generate",
  "start": "nuxt start",
  "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
}

Subimos nuestros cambios a GitHub en forma de commit:

git add .
git commit -m "improve configuration"
git push origin main

Desplegando aplicación

Nuxt.js, al igual que la mayoría de los frameworks modernos, te da la posibilidad de compilar en un sitio web estático todo el proyecto; lo que lo hace perfecto para desplegarlo en plataformas que brindan hosting gratis para frontend.

Para generar tu sitio estático ejecutamos:

npm run generate

Que creará una carpeta dist en el root del proyecto.

Ahora hacemos uso del comando que configuramos antes para desplegar el proyecto.

npm run deploy

Y ya está, debes esperar unos pocos minutos a que GitHub automáticamente configure todo. El sitio estará online bajo la url: http://<username>.github.io/<repository-name>.

Espero este artículo haya sido de tu agrado. Cualquier sugerencia o duda déjame saber en los comentarios.

Keep Calm And Drink Binary Coffee