[Introducción a la integración con Git] Guía de operaciones básicas para usar Git y GitHub con VSCode

Sobre mí: Construí dos sitios web desde cero y seré tu guía

¡Hola! Hace solo unos meses, era un completo principiante sin conocimientos de programación, como muchos de vosotros.

Impulsado por el deseo de "crear mi propio servicio", me sumergí en un mundo de prueba y error con la IA como mi compañera. En solo un mes y medio, logré lanzar dos sitios web por mi cuenta: buyonjapan.com y copicode.com.

El mayor obstáculo inicial en ese proceso fue "Git" y "GitHub". Me sentí desanimado cada vez que aparecía un error, pero al resolverlos uno por uno, ahora se han convertido en mis mayores aliados. En este artículo, compartiré una versión condensada de "lo que los principiantes realmente necesitan saber", basada en mi experiencia personal.

[Paso 0] ¡Calentemos! Prepara tus herramientas

La preparación es clave. Antes de sumergirnos en el trabajo real, asegúrate de tener estas tres herramientas instaladas en tu PC. Si no, ¡simplemente ve a sus sitios web oficiales e instálalas rápidamente!

• VSCode (Visual Studio Code): Este es nuestro castillo, un potente editor de código.
  ➡️ Ir al sitio web oficial de VSCode
• Git: Una máquina del tiempo que registra y gestiona el historial de cambios de tus archivos.
  ➡️ Ir al sitio web oficial de Git
• Cuenta de GitHub: Una caja fuerte en línea para almacenar el historial registrado por Git.
  ➡️ Ir al sitio web oficial de GitHub

💡 Problema común de principiantes: "¡Instalé Git, pero VSCode no lo reconoce!"
En la mayoría de los casos, un simple reinicio del PC solucionará esto. Intenta reiniciar tu computadora después de la instalación. Si eso no funciona, asegúrate de seleccionar la opción "(Recommended)" durante la instalación de Git, y todo debería ir bien.

[Paso 1] Preséntate a Git (solo la primera vez)

Solo una vez, necesitas presentarte a Git diciendo: "Soy yo quien usa este PC". Esto es para registrar tu nombre en los datos guardados (commits) que crearás.

Primero, abre VSCode, ve al menú "Terminal" en la parte superior y selecciona "Nueva terminal" para que aparezca la terminal (la pantalla negra) en la parte inferior.

Una vez que aparezca la terminal, copia y pega los siguientes dos comandos uno por uno, y presiona Enter después de cada uno.

Primero, configura tu nombre de usuario. Reemplaza "Your Name" con tu nombre de usuario de GitHub o similar.

git config --global user.name "Your Name"

A continuación, tu dirección de correo electrónico. Reemplaza "your.email@example.com" con la dirección de correo electrónico que registraste en GitHub.

git config --global user.email "your.email@example.com"

Si no aparece ningún mensaje, has tenido éxito. ¡Git ahora te recuerda! No necesitarás hacer esto de nuevo a menos que cambies de PC.

[Paso 2] Comienza a monitorear tu proyecto (git init)

Ahora, pongamos tu proyecto bajo la gestión de Git. Esto se llama "inicializar un repositorio". Suena complicado, pero con VSCode, es solo un clic.

1. En VSCode, abre la carpeta del proyecto que quieres controlar con versiones (por ejemplo, la carpeta `my-project`).
2. En la Barra de Actividades de la izquierda, haz clic en el tercer icono desde arriba, que parece caminos que se bifurcan (Control de código fuente).
3. Verás un botón azul que dice "Inicializar repositorio". ¡Haz clic en él sin dudarlo!

¡Eso es todo! Se creará una carpeta oculta llamada .git en la carpeta de tu proyecto, y Git comenzará a monitorear los cambios en tus archivos. ¡Es tan fácil que es increíble, verdad?

Ya que estamos, crea un archivo .gitignore

En tu proyecto, tendrás archivos que no quieres que Git monitoree (o suba a GitHub), como información personal como contraseñas o archivos generados automáticamente. El archivo .gitignore es donde especificas estos archivos.

Crea un nuevo archivo llamado .gitignore en la raíz (nivel superior) de tu proyecto y lista los nombres de los archivos o carpetas que quieres ignorar. Por ejemplo:

# Archivos generados automáticamente por el SO
.DS_Store

# Archivo de configuración para contraseñas, etc.
.env

# Carpeta donde se instalan una gran cantidad de paquetes
node_modules

💡 Consejo: Es normal no saber qué ignorar al principio. Una búsqueda rápida de "[nombre de la tecnología] .gitignore" (por ejemplo, Next.js .gitignore) te dará muchas plantillas geniales.

[Paso 3] Registra tus cambios (Staging y Commit)

Ahora viene el verdadero poder de Git. Vamos a registrar los cambios de los archivos como "puntos de guardado". Este proceso se divide en dos pasos:

1. Staging (Preparación): Seleccionar los cambios a incluir en este guardado.
2. Commit (Confirmación): Finalizar el punto de guardado añadiendo un mensaje a los cambios seleccionados.

Piénsalo como una mudanza: "metes cosas en una caja (staging)" y luego "etiquetas la caja como 'Cosas de cocina' y la sellas (commit)".

Vamos a probarlo. Primero, haz un cambio en tu proyecto. Por ejemplo, creemos un archivo llamado index.html.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Prueba de Git</title>
</head>
<body>
  <h1>¡Hola, Git!</h1>
