Cómo Subir tu Proyecto Local a GitHub: Guía Definitiva

Acabas de terminar de configurar tu potente gulpfile y la nueva arquitectura híbrida (Markdown + PHP). Antes de tocar una línea de código más, es fundamental que asegures tu trabajo subiéndolo a un repositorio en GitHub.

Este proceso te proporciona una copia de seguridad y un historial de versiones, y es muy sencillo. Sigue estos tres pasos principales en tu terminal, asumiendo que ya tienes Git instalado.

Paso 1: Preparar el Proyecto Local

Antes de inicializar Git, debemos indicarle qué archivos no debe subir.

A. Crear el archivo .gitignore

Crea un archivo llamado .gitignore en la carpeta raíz de tu proyecto. Este archivo es crucial, ya que evita que subas:

1. La carpeta generada por Gulp ( dist/ )
2. Las dependencias de Node.js ( node_modules/ )

Contenido de .gitignore:

# Ignorar dependencias de Node
node_modules/
package-lock.json

# Ignorar carpeta de build de Gulp
dist/

# Ignorar logs y archivos temporales
*.log
.DS_Store

B. Inicializar Git y hacer el primer commit

1. Abre la terminal en la carpeta raíz de tu proyecto.

2. Inicializa Git: Esto crea el repositorio local.

git init

3. Añade todos los archivos útiles (los que no están ignorados por .gitignore) al seguimiento:

git add .

4. Crea el primer commit (una instantánea del estado actual del proyecto):

git commit -m "Initial project setup with hybrid Gulp architecture"

Paso 2: Crear el Repositorio Remoto

Ahora necesitas crear el espacio vacío en GitHub donde subirás tu código.

1. Ve a tu navegador y navega a https://github.com/new

2. Dale un nombre a tu repositorio (ej., jaumeferre-static-blog)

3. Asegúrate de que las opciones para añadir README o .gitignore estén desmarcadas, ya que ya los has creado localmente

4. Haz clic en "Create repository"

