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.

Cómo evitar scroll horizontal en VS Code

Cuando estamos trabajando con nuestro código en el editor de VS Code por defecto es necesario mover el scroll horizontal para ver todo el código de una línea si la extensión de la misma es mayor al ancho de la ventana.

Podemos modificar éste comportamiento y que se produzcan saltos de línea conforme el código ocupe el total del ancho del editor.

Para hacerlo en Mac presionamos las teclas ⇧⌘P y en Windows F1.

Se abrirá un cuadro de dialogo desde el cual buscaremos > settings

Cómo evitar scroll horizontal con Visual Studio Code

Abrimos la configuración de usuario settings.json y añadimos una nueva línea con la siguiente configuración:

"editor.wordWrap": "on"