Configurar un entorno de desarrollo local con webpack-dev-server y desplegar tu proyecto en GitHub Pages es el paso que transforma un sitio estático en una aplicación lista para producción. Aquí verás cómo preparar los scripts de build, start y deploy para que cualquier cambio en tu código se refleje al instante y termine publicado en una URL real.

¿Cómo instalar y configurar webpack-dev-server?

El primer paso es agregar el paquete que habilita el servidor local de desarrollo. En la terminal ejecutas npm install webpack-dev-server -D para instalarlo como dependencia de desarrollo [01:00]. Esta utilería escucha los cambios en tus archivos index.html e index.js, y vuelve a compilar el proyecto cada vez que guardas.

¿Qué hace webpack-dev-server? Levanta un servidor local en el puerto 8080 por defecto, abre tu sitio en el navegador y recarga los cambios automáticamente cuando modificas el código.

Una vez instalado, abres package.json y reemplazas el script por defecto con dos comandos esenciales:

• build: ejecuta webpack --mode production para optimizar y empaquetar el código listo para producción.
• start: ejecuta webpack-dev-server --open --mode development para abrir el navegador y trabajar en local [02:10].

¿Qué hace el comando npm run build con webpack?

Al correr npm run build, webpack analiza tu proyecto desde el punto de entrada y lo lleva a la carpeta dist (de distribution) [03:30]. En el camino aplica los loaders y plugins configurados, que transforman, optimizan y preparan los assets según las reglas que definiste.

El resultado son dos archivos clave dentro de dist:

• index.html minificado, listo para entregarse rápido al usuario.
• main.js con el código transformado, donde las funciones cambian de nombre y se ejecutan inmediatamente.

Este código deja de ser legible para humanos, pero los navegadores lo entienden sin problema. Para mantener una versión amigable para ti, conservas tu archivo index original con la separación por módulos.

¿Cómo ver los cambios en tiempo real con npm run start?

Cuando ejecutas npm run start, se levanta el servidor local y se abre tu sitio en localhost:8080 [05:40]. Si modificas, por ejemplo, la palabra "blog" por "gnxdev" en tu index, al guardar verás cómo webpack vuelve a compilar y el navegador refleja el cambio sin que recargues manualmente.

Este flujo de hot reload es clave para depurar: la terminal te muestra el estado del servidor, la IP de escucha y cualquier error que aparezca. Para detener el proceso usas Control + C.

¿Cómo desplegar el proyecto en GitHub Pages con gh-pages?

GitHub Pages es un servicio gratuito para hospedar sitios estáticos, y como tu proyecto cumple ese estándar, basta con instalar la utilería gh-pages. En la terminal corres npm install gh-pages -D [08:30] y luego agregas un nuevo script en package.json:

• deploy: ejecuta gh-pages -d dist para publicar el contenido de la carpeta dist en una rama dedicada del repositorio.

¿Qué es gh-pages? Es un paquete de Node que sube automáticamente una carpeta de tu proyecto a la rama gh-pages de GitHub, lista para servirse como sitio estático.

Antes de ejecutar el deploy, asegúrate de tener tu repositorio sincronizado con los últimos cambios y de crear un archivo .gitignore que excluya las carpetas dist y node_modules [09:50]. Subir esos directorios al repositorio es un error común que ensucia el historial.

¿Cómo activar GitHub Pages después del deploy?

Después de correr npm run deploy, GitHub crea automáticamente la rama gh-pages con tu index.html y main.js compilados. Para activar el sitio:

1. Entra a Settings del repositorio.
2. Busca la sección Pages en el menú lateral.
3. Selecciona la rama gh-pages y guarda los cambios.

GitHub te entrega una URL pública con el formato usuario.github.io/repositorio. Si al abrirla ves un 404, no te preocupes: la replicación tarda unos minutos.

¿Puedo usar mi propio dominio en GitHub Pages? Sí. Compras un dominio en sitios como namecheap.com, lo agregas en la sección Page y configuras los registros DNS o CNAME que GitHub te indica.

¿Por qué automatizar el flujo de build y deploy?

El valor real de esta configuración está en automatizar el ciclo completo: editas tu código, ves los cambios al instante con start, optimizas con build y publicas con deploy. Webpack se encarga de minificar el HTML, transformar el JavaScript y empaquetar los assets, mientras gh-pages se ocupa de la entrega.

Este flujo te libera para enfocarte en lo importante: terminar el reto del proyecto. Itera sobre tus redes sociales, agrega tu nickname, una bio, una descripción larga y cambia la fotografía para que el resultado sea totalmente tuyo.

¿Ya desplegaste tu primera versión en GitHub Pages? Comparte la URL en los comentarios y cuéntanos qué ajustes hiciste con Tailwind y Webpack.