Desplegara Nuxt 3 en GitHub Pages

En este tutorial aprenderás cómo desplegar un sitio web estático generado con Nuxt.js en GitHub Pages. Para ello, te enseñaremos paso a paso cómo eliminar la carpeta existente docs, configurar el prefijo del sitio, generar el sitio estático, moverlo a la carpeta docs, evitar que Jekyll ignore _nuxt, subir tus cambios y finalmente, activar GitHub Pages. ¡Comencemos!

1. Borra, en caso que existiera, la carpeta docs

rm -rf docs

2. Indica el prefijo del sitio

Supongamos que la ruta al repositorio que quiero desplegar es https://github.com/tanrax/idegram. Por lo tanto el nombre de mi repositorio es idegram, y el prefijo que añadirá GitHub Pages será /idegram/. Debo indicárselo a Nuxt.

Editamos el archivo nuxt.config.ts y añadimos lo siguiente:

export default defineNuxtConfig({
    app: {
        baseURL: '/idegram/',
     }
 })

3. Genera tu sitio estático

npx nuxi generate

4. Mueve el sitio generado a la carpeta docs

mv .output/public docs

5. Evita que Jekyll ignore _nuxt

Jekyll es el generador estático que usa GitHub Pages para crear los sitios. Todo lo que empieza por un guión bajo es ignora, por lo tanto habrá que indicarle que no pase por alto la carpeta de Nuxt (_nuxt). Para ello tan solo hay que crear un archivo vacío llamado .nojekyll, haciendo que nunca llegue a ejecutarse dentro de docs.

touch docs/.nojekyll

6. Sube tus cambios

Realiza tu commit y push correspondiente. Incluye todos los cambios de la carpeta docs.

7. Activa GitHub Pages

En el repositorio de GitHub, pulsa en settings, después Pages, selecciona la rama main y selecciona la carpeta docs.

Guarda y espera a que se compile. Puedes ir refrescando la página donde te encuentras hasta que aparezca la url.

En conclusión, desplegar un sitio web estático generado con Nuxt.js en GitHub Pages es un proceso sencillo que requiere seguir unos pocos pasos. Una vez que se tiene el sitio generado y configurado correctamente, se puede activar GitHub Pages y compartir el sitio con el mundo. Espero que este tutorial haya sido útil para ti y que hayas podido desplegar tu sitio web estático sin problemas.