Desplegar proyectos en GitHub Pages

Github Pages nos permite generar sitios web estáticos o serverless de proyectos a partir de nuestros repositorios publicados en Github de forma fácil y gratuita.

Para empezar es necesario tener una cuenta de usuario en la plataforma de Github y tener instalado Git en nuestra máquina.

Crear repositorio

Para el ejemplo crearemos un nuevo repositorio desde github.com/new.

Podemos hacer un clonado del proyecto  o irnos a nuestro editor de código, crear un directorio, añadir contenido y subir los cambios al nuevo repositorio. Vamos a hacer lo segundo.

Creamos un nuevo directorio para nuestro proyecto y accedemos al mismo.

Incluir contenido al proyecto

> mkdir desplegar-en-githubpages
> cd desplegar-en-githubpages

Para el ejemplo crearemos un archivo index.html desde nuestro editor de código en el cual incluiremos una estructura de html5 básica rápidamente mediante Emmet.

Obtenemos la siguiente estructura a la que añadiremos un mensaje de Hola Mundo que se pintará por pantalla.

Volvemos al terminal e inicializamos git.

> git init

Incluimos nuestros cambios por primera vez.

> git add index.html
> git commit -m "First Commit"
> git branch -M main
> git remote add origin https://github.com/[usuario]^*/[repositorio].git
> git push -u origin main

Habilitar GitHub Pages y desplegar proyecto

Volvemos a la página de GitHub y accedemos a la sección Pages de los Settings del repositorio. Seleccionamos una rama para habilitar GitHub Pages.

En la barra lateral de nuestro repositorio ahora podemos ver la sección de Enviroments y github-pages desplegando.

Si hacemos clic sobre la opción del entorno de GitHub Pages accedemos al historial desde donde podemos verificar si el despliegue se ha realizado y ver el proyecto desplegado en [usuario].github.io/[repositorio]

Guardar trabajo en curso en un Stash con Git

Cuando trabajamos con Git, no siempre tenemos los cambios listos para hacer un commit. A veces estamos en mitad de una tarea, aparece una urgencia, necesitamos cambiar de rama o simplemente queremos probar algo sin perder lo que ya hemos avanzado.

Para esos casos existe git stash, un comando que permite guardar temporalmente los cambios en curso y dejar el directorio de trabajo limpio, sin tener que crear un commit provisional. Es como poner tu trabajo “en pausa” para recuperarlo más tarde justo donde lo dejaste.

En esta guía veremos cómo usar git stash para guardar cambios, listar los stashes creados, recuperarlos, revisar diferencias y eliminar los que ya no necesitas.

Guardar cambios en un stash

<pre>git stash</pre>

Un stash es algo similar a un borrador, se trata de una forma rápida o sucia de preservar cambios en un espacio provisional de forma local con los que posteriormente podremos seguir trabajando.

Podemos tener varios borradores de nuestros cambios que podemos listar con el comando git stash list.

Listar stashes creados

git stash list

También podemos guardar un stash incluyendo un mensaje y poder diferenciarlo en el caso de que tengamos varios elementos en la lista de stashes.

Diferenciar stash con mensaje descriptivo

git stash save "mensaje descriptivo"

Para recuperar cambios de un stash tenemos varias opciones.

Recuperar cambios de un stash

Si lo que queremos es recuperar los últimos cambios desde el stash utilizaremos el siguiente comando:

git stash pop

O también podemos utilizar el siguiente comando:

git stash apply

Con ambos comandos podemos recuperar cambios de un stash específico.

git stash pop stash@{}
git stash apply stash@{}

Mostrar diferencias en un stash

Podemos ver las diferencias de un stash de forma resumida mediante el comando:

git stash show

O utilizar la opción -p (o –patch) para ver todas las diferencias de un stash:

git stash show -p

Al recuperar cambios de un stash éste no se elimina automáticamente por lo que es recomendable hacerlo de forma manual.

Para eliminar cambios tenemos varias opciones.

Eliminar cambios recientes

git stash drop

También podemos hacerlo especificando el índice de un stash en concreto.

