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:

La carpeta generada por Gulp ( dist/ )
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_

Abre la terminal en la carpeta raíz de tu proyecto.
Inicializa Git: Esto crea el repositorio local.

git init

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

git add .

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.

Ve a tu navegador y navega a https://github.com/new
Dale un nombre a tu repositorio (ej., jaumeferre-static-blog)
Asegúrate de que las opciones para añadir README o .gitignore estén desmarcadas, ya que ya los has creado localmente
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.

Conecta el repositorio local con el remoto:

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

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:

Ve a GitHub → Settings → Developer settings → Personal access tokens → Tokens (classic)
Haz clic en "Generate new token (classic)"
Dale un nombre descriptivo (ej: "Mi Portátil")
Selecciona el scope repo (acceso completo a repositorios)
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:

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

git add .

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

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

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:

Abre la terminal en la carpeta donde quieras tener el proyecto
Clona el repositorio:

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

Entra en la carpeta del proyecto:

cd jaumeferre-static-blog

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

Haz commits frecuentes: No esperes a tener 50 cambios. Pequeños commits son más fáciles de entender y revertir si es necesario.
Mensajes descriptivos: En lugar de "fix bug", escribe "Fix navigation menu overflow on mobile devices".
Pull antes de Push: Antes de subir cambios, descarga los últimos del repositorio para evitar conflictos.
No subas secretos: Nunca subas contraseñas, API keys o tokens. Usa variables de entorno y .gitignore.
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!