</body>
</html>

Cuando creas y guardas un archivo, aparecerá una insignia como "1" en el icono de Control de código fuente de VSCode. Esta es una notificación de Git de que hay un cambio.

Si abres la pestaña de Control de código fuente, verás index.html listado en "Cambios".

1. Staging (git add)

Pasa el cursor sobre el archivo modificado y haz clic en el icono "+" (Preparar cambios) que aparece. La preparación está completa. Esto es lo mismo que escribir git add . en la terminal.

2. Commit (git commit)

Una vez preparado, el archivo se mueve a la sección "Cambios preparados". A continuación, en el cuadro de mensaje de la parte superior, introduce un mensaje que describa lo que cambiaste (por ejemplo, Commit inicial, Crear index.html).

Después de introducir el mensaje, haz clic en el botón "Confirmar" (o el icono de marca de verificación). ¡Tu punto de guardado está creado! Esto es lo mismo que escribir git commit -m "mensaje" en la terminal.

💡 ¡Un mensaje de commit es una carta para tu yo futuro!
Puede parecer una molestia ahora, pero cuando más tarde te preguntes "¿de qué se trataba este cambio?", un mensaje claro será un salvavidas. Acostúmbrate a escribir mensajes específicos como "Añadir función X" o "Corregir error Y".

[Paso 4] Sube a GitHub (git push)

Ahora que has guardado tus cambios en tu PC local, es hora de almacenarlos en tu caja fuerte en línea, GitHub. Esto se llama "pushing".

1. Crea un repositorio vacío en GitHub

Primero, crea un nuevo repositorio (lugar de almacenamiento) en el sitio web de GitHub. Introduce un nombre de proyecto en el campo "Nombre del repositorio" (por ejemplo, my-project) y haz clic en el botón "Crear repositorio". Eso es todo. Si eliges "Privado", solo tú podrás ver el repositorio.

2. Conéctate a GitHub desde VSCode y haz push

¡Este es el clímax! Enviemos tus datos de guardado locales al repositorio de GitHub que acabas de crear.

Después de confirmar, deberías ver un botón "Publicar rama" en la pestaña de Control de código fuente. Haz clic en él.

Aparecerá una opción para "Publicar en GitHub". Selecciónala. VSCode encontrará automáticamente el repositorio de GitHub que acabas de crear. Selecciónalo y... ¡listo!

La primera vez, se te pedirá que te autentiques con tu cuenta de GitHub. Se abrirá tu navegador y solo tendrás que hacer clic en el botón para autorizar.

🚨 ¡El obstáculo más importante! Errores de autenticación
Antes, podías autenticarte con una contraseña, pero por seguridad mejorada, ahora es común usar una contraseña especial llamada **PAT (Token de Acceso Personal)**. Si recibes un error como "contraseña incorrecta", es casi seguro que necesitas un PAT.

Crear un PAT implica algunos pasos, por lo que la forma más fiable es consultar la documentación oficial de GitHub. Usa el siguiente enlace para crear un token con permisos de `repo` y `workflow`, y luego pega ese token en lugar de tu contraseña.

➡️ Gestión de tus tokens de acceso personal - GitHub Docs

Una vez que te hayas autenticado correctamente, VSCode lo recordará y podrás hacer push con un solo clic a partir de entonces.

[Avanzado] Trabaja de forma segura creando ramas

Una vez que te sientas cómodo con Git, definitivamente deberías probar a usar "ramas". En resumen, una rama es un **"mundo paralelo para tu trabajo".**

Hacer cambios directamente en los datos de guardado principales (la rama main) es arriesgado y puede provocar errores. En su lugar, al añadir nuevas funciones o experimentar con diseños, creas una nueva rama y trabajas libremente en ella. Una vez que tu trabajo está completo y has confirmado que no hay problemas, fusionas esos cambios en la rama principal. Este es un flujo de trabajo de desarrollo seguro.

Crear una rama también es fácil en VSCode.

1. Haz clic en el nombre de la rama actual (inicialmente main) en la barra de estado en la parte inferior izquierda.
2. Selecciona "+ Crear nueva rama..." de las opciones que aparecen en la parte superior de la pantalla.
3. Introduce un nuevo nombre de rama (por ejemplo, feature/add-new-page) y presiona Enter.

Así de fácil, has cambiado a una nueva rama. Desde aquí, simplemente editas archivos → preparas → confirmas → haces push (publicar rama) como de costumbre. Si puedes dominar este flujo, ¡ya eres un usuario competente de Git!

Conclusión: ¡Git no da miedo, es tu máquina del tiempo definitiva!

¡Buen trabajo! Si has seguido los pasos de este artículo, tu código de tu PC ahora debería estar almacenado de forma segura en GitHub.

Las operaciones que hemos cubierto son el flujo de trabajo más básico y crucial para usar Git y GitHub.

• git init en tu carpeta de trabajo (inicializar repositorio)
• Cambiar un archivo y git add (preparar)
• Añadir un mensaje y git commit (confirmar)
• git push a GitHub (empujar)

Puede parecer difícil al principio, pero con el uso diario, se volverá tan natural como cepillarse los dientes. Git es tu máquina del tiempo definitiva, que protege tu código y te permite volver a cualquier estado anterior. ¡No temas a los errores; pregunta a la IA, busca los mensajes de error y hazte amigo de Git poco a poco!