Regresar

Cómo publicar un sitio web estático generado por Nuxt.js en GitHub Pages

por , 13-Mar-2023

Si has creado un sitio web estático utilizando Nuxt.js y quieres publicarlo en GitHub Pages, puedes utilizar la herramienta gh-pages para hacerlo de forma sencilla. En esta entrada de blog, te explicaré cómo hacerlo.

Paso 1: Instalar la herramienta gh-pages

Lo primero que debes hacer es instalar la herramienta gh-pages. Puedes hacerlo ejecutando el siguiente comando en la terminal de tu proyecto:

npm install gh-pages --save-dev

Esto instalará la herramienta gh-pages en tu proyecto y la añadirá a la sección devDependencies de tu archivo package.json.

Paso 2: Generar el sitio web estático con Nuxt.js

A continuación, debes generar el sitio web estático con Nuxt.js. Para hacerlo, debes ejecutar el siguiente comando en la terminal de tu proyecto:

nuxt generate

Este comando generará el sitio web estático en la carpeta dist de tu proyecto.

Paso 3: Configurar la herramienta gh-pages

Antes de poder publicar el sitio web estático en GitHub Pages, debes configurar la herramienta gh-pages. Para hacerlo, debes añadir las siguientes líneas a la sección scripts de tu archivo package.json:

"deploy": "gh-pages -d dist",
"predeploy": "npm run generate"

Esto configurará la herramienta gh-pages para que publique el sitio web estático desde la carpeta dist. La línea predeploy ejecutará el comando nuxt generate antes de ejecutar el comando gh-pages, de forma que el sitio web estático siempre esté actualizado antes de publicarlo.

Paso 4: Publicar el sitio web estático en GitHub Pages

Por último, puedes publicar el sitio web estático en GitHub Pages ejecutando el siguiente comando en la terminal de tu proyecto:

npm run deploy

Este comando publicará el sitio web estático en la rama gh-pages de tu repositorio de GitHub.

Conclusión

Con la herramienta gh-pages, publicar un sitio web estático generado por Nuxt.js en GitHub Pages es muy sencillo. Siguiendo estos sencillos pasos, podrás publicar tu sitio web en GitHub Pages en pocos minutos.

Espero que esta entrada de blog te haya resultado útil. Si tienes alguna pregunta o comentario, no dudes en dejármelo en los comentarios. ¡Gracias por leer!