Despliegue de Proyectos en GitHub Pages paso a paso

Clase 14 de 15 • Curso de State Machines en React.js

Resumen

¿Cómo implementar un proyecto con GitHub Pages?

GitHub Pages es una fantástica herramienta que te permite exponer tus proyectos al mundo. Aquí te guiaremos paso a paso sobre cómo hacerlo siguiendo un tutorial desarrollado por un estudiante de Platzi. Prepárate y dale vida a ese proyecto que tanto has trabajado; ¡no te quedes con las ganas de mostrarlo!

¿Cuál es el primer paso?

Comienza instalando el paquete de GitHub Pages en tu proyecto. Asegúrate de estar dentro de la carpeta de tu proyecto antes de ejecutar los comandos necesarios para la instalación. Esto es crucial para que todo funcione perfectamente.

// Comando para instalar GitHub Pages
npm install gh-pages

¿Cómo configurar el package.json correctamente?

El siguiente paso esencial es actualizar el archivo package.json de tu proyecto para incluir la entrada de homepage. Esto es vital para que GitHub Pages sepa cómo encontrar tu aplicación.

Para ello, localiza el archivo package.json y asegúrate de que la entrada de homepage esté configurada correctamente con la URL adecuada:

"homepage": "https://platzi.github.io/machines/"

Verifica que los nombres de usuario y repositorio sean los correctos. En este ejemplo, el nombre es 'Machines' (con una 'S' extra) y el nombre de usuario es de Platzi.

¿Cómo crear los scripts de predeploy y deploy?

Dentro del archivo package.json, bajo los scripts, agrega dos nuevos scripts: predeploy y deploy. Estos scripts automatizarán el proceso de construcción y despliegue.

Aquí están los scripts que necesitas agregar:

"scripts": {
  "predeploy": "npm run build",
  "deploy": "gh-pages -d build"
}

Con el código listo en scripts, tu aplicación está casi lista para ser desplegada.

¿Cómo ejecutar los comandos de despliegue?

Regresa a tu terminal y ejecuta los siguientes comandos que harán uso de los scripts que acabas de añadir:

Primero, ejecuta el script de prebuild que compilará tu aplicación:
```
npm run predeploy
```
Luego, ejecuta el script de deploy para enviar los archivos a GitHub Pages:
```
npm run deploy
```

Al completar estos pasos, tu aplicación debería estar publicada. ¡Felicidades!

¿Cómo verificar que todo esté en orden en GitHub?

Ahora ve a GitHub, dirígete a la sección de Settings y busca la opción Pages. Aquí, selecciona la fuente GitHub Pages como el Source y guarda los cambios. Si todo ha ido bien, la URL pública de tu proyecto estará visible. Es hora de visitarla y disfrutar de tu trabajo en vivo.

Un detalle final: solucionar un bug conocido

Mientras exploras tu recién desplegada aplicación, verifica si hay pequeños bugs. Un ejemplo encontrado frecuentemente es que el componente Ticket muestra siempre el mismo país predeterminado, como Colombia, en lugar del que realmente se ha seleccionado. Te animamos a identificar y resolver este bug por ti mismo, reforzando tus habilidades de desarrollo.

¡Una vez completado todo este proceso, estarás listo para compartir con orgullo tu creación con el mundo! Anímate a dejar un comentario sobre tu experiencia, desafíos enfrentados y las soluciones que encontraste. Seguir perfeccionando y desplegando aplicaciones es una habilidad clave para cualquier desarrollador moderno. ¡Adelante y buena suerte en tu camino hacia el dominio del código!