Hoy vamos a publicar la web que creamos en el post anterior con Nuxt.js en GitHub Pages.
Primero de todo, he de decir que al principio he seguido esta guía que está en la documentación de Nuxt.js. En principio, iba a ser la que iba a explicar en este post, pero estaba siguiendo los pasos que pone en la guía y llegado el momento de ejecutar el comando que sube el proyecto a GitHub ( npm run deploy a través del paquete push-dir) y no me ha funcionado. Me saltaba un error por consola. He estado mirando en las issues del repositorio del paquete push-dir para ver si a alguien le pasaba, ya que no sabía (y sigo sin saber) a que era debido, pero no he conseguido ni encontrar nada, ni solventarlo. Así que me ha tocado buscar una alternativa y es la que voy a explicar en este post.
Nota: Que quede claro, que a mi no me haya funcionado por cualquier cosa, no quiere decir que a vosotros no os vaya funcionar. Probadlo! Está muy bien explicada y es muy sencilla, y si os funciona, pues perfecto.
Yo voy a seguir esta guía que nos indica como subir a la rama gh-pages de nuestro repositorio (que es donde van las páginas alojadas en GitHub Pages), archivos o directorios que se encuentren en el directorio dist de la rama master (la principal) de nuestro repositorio. En Nuxt.js, cuando ejecutas el comando npm run generate , nos genera nuestra web estática y nos la pone en un directorio dist, por tanto, esta guía ya nos sirve. Ahora veremos todo ésto!
Vamos a empezar! Partimos de que ya debes de tener un repositorio creado.
Vamos a generar nuestra web estática con este comando:
|
1 |
npm run generate |
Esto lo que hará será crearnos un directorio dist con nuestra web estática dentro.
Ahora tenemos que ir al archivo nuxt.config.js y añadir este código:
|
1 2 3 4 5 6 |
module.exports = { ... router: { base: '/vuejs-2-series/' } } |
Con este código indicamos cuál será la base de nuestra URL, en mi caso será esa. Si no añadimos este código, las rutas de los links no serán las correctas.
Subimos todo el código al repositorio, yo utilizo GitHub Desktop, ya que me facilita mucho las cosas. Tú puedes hacerlo como quieras, si quieres hacerlo por consola, puedes mirar como hacerlo en este enlace.
Una vez ya tenemos todo el código subido, vamos al archivo .gitignore y debemos comentar una línea. En este archivo se indican los archivos o directorios que queramos que git ignore a la hora de subir el repositorio:
|
1 2 3 4 |
... # Nuxt generate #dist |
Ésto es para que el directorio dist se suba al repositorio y no lo ignore.
Añadimos el directorio dist, hacemos commit y vamos a la raíz del directorio:
|
1 2 3 |
git add dist && git commit -m "Dist folder" cd .. |
Y desde la raíz del directorio, ejecutamos este comando:
|
1 |
git subtree push --prefix 013-nuxtjs-github-pages/dist origin gh-pages |
En mi caso sería así, adáptalo según tu estructura de directorios.
Y con esto ya se nos habrá generado la rama gh-pages y si entramos a https://<user>.github.io/<project>/ ya veremos la web.
Como puedes ver esta forma es bastante más liosa que la otra. Si alguien tiene alguna idea de la razón por la que no me funciona la otra manera, que lo ponga en los comentarios, sería de gran ayuda, muchas gracias.
Para ver mi ejemplo, puedes entrar en https://groloop.github.io/vuejs-2-series/.
-
– https://nuxtjs.org/faq/github-pages/
– https://nuxtjs.org/api/configuration-router/
– https://gist.github.com/cobyism/4730490
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR