¡De tu PC a GitHub! Pasos básicos para subir archivos con git push

En el artículo anterior, lograste crear tu primer repositorio (lugar de almacenamiento) en GitHub y subir (hacer push) tu primer archivo. ¡Felicidades!

Esta vez, como siguiente paso, aprenderemos el flujo de trabajo más común en el desarrollo diario. Específicamente, el procedimiento para reflejar en GitHub los cambios realizados al editar archivos existentes o añadir nuevos archivos en tu PC (entorno local). Este ciclo de "add → commit → push" es la base fundamental del desarrollo con Git, ¡así que vamos a dominarlo!

El flujo de trabajo básico de Git: Memoriza estos 3 "lugares"

Para entender las operaciones de Git, lo primero que debes saber es el concepto de los "tres lugares". Git utiliza un área de almacenamiento temporal antes de registrar los cambios en los archivos. Esto te permite elegir con flexibilidad qué cambios quieres registrar.

• Directorio de trabajo (Working Directory): Es la carpeta en tu PC donde realmente abres y editas los archivos.
• Área de preparación (Staging Area): Es un lugar temporal para colocar los cambios que quieres incluir en tu próximo "commit" (guardado). Imagínalo como una "lista de cambios para el próximo punto de guardado".
• Repositorio local (Local Repository): Es el lugar donde se registran y almacenan oficialmente los cambios del área de preparación como un punto de guardado formal (commit). Todo el historial se guarda en la carpeta `.git` de tu PC.

El flujo básico de Git consiste en mover los archivos entre estos tres lugares.

1. Editar o crear archivos en el directorio de trabajo.
2. Con el comando git add, pasar los cambios que quieres registrar al área de preparación.
3. Con el comando git commit, registrar los cambios del área de preparación en el repositorio local.
4. Con el comando git push, enviar los registros del repositorio local a GitHub (repositorio remoto).

¡Ahora, vamos a experimentar este flujo en la práctica!

¡En la práctica! Modificar y añadir archivos para reflejarlos en GitHub

Continuaremos trabajando en la carpeta `my-first-repo` que creamos en el artículo anterior. Si aún no la tienes abierta, navega hasta esa carpeta en tu terminal (o Git Bash).

cd my-first-repo

Paso 1: Edita un archivo existente y comprueba los cambios (git status)

Primero, abre el archivo `index.html` que creamos la última vez con tu editor favorito y modifica su contenido.

Ejemplo: Cambia `Hello, GitHub!` por `Hello, World!` y guarda el archivo.

Para comprobar si Git ha reconocido el cambio en el archivo, usa el comando `git status`. Este comando es como preguntarle a Git: "¿cuál es el estado actual del proyecto?".

git status

Debería informarte de que `index.html` ha sido modificado, algo así como `modified: index.html`.

Paso 2: Añade un nuevo archivo

A continuación, vamos a crear un nuevo archivo CSS. Con el siguiente comando, crearemos un archivo CSS simple.

echo "h1 { color: steelblue; }" > style.css

Si ejecutas `git status` de nuevo en este estado, ahora `style.css` se mostrará como un "archivo sin seguimiento (Untracked files)". Esto significa que Git aún no conoce la existencia de este archivo.

git status

Paso 3: Prepara los cambios para el commit (git add)

Vamos a añadir tanto el `index.html` modificado como el `style.css` recién creado al área de preparación para incluirlos en el próximo punto de guardado. El comando `git add` se puede usar tanto para archivos modificados como para archivos nuevos.

Generalmente, se utiliza el siguiente comando para preparar todos los cambios (nuevas adiciones y modificaciones) en el directorio de trabajo de una sola vez.

git add .

Después de esto, si ejecutas `git status` una vez más, verás que todos los cambios aparecen en verde como "Changes to be committed (cambios a ser confirmados)", lo que indica que la preparación está completa.

Paso 4: Confirma los cambios (git commit)

Registra los cambios que has preparado en el área de preparación como un único punto de guardado en el repositorio local. Asegúrate de adjuntar un mensaje específico para que sepas qué hiciste.

git commit -m "Actualizar texto de index.html y añadir style.css"

Paso 5: Sube los cambios a GitHub (git push)

Finalmente, envía (haz push) el nuevo commit que creaste en tu repositorio local al repositorio remoto en GitHub. Con esto, tus cambios se compartirán con los miembros de tu equipo y tendrás una copia de seguridad segura.

Para los pushes posteriores al primero, la opción `-u` inicial no es necesaria.

git push origin main

Confirmación y consejos

Una vez completado el push, intenta recargar la página de tu repositorio de GitHub en el navegador. Deberías ver que `style.css` se ha añadido y que la fecha de última modificación y el mensaje de commit de `index.html` han cambiado. Esto confirma que tus cambios se han reflejado correctamente en GitHub.

[Imagen: Mostrando dos archivos en GitHub, con el historial de commits también actualizado.]

• Acostúmbrate a usar `git status`: Antes de empezar a trabajar, o antes de hacer commit y push, acostúmbrate a comprobar siempre el estado actual con `git status`. Esto te ayudará a evitar añadir o modificar archivos sin querer.
• Haz commits en unidades lógicas: Intenta agrupar cambios relacionados en un solo commit, como "Corregir diseño del encabezado" o "Añadir enlaces del pie de página". Esto mantiene tu historial limpio y facilita el seguimiento de los cambios más tarde.