git stash drop stash@{}

Eliminar todos los cambios

git stash clear

Para ampliar información, puedes consultar la documentación oficial de git stash, donde se detallan las opciones disponibles para guardar, listar, aplicar y eliminar stashes.

También puedes revisar el capítulo Stashing and Cleaning del libro oficial de Git, especialmente si quieres entender mejor cómo encaja el stash dentro del flujo de trabajo diario.

Preguntas frecuentes sobre git stash

¿Cuál es la diferencia entre git stash pop y git stash apply?

git stash pop recupera los cambios guardados y, si se aplican correctamente, elimina ese stash de la lista. En cambio, git stash apply recupera los cambios pero mantiene el stash guardado, por si quieres volver a utilizarlo más adelante.

¿Git stash guarda también archivos nuevos?

Por defecto, git stash guarda cambios en archivos que Git ya está siguiendo, pero no incluye archivos nuevos no trackeados. Para guardar también esos archivos, puedes usar git stash -u o git stash push -u.

¿Cuándo conviene usar git stash en lugar de hacer un commit?

Conviene usar git stash cuando los cambios todavía están incompletos, no quieres ensuciar el historial con un commit provisional o necesitas cambiar de rama rápidamente. Si el cambio ya está terminado, probado y tiene sentido dentro del historial del proyecto, lo más recomendable es hacer un commit.

Generar proyectos de React con Vite

Crear un proyecto de React desde cero no tiene por qué ser un proceso lento ni complicado. Durante mucho tiempo, muchas personas empezaban con herramientas más pesadas o configuraciones manuales que podían resultar abrumadoras, especialmente cuando solo querías comenzar a practicar componentes, hooks o pequeñas interfaces.

Hoy, una de las formas más cómodas de iniciar un proyecto moderno es generar proyectos de React con Vite. Vite permite crear una base de desarrollo rápida, sencilla y preparada para trabajar con JavaScript o TypeScript, sin tener que pelearte desde el primer minuto con configuraciones complejas.

Si estás dando tus primeros pasos con React, este flujo te ayudará a tener una estructura inicial limpia. Y si ya vienes trabajando con herramientas modernas de frontend, también te servirá para montar proyectos de prueba, prototipos o aplicaciones pequeñas de forma mucho más ágil.

Qué es Vite y por qué usarlo con React

Vite es una herramienta de desarrollo frontend pensada para crear proyectos modernos de manera rápida. Su principal ventaja es que ofrece un entorno de desarrollo muy ágil, con recarga rápida y una configuración inicial bastante sencilla.

En el caso de React, Vite permite crear un proyecto base con todo lo necesario para empezar: estructura de carpetas, archivos principales, scripts de desarrollo y configuración inicial. Esto resulta especialmente útil cuando quieres centrarte en aprender o construir la interfaz, en lugar de dedicar demasiado tiempo a preparar el entorno.

Además, si estás trabajando en proyectos donde también usas animaciones, componentes reutilizables o una arquitectura más cuidada, Vite encaja muy bien con flujos modernos. Por ejemplo, puedes combinarlo más adelante con técnicas explicadas en el artículo sobre cómo combinar Tailwind CSS con animaciones personalizadas o profundizar en decisiones de interfaz desde una perspectiva más visual.

Crear nuevo proyecto

Desde nuestra Terminal ejecutaremos el siguiente comando para crear un nuevo proyecto con Vite.

npm create vite

Escribimos un nombre para nuestro proyecto y le damos a intro.

A continuación nos moveremos con las flechas del teclado para escoger la opción de React como framework con el que trabajaremos y presionamos intro.

Escogemos JavaScript como lenguaje de desarrollo y al presionar intro ya tendremos creado nuestro nuevo proyecto.

Accedemos al directorio del proyecto.

cd vite-project

Instalamos las dependencias.

npm install

Y hacemos correr la aplicación.

npm run dev

Vite nos indica el host y el puerto donde está ejecutandose nuestra aplicación. 

Accedemos desde el navegador presionando CTRL+clic (WIN) o COMMAND+clic (MAC) sobre el enlace.