Recientemente, decidí utilizar GitHub Actions para automatizar la implementación de mi aplicación de NuxtJS 3 en GitHub Pages. Aunque había utilizado GitHub Actions en proyectos anteriores, nunca lo había usado con NuxtJS 3. Como resultado, me encontré con varios problemas mientras intentaba implementar mi aplicación en GitHub Pages. En esta publicación de blog, compartiré algunos de los problemas que enfrenté y cómo los resolví.

Problema 1: Configuración incorrecta de GitHub Actions

Mi primer problema fue que no configuré correctamente mi archivo main.yml para que GitHub Actions ejecutara los pasos necesarios para implementar mi aplicación en GitHub Pages. No me di cuenta de que la mayoría de los pasos necesarios, como instalar las dependencias y generar los archivos de construcción, debían ser configurados en el archivo main.yml.

La solución para este problema fue agregar los pasos necesarios en el archivo main.yml para que GitHub Actions pudiera construir y publicar mi aplicación. Utilicé los siguientes pasos en mi archivo main.yml:

name: Deploy to GitHub Pages

on:
    push:
        branches:
            - main

jobs:
    deploy:
        runs-on: ubuntu-latest
        steps:
            - name: Checkout code
              uses: actions/checkout@v2

            - name: Install dependencies
              run: npm install

            - name: Build
              run: npm run generate

            - name: Deploy
              uses: peaceiris/actions-gh-pages@v3
              with:
               personal_token: ${{ secrets.ACCESS_TOKEN }}
               external_repository: freebot/freebot.github.io
               publish_branch: gh-pages
               publish_dir: .output/public

Problema 2: El archivo package.json no estaba configurado correctamente

Después de solucionar el primer problema, me encontré con otro problema. Cuando GitHub Actions intentó construir mi aplicación, obtuvo un error que decía que el comando 'nuxt build' no estaba definido en el archivo package.json.

La solución para este problema fue agregar el comando 'nuxt build' en el archivo package.json y asegurarme de que apuntara al directorio correcto. En mi caso, tuve que configurar "nuxt build" para que apuntara a "dist". Creo que el programa luego pasa los archivos a ".output/public".

Problema 3: Las acciones de JamesIves no funcionaron

Después de solucionar el problema anterior, intenté usar las acciones de JamesIves para implementar mi aplicación en GitHub Pages. Sin embargo, estas acciones no funcionaron y recibí errores en mi implementación.

La solución para este problema fue usar la acción "peaceiris/actions-gh-pages@v3". Esta acción funcionó correctamente y me permitió implementar mi aplicación de NuxtJS 3 en GitHub Pages sin problemas.

Conclusión

En resumen, enfrenté varios problemas al intentar implementar mi aplicación de NuxtJS 3 en GitHub Pages usando GitHub Actions. Sin embargo, después de solucionar estos problemas, pude publicar mi aplicación en GitHub Pages con éxito. Espero que al compartir mis problemas y soluciones, pueda ayudar a otros desarrolladores que enfrentan problemas similares al implementar sus aplicaciones en GitHub Pages con GitHub Actions.

Si estás utilizando NuxtJS 3 en tu proyecto y quieresimplementar tu aplicación en GitHub Pages con GitHub Actions, asegúrate de seguir las siguientes recomendaciones:

• Configura correctamente tu archivo main.yml: Asegúrate de incluir todos los pasos necesarios para construir y publicar tu aplicación. En particular, verifica que el comando para construir tu aplicación sea el correcto y que la ruta para la publicación sea la adecuada.
• Verifica que tu archivo nuxt.config.js esté configurado correctamente: Asegúrate de que la propiedad generate.dir esté configurada correctamente. En particular, asegúrate de que apunte al directorio correcto donde NuxtJS 3 genera los archivos de construcción para tu aplicación.
• Publica en la rama gh-pages en lugar de la rama master: Ten en cuenta que GitHub Pages cambió recientemente la rama predeterminada de master a main. Por lo tanto, debes publicar en la rama gh-pages.

En general, utilizar GitHub Actions para implementar tus aplicaciones en GitHub Pages es una gran manera de automatizar el proceso y ahorrar tiempo. Aunque puedes enfrentar algunos problemas al principio, con un poco de solución de problemas y paciencia, puedes hacer que funcione para tu proyecto.

Espero que mi experiencia pueda ayudarte en tu proyecto y que puedas evitar algunos de los problemas que enfrenté. ¡Buena suerte en tus implementaciones de GitHub Pages con GitHub Actions!