GitHub te mostrará una página con la URL de tu nuevo repositorio (ej., https://github.com/tu_usuario/jaumeferre-static-blog.git).

Paso 3: Conectar y Subir

Utiliza la URL de GitHub para conectar el repositorio local con el remoto y subir tus archivos.

1. Conecta el repositorio local con el remoto:

git remote add origin https://github.com/tu_usuario/jaumeferre-static-blog.git

2. Sube (push) el commit inicial a la rama principal (main):

git push -u origin main

Nota: Si tu sistema de Git local usa master, reemplaza main por master.

La primera vez que hagas push, Git te pedirá tus credenciales de GitHub. Aquí te explicamos cómo autenticarte correctamente.

Autenticación en GitHub

GitHub ya no acepta contraseñas normales por motivos de seguridad. Tienes dos opciones principales:

Opción 1: Personal Access Token (Recomendado para HTTPS)

Si usas HTTPS (como en el ejemplo anterior), necesitas un Personal Access Token:

1. Ve a GitHub → Settings → Developer settings → Personal access tokens → Tokens (classic)
2. Haz clic en "Generate new token (classic)"
3. Dale un nombre descriptivo (ej: "Mi Portátil")
4. Selecciona el scope repo (acceso completo a repositorios)
5. Genera el token y cópialo inmediatamente (no podrás verlo después)

Cuando Git te pida credenciales:

• Username: tu nombre de usuario de GitHub
• Password: pega el token (no tu contraseña real)

Opción 2: SSH (Más cómodo a largo plazo)

Con SSH no necesitas introducir credenciales cada vez. Configuración:

1. Generar clave SSH (si no la tienes):

ssh-keygen -t ed25519 -C "tu_email@ejemplo.com"

Presiona Enter para aceptar la ubicación por defecto y opcionalmente añade una passphrase.

2. Añadir la clave al ssh-agent:

# Iniciar el ssh-agent
eval "$(ssh-agent -s)"

# Añadir tu clave privada
ssh-add ~/.ssh/id_ed25519

3. Copiar la clave pública:

cat ~/.ssh/id_ed25519.pub

4. Añadirla a GitHub:

• Ve a GitHub → Settings → SSH and GPG keys → New SSH key
• Pega la clave pública que copiaste
• Dale un título descriptivo (ej: "Mi Portátil")

5. Cambiar la URL del repositorio a SSH:

git remote set-url origin git@github.com:tu_usuario/jaumeferre-static-blog.git

Guardar Credenciales (para HTTPS con Token)

Si usas HTTPS con Personal Access Token, puedes evitar introducirlo cada vez:

En Linux/Mac:

git config --global credential.helper store

En Windows:

git config --global credential.helper wincred

La próxima vez que introduzcas el token, Git lo guardará automáticamente y no te lo volverá a pedir.

Importante: El método store guarda las credenciales en texto plano. Si prefieres más seguridad, usa SSH o el credential helper de tu sistema operativo.

¡Listo! Tu código fuente está ahora seguro en GitHub y no tendrás que introducir credenciales constantemente.

El Flujo de Trabajo Diario con Git

Una vez conectado, tu rutina diaria para guardar el progreso es rápida y sencilla:

A. Subir cambios (guardar tu progreso)

Cada vez que completes una característica o realices un conjunto de cambios, usa esta secuencia:

1. Añadir: Poner los archivos modificados en la "zona de espera".

git add .

2. Confirmar: Crear una instantánea con un mensaje descriptivo.

git commit -m "Added integrated gulpfile logic for asset optimization"

3. Subir: Enviar los cambios a GitHub.

git push

B. Sincronizar cambios desde GitHub

Si trabajas en otro ordenador o has modificado archivos directamente en GitHub, usa:

git pull origin main

Esto descarga y fusiona los últimos cambios del repositorio remoto a tu máquina local.

Consejo: Es buena práctica hacer git pull antes de empezar a trabajar cada día para asegurarte de que tienes la última versión del código.

Clonar el Proyecto en Otro Equipo

Una de las grandes ventajas de tener tu proyecto en GitHub es poder trabajar desde cualquier ordenador. Aquí te explico cómo hacerlo:

Escenario 1: Primera vez en un equipo nuevo

Si quieres trabajar en tu proyecto desde otro ordenador (trabajo, portátil, etc.), simplemente clónalo:

1. Abre la terminal en la carpeta donde quieras tener el proyecto

2. Clona el repositorio:

git clone https://github.com/tu_usuario/jaumeferre-static-blog.git

3. Entra en la carpeta del proyecto:

cd jaumeferre-static-blog

4. Instala las dependencias (ya que node_modules/ no se sube a GitHub):

npm install

¡Ya puedes trabajar! Todo tu código, configuración de Gulp y archivos fuente estarán listos.

Escenario 2: Cambios directos en GitHub

A veces es útil hacer pequeños cambios directamente en GitHub (corregir un typo, actualizar el README, etc.). Para traer esos cambios a tu ordenador:

git pull origin main

Escenario 3: Trabajar desde múltiples equipos

Si alternas entre varios equipos, sigue este flujo:

En el Equipo A (trabajo):

# Haces cambios y los subes
git add .
git commit -m "Updated blog post about Docker"
git push

En el Equipo B (casa):

# Antes de trabajar, sincronizas
git pull origin main

# Haces tus cambios
git add .
git commit -m "Added new article about TypeScript"
git push

Importante: Siempre haz git pull antes de empezar a trabajar para evitar conflictos.

Resolución de Conflictos

Si olvidas hacer git pull y GitHub tiene cambios que no tienes localmente, Git te avisará cuando intentes hacer push:

git push
# Error: Updates were rejected because the remote contains work that you do not have locally

Solución:

# 1. Descarga los cambios remotos
git pull origin main

# 2. Git intentará fusionar automáticamente
# Si hay conflictos, te lo indicará

# 3. Resuelve los conflictos en los archivos marcados
# (Git añade marcadores <<<<<<, ======, >>>>>> en los archivos)

# 4. Marca los conflictos como resueltos
git add .

# 5. Completa la fusión
git commit -m "Merged remote changes"

# 6. Sube todo
git push

Mejora del Flujo: Usar VSCode como Editor de Commits

Configuración inicial

Para escribir mensajes de commit más detallados y formateados, configura VSCode como tu editor predeterminado:

git config --global core.editor "code --wait"

Flujo de trabajo mejorado

# Añadir cambios
git add .

# Abrir editor para el commit (se abre VSCode automáticamente)
git commit

# Se abre VSCode: escribes cómodamente, guardas (Ctrl+S) y cierras
# Luego subes los cambios
git push

Ventajas de este método

✅ Mensajes de commit largos y bien formateados
✅ Syntax highlighting para mejor legibilidad
✅ Cómodo de editar con todas las funciones del editor
✅ Se ve profesional en el historial de GitHub

---

Resumen de Comandos Esenciales

Comando	Descripción
git init	Inicializa un repositorio Git local
git clone [URL]	Clona un repositorio remoto a tu ordenador
git add .	Añade todos los archivos modificados
git commit -m "mensaje"	Crea una instantánea con mensaje
git remote add origin [URL]	Conecta con repositorio remoto
git push -u origin main	Sube cambios al repositorio remoto (primera vez)
git push	Sube cambios al repositorio remoto
git pull origin main	Descarga y fusiona cambios del repositorio remoto
git status	Muestra el estado actual del repositorio
git log	Muestra el historial de commits
git remote -v	Muestra las URLs de los repositorios remotos

Buenas Prácticas

1. Haz commits frecuentes: No esperes a tener 50 cambios. Pequeños commits son más fáciles de entender y revertir si es necesario.

2. Mensajes descriptivos: En lugar de "fix bug", escribe "Fix navigation menu overflow on mobile devices".

3. Pull antes de Push: Antes de subir cambios, descarga los últimos del repositorio para evitar conflictos.

4. No subas secretos: Nunca subas contraseñas, API keys o tokens. Usa variables de entorno y .gitignore.

5. Revisa antes de commit: Usa git status para ver qué archivos vas a subir.

---

Con esta guía completa, tienes todo lo necesario para usar Git y GitHub de forma profesional en tus proyectos web, ya sea trabajando desde un solo equipo o alternando entre varios. ¡Feliz versionado!