Despliegue en GitHub Pages con Webpack
Contenido del curso
Webpack
Parcel
ESBuild
Rollup
Vite
Conclusiones
Despliegue en GitHub Pages con Webpack
Despliegue en GitHub Pages con Webpack
Contenido del curso
Misael Gomez
Leonardo Espejo
Felipe Muñoz Caceres
Rubén Ernesto Aragón Gil
Jeans Pierre Monrroy Caicedo
Oscar Cornejo
Rubén Ernesto Aragón Gil
Misael Gomez
Laura Roa
Emerson Cedeño
Kenneth Angulo L
Andres Badillo
Oscar Cornejo
Hugo Herrera
Johanna Marcela Orjuela Flórez
Brayan Lopez
Jefred Bedoya
Hugo Herrera
Rafael Barreto
Rodrigo Andre Gutierrez
Cristian Blandon
Kevin Correa
Néstor Raúl Guzmán Díaz
JeanCarlos Atoche Pascual
Johan Arena
Rubén Ernesto Aragón Gil
Yamid Noguera
Hector suarez
Jeans Pierre Monrroy Caicedo
npm install webpack-dev-server -D
ahora ya no es necesario descargar ese paquete, solo con:
"start": "webpack serve --mode development --open"
Gracias por la ayuda, no sabia como instalar el paquete
sí les aparece esto:
$ npm run deploy > webpack@1.0.0 deploy > gh-pages -d dist "gh-pages" no se reconoce como un comando interno o externo, programa o archivo por lotes ejecutable.
Agrega esto en tu terminal y luego da otra vez "npm run deploy"
npm i gh-pages
Otra solucion es enviando el archivo de manera remota con este comando git remote set-url command(usar link https)
No es necesario instalar otra dependencia para el error que mencionas, te recomiendo dejar tu script deploy de esta manera:
"deploy": "npx gh-pages -d dist"
Para agregar una descripción a este proyecto:
Hagan esto en html... quiten la etiqueta p y agreguen esto:
<article id="description" class="mt-2"> </article>
Vayan a main.js y agreguen:
const $name = document.querySelector('h1'); const $links = document.getElementById('links'); const $text = document.getElementById('description'); const data = { name: "tu nombre", nickname: "tu apodo", description: "la descrición de perfil", avatar: "...", social: [ { name: "twitter", url: "https://twitter.com/", username: "", }, { name: "instagram", url: "https://instagram.com/", username: "", }, ], links: [ { name: "Portafolio", url: "https://example.com/", color: "red", emoji: "📖", }, { name: "Redes Sociales", url: "https://example.com/", color: "yellow", emoji: "💬", }, ], footer: "Made by ? 🐮", }; const main = () => { let name = document.createTextNode(data?.name); let description = document.createTextNode(data?.description); let links = data?.links?.map((link) => { return `<div class="bg-${link.color}-200 px-4 py-5 w-full flex justify-between"> <a class="text-sm font-bold text-${link.color}-600 text-center hover:text-${link.color}-800 cursor-pointer" href="${link.url}" target="_blank"> ${link.name} </a> <span>${link.emoji}</span> </div>`; }).join(''); let newItem = document.createElement('section'); newItem.innerHTML = links; $text.appendChild(description) $links.appendChild(newItem); $name.appendChild(name); } main();
El resultado me quedo así
const $links = document.getElementById('links'); const $name = document.querySelector('h1'); const $description = document.getElementById('description') const $img2 = document.getElementById('img2'); const $text = document.getElementById('text') const data = { name: "Misael Gómez", nickname: "mgc", tecnologias: '#JavaScript, #npm, #Python, #React', description: "Soy un apasionado por la programación, continuamente estoy mejorando mis habilidades en el desarrollo web, me gusta compartir mis aprendizajes y crear proyectos en el área de finanzas y mis series favoritas", avatar: "https://pbs.twimg.com/profile_images/1534067141519069184/AyYQAI1b_400x400.jpg", social: [ { name: "twitter", url: "https://twitter.com/MisaelG51069440", username: "@MisaelG51069440", }, { name: "instagram", url: "https://www.instagram.com/misael.gmz.ctl/", username: "misael.gmz.ctl", }, ], links: [ { name: "platzi user", url: "https://platzi.com/p/misael.gomez1623/", color: "green", emoji: "🧑🚀", }, { name: "sitio web", url: "https://misael-gmez-cuautle.super.site/", color: "yellow", emoji: "📖", }, { name: "Youtube", url: "https://www.youtube.com/channel/UCtIUxzEyQN0DoZVwuuoLVag", color: "red", emoji: "💬", }, { name: "Twitter", url: "https://twitter.com/MisaelG51069440", color: "blue", emoji: "🐦", }, { name: "Instagram", url: "https://twitter.com/MisaelG51069440", color: "purple", emoji: "📷", }, ], footer: "Made with Love on México", }; const nombre = () =>{ let name = document.createTextNode(data?.name); let text =document.createTextNode(data?.tecnologias) $name.appendChild(name); $text.append(text) } const desc = () =>{ let description = document.createTextNode(data?.description); $description.appendChild(description) } const imagen = () =>{ let img = document.createElement('img') img.className = 'rounded-lg w-48' img.src = 'https://pbs.twimg.com/profile_images/1534067141519069184/AyYQAI1b_400x400.jpg' $img2.appendChild(img) } const main = () => { let links = data?.links?.map((link) => { return `<div class="bg-${link.color}-200 px-4 py-5 w-full flex justify-between"> <a class="text-sm font-bold text-${link.color}-600 text-center hover:text-${link.color}-800 cursor-pointer" href="${link.url}" target="_blank"> ${link.name} </a> <span>${link.emoji}</span> </div>`; }).join(''); let newItem = document.createElement("section"); newItem.innerHTML = links; $links.appendChild(newItem); } nombre(); imagen(); desc(); main();
Hola! Gracias por compartir tu codigo! podrias por favor compartir el html tambien para poder ver como lo conectaste ahi? :)
si al momento de ejecutar el npm run start les salta algún error, chequen el detalle ya que es altamente probable (si no tienen typos y han seguido al pie de la letra todo) que deban actualizar el nodejs que tienen
¿Cuándo debo ejecutar el comando build?
Debes ejecutar el comando npm run build exclusivamente cuando tu proyecto esté terminado, probado y listo para salir al mundo real. Piensa en tu código de desarrollo como un borrador lleno de notas al margen, espacios en blanco para facilitar la lectura y nombres de variables descriptivos. Todo esto es genial para ti, pero terrible para el rendimiento de un navegador. Al ejecutar el script de build, Webpack se pone el traje de optimizador: toma todo ese código legible para humanos, elimina los espacios innecesarios, acorta los nombres de las variables y empaqueta todo en archivos minificados dentro de la carpeta dist. El resultado es una versión ultraligera y de alto rendimiento de tu aplicación, diseñada específicamente para que los usuarios la descarguen en milisegundos. Mientras que start es tu taller de trabajo diario, build es el proceso de empaquetar tu producto final en una caja sellada y optimizada para su envío a producción.
Les comparto:
Mi landing page y mi repositorio 😉
Agregaría el favicon o sacaría la referencia del archivo index.html
Añadí Whatsapp y TikTok a las redes sociales
Cuando se configura el archivo de webpack es importante tener cuidado con de escribir bien los nombres, a mi me paso que escribí plubic en vez de public, me generó un error y no entendía bien a que se debía hasta que después de un rato lo encontré.
Configuración de Entorno con Webpack
webpack-dev-server como dependencia de desarrollo para habilitar un entorno local con recarga en tiempo real.package.json:
build: Ejecuta webpack --mode production para optimizar y minificar el código para producción.start: Ejecuta webpack-dev-server para depuración y visualización inmediata de cambios.Despliegue en GitHub Pages
gh-pages para publicar el contenido de la carpeta dist directamente a una rama específica en GitHub..gitignore para excluir node_modules y la carpeta dist.deploy en package.json apuntando a la carpeta de distribución.npm run deploy, se debe activar la opción de GitHub Pages en la configuración del repositorio, seleccionando la rama gh-pages como fuente.Todo bien, pero al final no me aparece el link. Esto ya me sucedió con otros proyectos. ¿Es alguna actualización de GitHub o por qué no puedo ver en línea mis proyectos?
por que solo se pueden ver los cambios ejecutando npm run start y no en live server?
la diferencia es que npm run dev te permite ver tu trabajo en LAN, desde cualquier dispositivo conectado a tu red, incluso tu teléfono. Pero nada más, que yo sepa
Porque Live Server no sabe que estás usando Webpack para empaquetar tu aplicación, solo buscará un HTML para servir; a diferencia de npm, al cual le estás diciendo que use webpack para servir tu aplicación a través del package.json.
Hola, ya se que pedir ayuda aquí es como pedirle ayuda a una pared, pero bueno, me salto este error y ya no se que más hacer:
El error podria estar en tu archivo webpack.config, podrias compartirlo para una revisión mas a fondo?
Como puedo solucionar este inconveniente
Debes teclear este comando en la terminal:
npm i gh-pages
¿Sobro una w?, seria ``` webpack-dev-server
a los que les falle npm run star---> vuelvan a instalar con este comando npm install --save-dev webpack