12 min Git

Commits e historial

Los commits son el corazón de Git. Cada commit es una foto instantánea de tu proyecto en un momento concreto. Piensa en ellos como puntos de guardado en un videojuego: puedes volver a cualquiera de ellos cuando quieras. Un buen historial de commits cuenta la historia de cómo se construyó tu proyecto, paso a paso.

git add: preparar los cambios

Antes de hacer un commit, necesitas decirle a Git qué archivos quieres incluir. Eso se hace con git add, que mueve los archivos al staging area (área de preparación). Es como poner cosas en una caja antes de enviarla: decides qué va dentro y qué no.

Esto existe por una razón importante: no siempre quieres guardar todos los cambios de golpe. A veces modificas 5 archivos pero solo 2 están listos. El staging area te da ese control.

# Agregar un archivo específico
git add index.html

# Agregar varios archivos concretos
git add index.html styles.css

# Agregar todos los archivos CSS (usando patrones)
git add *.css

# Agregar TODO lo que haya cambiado
git add .

# Ver qué hay en el staging area
git status

Consejo: al principio es tentador usar siempre git add ., pero acostúmbrate a agregar archivos específicos. Así cada commit tendrá solo los cambios relacionados entre sí, y tu historial será mucho más claro.

git commit -m: guardar los cambios

Una vez que tienes archivos en el staging area, creas el commit con un mensaje que describa qué hiciste y por qué:

git commit -m "feat: add navigation menu to header"

El mensaje de commit es más importante de lo que parece. Dentro de 3 meses, cuando mires el historial, quieres entender qué pasó en cada punto. Un mal mensaje como "cambios" o "fix" no te dice nada.

Conventional Commits: mensajes con estructura

Desde el inicio vamos a usar Conventional Commits, un estándar profesional para escribir mensajes de commit. El formato es simple:

tipo: descripción breve en imperativo

Los tipos principales que vas a usar:

Tipo	Cuándo usarlo	Ejemplo
`feat`	Nueva funcionalidad	`feat: add navigation menu`
`fix`	Corregir un bug	`fix: correct header alignment on mobile`
`docs`	Documentación	`docs: add README with project description`
`style`	Formato, espacios, sin cambios de lógica	`style: format CSS with consistent indentation`
`refactor`	Reestructurar código sin cambiar funcionalidad	`refactor: simplify menu toggle logic`
`chore`	Tareas de mantenimiento	`chore: update .gitignore for IDE files`

Veamos cómo se aplica esto en nuestro proyecto cafe-estelar:

# Creamos la estructura HTML base
git add index.html
git commit -m "feat: add base HTML structure for landing page"

# Agregamos los estilos principales
git add css/styles.css
git commit -m "feat: add main styles with header and hero section"

# Corregimos un problema visual
git add css/styles.css
git commit -m "fix: correct header alignment on mobile devices"

# Agregamos documentación
git add README.md
git commit -m "docs: add README with project description and setup"

# Mejoramos el formato del CSS
git add css/styles.css
git commit -m "style: format CSS with consistent indentation"

git log: ver el historial

Ahora que tienes commits, puedes ver todo el historial de tu proyecto. git log es tu ventana al pasado:

# Historial completo con todos los detalles
git log

# Resultado:
# commit a1b2c3d4e5f6 (HEAD -> main)
# Author: Tu Nombre <[email protected]>
# Date:   Sat Mar 15 10:30:00 2026
#
#     feat: add main styles with header and hero section
#
# commit f6e5d4c3b2a1
# Author: Tu Nombre <[email protected]>
# Date:   Sat Mar 15 10:15:00 2026
#
#     feat: add base HTML structure for landing page

Cada commit tiene 4 elementos clave:

Hash (SHA): un identificador único como a1b2c3d. Es la "huella digital" del commit.
Author: quién hizo el commit.
Date: cuándo se hizo.
Message: la descripción de los cambios.

Para ver el historial de forma más compacta:

# Una línea por commit — lo que más vas a usar
git log --oneline

# Resultado:
# a1b2c3d feat: add main styles with header and hero section
# f6e5d4c feat: add base HTML structure for landing page

# Con gráfico visual (útil cuando trabajes con ramas)
git log --oneline --graph

