Cómo publicar una aplicación Vue en GitHub Pages

En este tutorial vamos a explicar cómo puedes publicar una aplicación creada con Vue en GitHub Pages. De este modo podrás ahorrarte cuenta de hosting y la configuración de tu servidor, siendo un lugar ideal para subir documentaciones o aplicaciones de demostración.

Antes de nada, instala Git si no está instalado todavía en tus sistema. Si es la primera vez que usas Git, es recomendable que consultes el tutorial de introducción a Git.

Configuración inicial

Vamos a partir de que todavía no has creado el repositorio en GitHub ni has inicializado el repositorio local. Si ya lo has hecho, sáltate estos primeros pasos y continúa en la sección en la que hacemos el deploy de la aplicación.

Para crear el repositorio, accede accede a tu cuenta de GitHub y crea un repositorio vacío para tu aplicación que no incluya ningún archivo. En mi caso, dado que mi nombre de usuario es neoguias y el de mi repositorio tutorial-vue, el repositorio estará en esta URL:

https://github.com/neoguias/tutorial-vue

Tras crear el repositorio accede al directorio de tu aplicación Vue usando la línea de comandos y sigue estos pasos:

1. Inicializa el repositorio de Git con este comando:

   git add .

2. Ahora agrega el repositorio que has creado en GitHub como origen, reemplazando usuario por tu nombre de usuario en GitHub y nombre-repositorio por el nombre de tu repositorio:

   git remote add origin https://github.com/usuario/nombre-repositorio

3. Luego haz un commit de los archivos de tu proyecto:

   git commit -m "Primer commit"

4. Y finalmente haz un push desde el repositorio local hasta la rama main del repositorio en GitHub:

   git push -u origin main

Con esto ya tendremos el código del proyecto en GitHub.

Deploy en GitHub Pages

Cuando compilas una aplicación Vue, a diferencia de React, el directorio por defecto es el directorio /dist, por lo que lo tendremos que enviar al repositorio. Para ello necesitaremos crear una nueva rama en la que agregaremos ciertos cambios a la configuración de Vue. Para desplegar la aplicación en GitHub Pages sigue los pasos que ves a continuación:

1. Primero debes crear una nueva rama a la que llamaremos gh-pages:

   git checkout -b gh-pages

2. Seguidamente, ya en la nueva rama, edita el archivo .gitignore y elimina del mismo  la línea /dist, de modo que sea posible enviar este directorio a GitHub.
3. A continuación debes crear el archivo vue.config.js en el directorio raíz del proyecto, de modo que podamos establecer las opciones de compilación de Vue. Debes establecer el directorio público en el que estarán los archivos del proyecto. El directorio, una vez esté el proyecto en GitHub Pages, tendrá el mismo nombre que el repositorio asociado, por lo que debes agregar lo siguiente, reemplazando nombre-repositorio por el nombre de tu repositorio en GitHub:

   module.exports = {
     publicPath: '/nombre-repositorio',
   }

4. Ahora ya puedes hacer un build del proyecto para generar el directorio /dist. Para ello ejecuta uno de estos dos comandos, según uses el gestor de paquetes NPM o el gestor de paquetes Yarn:

   # NPM
   npm run build
   
   #Yarn
   yarn build

5. Ahora debes agregar el directorio /dist al repositorio ejecutando este comando:

   git add dist

6. Luego haz un commit de los cambios realizados:

   git commit -m "gh-pages commit"

7. Finalmente haz un push de la rama gh-pages a GitHub, agregando el prefijo dist:

   git subtree push --prefix dist origin gh-pages

8. Y ya has terminado. GitHub publicará la página automáticamente.

Si ahora accedes a la URL https://usuario.github.io/nombre-repositorio, reemplazando usuario por tu nombre de usuario en GitHub y nombre-repositorio por el nombre que le hayas dado al repositorio deberías ver la página publicada.

En este enlace puedes ver una aplicación de demostración desarrollada con Vue funcionando en GitHub Pages.

Y esto ha sido todo.

---