Fase 1 · Ses 5 — Git & GitHub

qué es git

Git: el historial infinito de tu código

Git guarda una foto de tu código cada vez que lo decides (commit). Puedes volver a cualquier foto anterior. Puedes trabajar en múltiples features en paralelo. Sin Git, el trabajo en equipo es imposible.

SIN CONTROL DE VERSIONES

proyecto-final.html
proyecto-final-v2.html
proyecto-final-v2-BUENO.html
proyecto-final-PARA-ENTREGAR.html
proyecto-final-PARA-ENTREGAR-arreglado.html
proyecto-final-DEFINITIVO.html
proyecto-final-DEFINITIVO-de-verdad.html

Con Git: una sola carpeta, un historial completo de cada cambio, quién lo hizo y por qué.

EL HISTORIAL DE COMMITS

a3f9c

init

b72d1

add header

c18e4

fix nav

d94f7

add hero

HEAD

e05a2

contact form

cómo funciona git

Los tres estados del código

Necesitas entender los tres estados en los que puede estar tu código. Sin este modelo mental, los comandos parecen magia.

WORKING DIRECTORY

📁

Tus archivos tal como están. Cualquier cambio ocurre aquí.

sin trackear

git add

→

STAGING AREA

📋

Los cambios marcados para el próximo commit. Puedes elegir solo algunos archivos.

preparado

git commit

→

REPOSITORIO LOCAL

💾

El historial permanente. Cada commit es una foto inmutable.

guardado

git push

→

GITHUB (REMOTE)

☁️

Backup en la nube. Visible para el equipo.

compartido

configuración inicial

Setup: una vez por máquina

Antes de usar Git necesitas identificarte. Esta información aparece en todos tus commits.

# Tu identidad (aparece en todos tus commits)
git config --global user.name "Tu Nombre Completo"
git config --global user.email "tu@email.com"

# Editor para mensajes de commit largos
git config --global core.editor "code --wait"

# Nombre de rama principal (estándar actual: main)
git config --global init.defaultBranch main

# Verificar todo
git config --list

comandos esenciales

El ciclo diario de Git

Estos comandos son el 90% de lo que harás cada día. Apréndelos en contexto, no como lista aislada.

git status El primero que escribes. Siempre. Muestra qué archivos cambiaron, cuáles están en staging y si estás al día con el remote.

git add . Añade todos los cambios al staging. Usa git add archivo.css para añadir solo un archivo.

git commit -m "mensaje" Guarda el snapshot. El mensaje debe explicar QUÉ cambiaste y POR QUÉ. Sé específico.

git push Sube tus commits al remote (GitHub). El primer push usa -u: git push -u origin main.

git pull Descarga y fusiona los cambios del remote. Úsalo siempre antes de empezar a trabajar en equipo.

❌ MENSAJES MALOS

fix changes asdfgh update final final2

✓ MENSAJES BUENOS

feat: add email validation to contact form fix: resolve overflow on mobile nav style: update button hover transition refactor: extract Header into component

REFERENCIA RÁPIDA

Comando	Qué hace
git init	Iniciar repositorio en el directorio actual
git clone URL	Copiar un repositorio existente de GitHub
git status	Ver estado: cambios, staging, rama actual
git add .	Añadir todos los cambios al staging
git add -p	Añadir cambios de forma interactiva
git commit -m "msg"	Crear commit con mensaje
git log --oneline	Historial compacto de commits
git diff	Ver cambios sin stagear
git diff --staged	Ver cambios en staging
git push	Subir commits al remote
git pull	Bajar y fusionar desde remote
git stash	Guardar cambios temporalmente
git stash pop	Recuperar cambios guardados con stash

ramas

Branches: desarrollo paralelo

Una rama es una línea de desarrollo independiente. Trabajas en una nueva feature sin tocar el código que funciona en main. Cuando terminas, fusionas. Así trabajan todos los equipos.

FLUJO CON RAMAS

main:      A ─── B ─── C ─────────────── G (merge)
                   \                   /
feature:            D ─── E ─── F ───'

A=init B=add nav C=add footer D=start: contact form E=add: validation F=done: contact form G=merge feature/contact-form

# Ver ramas
git branch              # locales
git branch -a           # locales + remotas

# Crear y cambiar a una nueva rama
git checkout -b feature/contact-form
# Equivalente moderno:
git switch -c feature/contact-form

# Cambiar de rama
git checkout main
git switch main  # moderno

# Subir la rama al remote
git push -u origin feature/contact-form

# Fusionar (desde main):
git checkout main
git merge feature/contact-form

# Borrar rama después del merge
git branch -d feature/contact-form
git push origin --delete feature/contact-form

Resolución de conflictos

Cuando dos personas modifican la misma línea, Git no puede decidir. Te marca el conflicto y te pide que decidas.

<<<<<<< HEAD (tu versión)
  color: var(--accent);
