Binary Coffee

Despliega Nuxt a GitHub Pages en 2020

github vue
Nuxt es un framework web basado en Vue.js, Node.js, Webpack y Babel.js. Viene a solucionar el tema de las configuraciones, que eran mucho m√°s complicadas con Vue.js, ya que hace que este proceso sea realmente f√°cil y muy sencillo. En este art√≠culo te ense√Īar√© a desplegar gratuitamente un proyecto hecho con Nuxt.js directamente a GitHub pages. ## Creando la aplicaci√≥n Creamos la aplicaci√≥n que deplegaremos, para ello instalamos create-nuxt-app, que se encargar√° de generar nuestros proyectos. ``` npm install -g --save create-nuxt-app create-nuxt-app gdeploy cd gdeploy npm run dev ``` Una vez hecho esto, la aplicaci√≥n estar√° corriendo en `localhost:3000`. GitHub te permite desplegar una p√°gina est√°tica por cada repositorio que tengas. As√≠ que lo primero ser√° [crear un repo](https://repo.new). Una vez creado ejecutamos, subimos nuestro primer commit: ``` echo "# project" >> README.md git init git add README.md git commit -m "first commit" git branch -M main git remote add origin https://github.com/<username>/<project-name>.git git push -u origin main ``` ## Configurando Nuxt Si tienes un dominio propio, puedes crear el archivo `CNAME` en la carpeta `static`. Lo primero de todo es configurar `nuxt.config.js`. Debes especificar de la siguiente manera. ``` export default { target: 'static' } ``` Si no posees un dominio, el proyecto se desplegar√° en `http://<username>.github.io/<repository-name>`, por lo que debemos configurar el router e indicar como base de url el nombre del repositorio. ``` export default { target: 'static', router: { base: '/<repository-name>/' } } ``` Instalamos la librer√≠a `push-dir` que nos permitir√° realizar el deploy. ``` npm install push-dir --save-dev ``` Una vez instalada, editamos nuestro `package.json` y agregamos el comando `deploy`: ``` "scripts": { "dev": "nuxt", "generate": "nuxt generate", "start": "nuxt start", "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup" } ``` Subimos nuestros cambios a GitHub en forma de commit: ``` git add . git commit -m "improve configuration" git push origin main ``` ## Desplegando aplicaci√≥n Nuxt.js, al igual que la mayor√≠a de los frameworks modernos, te da la posibilidad de compilar en un sitio web est√°tico todo el proyecto; lo que lo hace perfecto para desplegarlo en plataformas que brindan [hosting gratis para frontend](https://binary-coffee.dev/post/hosting-gratis). Para generar tu sitio est√°tico ejecutamos: ``` npm run generate ``` Que crear√° una carpeta `dist` en el root del proyecto. Ahora hacemos uso del comando que configuramos antes para desplegar el proyecto. ``` npm run deploy ``` Y ya est√°, debes esperar unos pocos minutos a que GitHub autom√°ticamente configure todo. El sitio estar√° online bajo la url: `http://<username>.github.io/<repository-name>`. Espero este art√≠culo haya sido de tu agrado. Cualquier sugerencia o duda d√©jame saber en los comentarios. > Keep Calm And Drink Binary Coffee
Opiniones