# Resultado:
# * a1b2c3d feat: add main styles with header and hero section
# * f6e5d4c feat: add base HTML structure for landing page

Tip: git log --oneline es el comando que más vas a usar en tu día a día. Memorízalo.

git diff: ver qué cambió

Antes de hacer un commit, muchas veces quieres revisar exactamente qué modificaste. git diff te muestra las diferencias línea por línea:

# Ver cambios que AÚN NO están en el staging area
git diff

# Ver cambios que YA están en el staging area (listos para commit)
git diff --staged

# Ejemplo de salida:
# diff --git a/css/styles.css b/css/styles.css
# --- a/css/styles.css
# +++ b/css/styles.css
# @@ -5,6 +5,8 @@
#  body {
#      font-family: Arial, sans-serif;
# +    margin: 0;
# +    padding: 0;
#  }

Las líneas que empiezan con + son las que agregaste, y las que empiezan con - son las que eliminaste.

git restore: deshacer cambios

¿Te equivocaste y quieres volver atrás? git restore es tu salvavidas:

# Descartar cambios en un archivo (volver a la última versión del commit)
# ⚠️ Cuidado: esto ELIMINA tus cambios no guardados
git restore index.html

# Quitar un archivo del staging area (sin perder los cambios)
git restore --staged index.html

# Ejemplo práctico:
# 1. Modificas styles.css y haces git add
git add css/styles.css

# 2. Te arrepientes — lo sacas del staging area
git restore --staged css/styles.css
# Los cambios siguen ahí, pero ya no están preparados para el commit

# 3. Si quieres descartar los cambios por completo
git restore css/styles.css
# Ahora el archivo volvió a como estaba en el último commit

Importante: git restore archivo elimina tus cambios de forma permanente. Úsalo solo cuando estés seguro de que quieres descartar lo que hiciste.

El flujo completo

Así se ve el ciclo de trabajo con Git en el día a día:

# 1. Haces cambios en tus archivos
#    (editas index.html, styles.css, etc.)

# 2. Revisas qué cambió
git status
git diff

# 3. Agregas los archivos que quieres incluir en el commit
git add index.html css/styles.css

# 4. Verificas qué vas a commitear
git diff --staged

# 5. Creas el commit con un buen mensaje
git commit -m "feat: add hero section with background image"

# 6. Compruebas que todo quedó bien
git log --oneline

Resumen

Comando	Qué hace
`git add archivo`	Agrega un archivo al staging area
`git add .`	Agrega todos los archivos modificados
`git commit -m "msg"`	Crea un commit con los archivos del staging area
`git log`	Muestra el historial completo de commits
`git log --oneline`	Historial compacto (una línea por commit)
`git diff`	Muestra cambios no preparados
`git diff --staged`	Muestra cambios listos para commit
`git restore archivo`	Descarta cambios no preparados
`git restore --staged archivo`	Saca un archivo del staging area

Vamos a crear un historial de commits real para el proyecto cafe-estelar. Sigue estos pasos:

Abre la terminal en la carpeta cafe-estelar (que ya debería tener Git inicializado de la lección anterior).
Crea o modifica estos archivos y haz al menos 5 commits usando Conventional Commits:

feat: add base HTML structure with head and body — crea index.html con la estructura básica.
feat: add navigation menu with links — agrega un <nav> con enlaces a Inicio, Menú y Contacto.
feat: add hero section with welcome message — agrega una sección hero con un título y un párrafo de bienvenida.
docs: add README with project description — crea un README.md describiendo el proyecto.
fix: correct navigation links order — cambia el orden de los enlaces en el nav.

Cuando termines, ejecuta git log --oneline y comprueba que ves tus 5 commits con mensajes claros y bien estructurados.

Pistas

Recuerda el flujo: primero editas el archivo, luego git add nombre-del-archivo, y finalmente git commit -m "tipo: descripción". No uses git add . para todo: practica agregando archivos específicos. Al final, git log --oneline debería mostrarte algo como:

e4f5g6h fix: correct navigation links order
c3d4e5f docs: add README with project description
a1b2c3d feat: add hero section with welcome message
9z8y7x6 feat: add navigation menu with links
7w6v5u4 feat: add base HTML structure with head and body

Anterior Primer repositorio

Siguiente Ramas y merge