=======
  color: #f0e040;
>>>>>>> feature/update-colors (versión que entra)

Tu trabajo: elegir qué versión queda (o combinar ambas), borrar los marcadores de conflicto, y hacer commit.

# Después de resolver manualmente:
git add .
git commit -m "resolve: merge conflict in styles.css"

github

GitHub: colaboración y pull requests

Git es local. GitHub es el punto de colaboración. El Pull Request permite que tu código sea revisado antes de entrar a main. Es el flujo estándar en toda empresa.

PASO 01

Crea el repositorio en GitHub

New repository → nombre → público. NO inicialices con README si ya tienes código local.

PASO 02

Conecta tu repo local

GitHub te da los comandos exactos. Cópialos:

git remote add origin https://github.com/usuario/repo.git
git branch -M main
git push -u origin main

PASO 03

El ciclo diario de trabajo

Nunca trabajes directamente en main:

git checkout main && git pull    # actualiza tu main
git checkout -b feature/mi-feature
# ... desarrollas y haces commits ...
git push -u origin feature/mi-feature

PASO 04

Abre un Pull Request

En GitHub aparece un botón "Compare & pull request". Añade título descriptivo y descripción de qué cambiaste y por qué.

PASO 05

Code Review

El reviewer comenta líneas específicas. Respondes con nuevos commits. Cuando todos aprueban → Merge.

PASO 06

Limpia después del merge

Borra la rama en GitHub y localmente. Actualiza tu main local con git pull.

.gitignore

.gitignore: lo que Git nunca debe ver

Hay archivos que NUNCA deben subirse a GitHub: credenciales, node_modules, archivos del sistema. El .gitignore se los dice a Git.

# Dependencias de Node.js (NUNCA subir, pesan 100MB+)
node_modules/

# Variables de entorno y secretos
.env
.env.local
.env.production

# Sistema operativo
.DS_Store          # macOS
Thumbs.db          # Windows

# Editor
.vscode/settings.json
.idea/

# Build
dist/
build/
.next/
out/

# Logs
*.log
npm-debug.log*

⚠ CRÍTICO

Si subes credenciales (.env con API keys) a un repositorio público, son públicas para siempre. Aunque borres el archivo después, Git guarda el historial. Si ocurre: rota TODAS las credenciales de inmediato.

github pages

GitHub Pages: tu portfolio en internet

GitHub Pages convierte cualquier repositorio en un sitio web público. Tu portfolio tendrá URL propia sin pagar hosting.

Ve a Settings

Abre tu repositorio en GitHub → pestaña Settings → en el sidebar: Pages.

Configura la fuente

En Source: Deploy from a branch → Branch: main → Folder: / (root) → Save.

Espera el deploy

GitHub tarda 1–3 minutos. Aparecerá la URL cuando termine.

Tu URL pública

Tu sitio estará en: https://tu-usuario.github.io/nombre-repo/. Cada git push lo actualiza.

Custom domain

Con un dominio propio (desde $12/año en Namecheap) y el DNS configurado en GitHub Pages, tu portfolio puede vivir en tudominio.com en lugar de usuario.github.io/repo.

ejercicio

Ejercicio: publica tu portfolio en GitHub Pages

Al terminar tendrás un repositorio real en GitHub y una URL pública donde cualquier empleador puede ver tu trabajo.

1:30

De cero a publicado en GitHub Pages

Inicializa Git en tu proyecto de landing, haz el primer commit, sube a GitHub y activa Pages.

Verifica que Git está instalado: git --version en la terminal
Configura tu identidad: git config --global user.name y user.email
Ve a tu proyecto de landing y ejecuta: git init
Crea un archivo .gitignore con .DS_Store
git add . && git commit -m "feat: initial commit"
Crea un repositorio público en github.com (sin README)
git remote add origin URL && git push -u origin main
Activa GitHub Pages en Settings → Pages → main branch
Espera 2 minutos y abre tu URL de GitHub Pages
Haz un cambio, commit, push — verifica que la web se actualiza

recursos

Recursos de esta sesión

TOOL

Oh My Git! — Aprende Git jugando

https://ohmygit.org/

Juego visual que enseña los conceptos de Git desde cero. Gratuito y muy efectivo.

REF

Pro Git Book — Gratis online

https://git-scm.com/book/es/v2

El libro oficial de Git completo, disponible en español y gratis.

VIDEO

Git y GitHub en 40 minutos — Midudev

https://www.youtube.com/watch?v=3GymExBkKjE

El video más completo en español. Cubre desde init hasta pull requests.

TOOL

gitignore.io — Generador de .gitignore

https://www.toptal.com/developers/gitignore

Pon tu stack (Node, React, macOS) y genera el .gitignore perfecto.

REF

GitHub Docs — GitHub Pages

https://docs.github.com/pages

Guía oficial con custom domains incluido.