Si estás desarrollando una aplicación de Nuxt.js y deseas publicarla en GitHub Pages, es posible que te hayas preguntado cómo implementarla. En este tutorial, te guiaré a través del proceso de configuración de GitHub Actions para implementar automáticamente tu aplicación de Nuxt.js en GitHub Pages cada vez que realices un push a la rama principal de tu repositorio.

Antes de comenzar, asegúrate de que tu aplicación de Nuxt.js esté lista para implementar en GitHub Pages. Para hacerlo, sigue los siguientes pasos:

• Abre el archivo nuxt.config.js y agrega la siguiente línea dentro del objeto module.exports:

module.exports = {
  // ...
  generate: {
    fallback: true
  }
  // ...
}

Esta línea asegurará que se genere una página de error personalizada para cualquier URL que no esté en tu aplicación de Nuxt.js.

• Abre el archivo package.json y agrega la siguiente línea dentro del objeto scripts:

"deploy": "npm run generate && gh-pages -d dist"

Esta línea asegurará que, cuando ejecutes el comando npm run deploy, se generen los archivos de construcción de tu aplicación y se publiquen en la rama gh-pages.

• Asegúrate de tener el paquete gh-pages instalado en tu proyecto de Nuxt.js. Para hacerlo, ejecuta el siguiente comando en la terminal:

npm install gh-pages --save-dev

Ahora, con tu aplicación de Nuxt.js lista para implementar, podemos comenzar a configurar GitHub Actions.

• Abre la pestaña "Actions" de tu repositorio en GitHub.
• Haz clic en el botón "Set up a workflow yourself" para crear un nuevo archivo de configuración de GitHub Actions.
• Pega el siguiente código en el archivo main.yml:

name: Deploy to GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Set up Node.js
      uses: actions/setup-node@v2.4.4
      with:
        node-version: '16.x'
    - name: Install dependencies
      run: npm install
    - name: Build
      run: npm run generate
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
      with:
        deploy_key: ${{ secrets.GH_PAGES_DEPLOY_KEY }}
        publish_dir: ./dist

Este archivo de configuración especifica que queremos implementar nuestra aplicación en GitHub Pages cada vez que se realiza un push a la rama main del repositorio. El trabajo deploy se ejecutará en una máquina virtual de Ubuntu, que instalará Node.js, las dependencias de nuestra aplicación, generará los archivos de construcción y los publicará en la rama gh-pages utilizando la clave de implementación de GitHub Pages.

• Para que GitHub Actions pueda acceder a la clave de implementación de GitHub Pages, debemos configurar un secreto en nuestro repositorio. Para hacerlo, ve a la pestaña "Settings" de tu repositorio, haz clic en "Secrets" y luego en "New repository secret". En el campo "Name", introduce "DEPLOY_KEY" y en el campo "Value", pega la clave privada que generaste anteriormente. Luego, haz clic en "Add secret" para guardar la configuración.

Después de configurar el secreto, debemos modificar el archivo main.yml para que GitHub Actions pueda utilizarlo en la implementación de nuestra aplicación. En la sección "env", agregamos la siguiente variable de entorno:

env:
  DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}

Esto le dice a GitHub Actions que la clave de implementación está disponible como la variable de entorno "DEPLOY_KEY", y que debe usarla en el paso de implementación.

Por último, en la sección de implementación, agregamos los siguientes pasos:

- name: Install dependencies
  run: npm ci

- name: Build application
  run: npm run generate

- name: Deploy to GitHub Pages
  uses: peaceiris/actions-gh-pages@v3
  with:
    personal_token: ${{ secrets.PERSONAL_TOKEN }}
    deploy_key: ${{ env.DEPLOY_KEY }}
    publish_dir: ./dist/

En el primer paso, instalamos las dependencias de nuestra aplicación con el comando "npm ci". En el segundo paso, generamos los archivos de construcción con el comando "npm run generate". Y en el tercer paso, utilizamos la acción "peaceiris/actions-gh-pages@v3" para implementar la aplicación en GitHub Pages.

En el paso de implementación, debemos especificar dos variables: "personal_token" y "deploy_key". La variable "personal_token" es el token de acceso personal que generamos anteriormente, y la variable "deploy_key" es la clave privada que configuramos como secreto en nuestro repositorio. También debemos especificar la ruta del directorio de implementación con la variable "publish_dir".

Guarda los cambios en el archivo main.yml y haz un commit y un push a tu repositorio para que GitHub Actions comience a implementar tu aplicación en GitHub Pages. Después de unos minutos, podrás ver tu aplicación en línea en la URL que configuraste anteriormente.

¡Felicitaciones! Ahora has implementado tu aplicación de Nuxt.js en GitHub Pages utilizando GitHub Actions. Este es un gran logro que te ayudará a compartir tu trabajo con el mundo. ¡Sigue adelante y sigue construyendo cosas increíbles!