Desplegara Nuxt 3 en GitHub Pages | Programador Web Valencia

Desplegara Nuxt 3 en GitHub Pages

2 minutos

Nuxt

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.

GitHub Pages

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.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me invitas a un café? ☕

Puedes hacerlo usando el terminal.

ssh customer@andros.dev -p 5555

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario

Tal vez también te interese...