Manual Básico de Introducción a Git (Para Oscar)

¡Hola Oscar! Sé que manejas Excel a la perfección y que también llevas alguna que otra página web estática. Sin embargo, a medida que los proyectos crecen, gestionar los archivos de la web puede volverse un poco caótico. Seguramente te haya pasado alguna vez lo de tener carpetas con nombres como web_final, web_final_esta_vez_si, web_final_v2…

Hoy vamos a solucionar eso. Te presento Git. En este artículo vamos a ver qué es, cómo instalarlo en Windows y cómo dar los primeros pasos hasta tener tu proyecto seguro en la nube.

Contenidos

¿Qué es Git y por qué es tan importante?
Cómo instalar Git en Windows
Paso 0 (Imprescindible): Presentarte a Git
Los conceptos básicos: El flujo de trabajo
Archivos que Git NO debe guardar: el .gitignore
El superpoder de Git: Las Ramas (Branches)
Socorrismo: Qué hacer si metes la pata
Introduciendo GitHub: Tu proyecto en la nube
El flujo de trabajo completo, de principio a fin
El uso de un IDE: Visual Studio Code o Antigravity
Resumen: La hoja de ruta que has seguido hoy

¿Qué es Git y por qué es tan importante?

Imagina que Git es como la función de “Control de Cambios” o el “Historial de Versiones” de Excel o Word, pero aplicado a una carpeta entera llena de archivos (como los de tu página estática). Te permite guardar “fotos” (versiones) de tu proyecto en el tiempo, volver atrás si algo se rompe, y probar cosas nuevas sin miedo a estropear lo que ya funciona.

La importancia de Git en el mundo del desarrollo es monumental. Fue creado en 2005 nada menos que por Linus Torvalds (el creador de Linux), precisamente porque necesitaba una herramienta robusta para coordinar el trabajo de miles de programadores de todo el mundo que desarrollaban el Kernel de Linux. Hoy en día, prácticamente cualquier proyecto de software serio utiliza Git.

Cómo instalar Git en Windows

Dado que utilizas Windows, el proceso de instalación es súper sencillo:

Ve a la página oficial de descargas de Git para Windows: Descargar Git.
Descarga el instalador de 64-bit y ejecútalo.
Durante la instalación, puedes dejar todas las opciones por defecto haciendo clic en “Next” (Siguiente) hasta que termine.

Una vez instalado, tendrás un programa llamado Git Bash, que es una terminal de comandos donde puedes darle instrucciones a Git. También puedes usar el terminal integrado de tu IDE (VSCode o Antigravity), que es lo más cómodo en el día a día.

Paso 0 (Imprescindible): Presentarte a Git

Antes de hacer absolutamente nada con Git, hay que hacer una configuración inicial que mucha gente se salta y luego no entiende por qué falla todo. Git necesita saber quién eres, porque cada “foto” que guardes llevará tu nombre y correo como firma.

Abre Git Bash (o la terminal de tu IDE) y escribe estos dos comandos, sustituyendo los datos por los tuyos:

git config --global user.name "Oscar"
git config --global user.email "[email protected]"

Esto solo hay que hacerlo una vez en tu ordenador. Git lo recordará para siempre.

⚠️ ¿Por qué es tan importante? Si intentas hacer tu primer commit sin haber hecho esto, Git te mostrará un error y se negará a continuar. Es el tropiezo número uno de los principiantes.

Los conceptos básicos: El flujo de trabajo

Git tiene tres “zonas” principales por las que pasan tus archivos. Para entenderlo, vamos a usar una similitud con el mundo de la paquetería:

Directorio de Trabajo (Working Directory): Es tu taller. Aquí es donde creas o editas tus archivos (tu código HTML, CSS, o textos).
Área de Preparación (Staging Area): Es la caja de embalaje. Aquí vas metiendo los archivos que ya están listos y quieres incluir en el próximo envío.
Repositorio (Repository): Es el camión de reparto. Cuando cierras la caja y la envías, se queda guardada en el historial para siempre.

Visualmente, el proceso se ve así:

flowchart LR
    A[Directorio de Trabajo<br>Taller] -->|git add| B(Área de Preparación<br>Caja de embalaje)
    B -->|git commit| C{Repositorio<br>Camión / Historial}
    
    style A fill:#f9f2f4,stroke:#333,stroke-width:2px
    style B fill:#dff0d8,stroke:#333,stroke-width:2px
    style C fill:#d9edf7,stroke:#333,stroke-width:2px

Los comandos esenciales

git init — Convierte tu carpeta normal en un repositorio Git. Solo se hace una vez al principio.
git status — El comando que más usarás. Te muestra en qué estado están tus archivos: cuáles han cambiado, cuáles están en la “caja” y cuáles no. Cuando tengas dudas, escribe esto.
git add <archivo> — Mete un archivo concreto en la “caja”. También puedes usar git add . (con un punto al final) para meter todos los archivos modificados de golpe.
git commit -m "Mensaje" — Cierra la caja y la guarda en el historial con un mensaje que describe qué has hecho. El mensaje es para ti, ponlo claro: "Añadido formulario de contacto" es mejor que "cambios".
git log — Muestra el historial de todas las “fotos” que has guardado, con fecha, autor y mensaje. Muy útil para ver en qué punto está el proyecto.

💡 Consejo: Acostúmbrate a hacer git status antes y después de cualquier acción. Te orientará siempre y evitará sorpresas.

Archivos que Git NO debe guardar: el `.gitignore`

Cuando Git vigila tu carpeta, lo ve todo: tus archivos HTML, tus imágenes, pero también archivos temporales, configuraciones con contraseñas, carpetas de caché, etc. Hay cosas que definitivamente no quieres subir a internet.

Para decirle a Git que ignore ciertos archivos, se crea un archivo especial llamado .gitignore en la carpeta raíz de tu proyecto. Dentro, escribes los nombres de los archivos o carpetas que quieres que Git ignore completamente.

Por ejemplo, para una web estática sencilla en Windows, un .gitignore básico podría ser:

# Archivos del sistema Windows
Thumbs.db
desktop.ini

# Carpetas de configuración de editores
.vscode/
.idea/

# Archivos con contraseñas o datos sensibles
config_secret.js
.env

Cada línea es un patrón de archivos a ignorar. Las líneas que empiezan por # son comentarios, solo para que tú recuerdes por qué lo pusiste.

⚠️ Importante: Crea el .gitignore antes de hacer tu primer git add. Una vez que Git ha empezado a rastrear un archivo, ignorarlo después es más complicado.

El superpoder de Git: Las Ramas (Branches)

Imagina que estás jugando a un videojuego y vas a enfrentarte a un jefe final muy difícil. ¿Qué haces? ¡Guardar la partida en un slot diferente! Así, si te matan, puedes cargar y volver a intentarlo desde antes del jefe.

En Git, a esto se le llama Ramas (Branches). Por defecto, trabajas en la rama principal llamada main. Si quieres hacer un experimento en tu página web (por ejemplo, cambiar todos los colores), creas una rama nueva. Si el experimento sale mal, simplemente borras la rama y tu main sigue intacto.

Un ejemplo muy sencillo paso a paso

Abres tu terminal en una carpeta nueva y escribes: git init
Creas un archivo llamado mi_web.txt y le escribes “Página de inicio”.

Lo añades y lo guardas en el historial:

git add mi_web.txt
git commit -m "Añadida la página de inicio"

Ahora quieres probar a añadir una sección de contacto, así que creas una rama nueva: git checkout -b rama_contacto
Editas mi_web.txt y añades “Sección de contacto”. Guardas los cambios:
```
git add mi_web.txt
git commit -m "Probando sección de contacto"
```
Si decides que no te gusta, simplemente vuelves a la rama principal: git checkout main ¡Y mágicamente, tu archivo vuelve a estar como al principio, sin la sección de contacto!

Socorrismo: Qué hacer si metes la pata

Git no es solo para guardar cosas, también es tu red de seguridad cuando algo sale mal. El caso más habitual para un principiante: has editado un archivo y lo has liado, y quieres dejarlo como estaba en el último commit.

Para descartar los cambios de un archivo que aún no has añadido a la “caja”:

git restore nombre_del_archivo.html

Esto devuelve ese archivo exactamente a como estaba en tu último commit. ¡Ojo, los cambios que descartes así no tienen vuelta atrás!

💡 Si no recuerdas qué archivos has tocado, haz primero git status para verlos todos y luego decide cuáles restaurar.

Introduciendo GitHub: Tu proyecto en la nube

Hasta ahora todo lo que hemos hecho ocurre en tu propio ordenador local. Pero, ¿qué pasa si el disco duro se rompe, o quieres acceder a tu proyecto desde otro sitio?

Aquí entra GitHub. GitHub es una plataforma en internet (como un Google Drive) pero diseñada específicamente para repositorios de Git. La gran ventaja es que permite tener repositorios privados de forma totalmente gratuita.

Paso 1: Crear una cuenta en GitHub

Ve a github.com y regístrate con tu correo. El plan gratuito es más que suficiente para todo lo que vamos a hacer.

Paso 2: Crear un repositorio nuevo en GitHub

Una vez dentro de tu cuenta:

Haz clic en el botón verde “New” (o en el icono + de la esquina superior derecha y elige “New repository”).
Rellena los campos:
- Repository name: El nombre de tu proyecto, por ejemplo mi-web-oscar. Sin espacios, usa guiones.
- Description: Una descripción breve y opcional.
- Visibility: Selecciona Private (Privado). Nadie podrá verlo sin tu permiso.
⚠️ MUY IMPORTANTE: Deja sin marcar las opciones “Add a README file”, “Add .gitignore” y “Choose a license”. Si las marcas y ya tienes commits locales, GitHub y tu ordenador tendrán historiales distintos y te dará un error al intentar conectarlos.
Haz clic en “Create repository”.

GitHub te mostrará una pantalla con instrucciones. No te asustes, vamos a usarlas justo ahora.

Paso 3: Conectar tu repositorio local con GitHub

Este enlace entre tu carpeta local y GitHub se llama remoto (remote). Es como decirle a Git: “oye, cuando yo suba cosas, mándalas a esta dirección de internet”.

En tu terminal, dentro de la carpeta de tu proyecto, escribe:

git remote add origin https://github.com/tu-usuario/mi-web-oscar.git

Desglosamos el comando:

git remote add — añade un nuevo remoto.
origin — es el apodo que le damos a esa dirección. Podría llamarse de cualquier manera, pero origin es el nombre estándar que usa todo el mundo.
https://github.com/... — la URL de tu repositorio en GitHub. La encontrarás en la pantalla que te mostró GitHub tras crear el repositorio.

Para verificar que se ha añadido correctamente:

git remote -v

Deberías ver algo así:

origin  https://github.com/tu-usuario/mi-web-oscar.git (fetch)
origin  https://github.com/tu-usuario/mi-web-oscar.git (push)

Paso 4: Subir tu proyecto a GitHub por primera vez

Con el remoto configurado, ya puedes subir todo tu historial local a GitHub:

git push -u origin main

Desglosamos:

git push — envía tus commits al remoto.
-u — establece el “seguimiento” entre tu rama local main y la rama main de GitHub. Solo hay que ponerlo la primera vez. A partir de ahora, bastará con escribir simplemente git push.
origin main — envíalo al remoto llamado origin, a la rama main.

Paso 5: Autenticarte en GitHub (solo la primera vez en Windows)

La primera vez que hagas un git push, Windows abrirá automáticamente una ventana del navegador pidiéndote que inicies sesión en GitHub. Es completamente normal, no te asustes. Inicia sesión y acepta. Windows guardará tus credenciales y no te las volverá a pedir.

💡 Tras el push, abre tu repositorio en GitHub y recarga la página. Verás todos tus archivos ahí, con tus mensajes de commit. ¡Tu proyecto ya está en la nube!

El flujo de trabajo completo, de principio a fin

Ahora que lo tienes todo configurado, así es como se ve el proceso completo desde que editas un archivo hasta que está en GitHub:

sequenceDiagram
    participant IDE as Tu Editor (IDE)
    participant L as Git Local
    participant GH as GitHub (Nube)

    IDE->>L: Editas y guardas archivos
    L->>L: git status (compruebas qué ha cambiado)
    L->>L: git add . (metes los cambios en la caja)
    L->>L: git commit -m "Descripción" (guardas la foto)
    L->>GH: git push (subes todo a la nube)
    Note over GH: Tu proyecto está seguro y actualizado

Y en el día a día, una vez que la configuración inicial ya está hecha, los únicos comandos que usarás constantemente son estos cuatro:

git status
git add .
git commit -m "Lo que has hecho"
git push

El uso de un IDE: Visual Studio Code o Antigravity

Aunque puedes usar Git desde la terminal, en el día a día es mucho más cómodo usar un IDE (Entorno de Desarrollo Integrado). Un IDE es básicamente un editor de texto supervitaminado.

Te recomiendo dos opciones excelentes:

1. Visual Studio Code (VSCode)

Es el rey actual. Es gratuito, de Microsoft, y tiene una integración visual con Git espectacular. En lugar de escribir comandos, puedes hacer clics en botones para añadir archivos a la “caja” y hacer commits. En el panel lateral izquierdo verás un icono con una ramita (el logo de Git) que te muestra en todo momento qué archivos han cambiado. Además, incluye su propia terminal integrada.

2. Antigravity

Es otro entorno moderno muy potente. Al igual que VSCode, tiene terminal integrada, pero Antigravity tiene una ventaja brutal hoy en día: te permite lanzar herramientas de inteligencia artificial (como Claude Code) directamente desde su terminal. Además, Antigravity cuenta con algunos créditos gratuitos de Gemini diarios para que puedas practicar, pedirle que te genere código o que te explique errores sin necesidad de pagar una suscripción externa.

En cualquiera de estos dos IDEs, puedes abrir la terminal integrada y ejecutar directamente tus comandos de Git, o interactuar con Claude Code para que te guíe paso a paso.

Resumen: La hoja de ruta que has seguido hoy

Para que no se te olvide, aquí tienes todo lo que hemos visto de un vistazo:

Qué	Comando
Configurar tu nombre (solo una vez)	`git config --global user.name "Tu Nombre"`
Configurar tu email (solo una vez)	`git config --global user.email "[email protected]"`
Iniciar un repositorio	`git init`
Ver el estado actual	`git status`
Añadir cambios a la “caja”	`git add .`
Guardar una “foto”	`git commit -m "Mensaje"`
Ver el historial de fotos	`git log`
Descartar cambios en un archivo	`git restore nombre_archivo`
Conectar con GitHub	`git remote add origin <url>`
Primera subida a GitHub	`git push -u origin main`
Subidas siguientes	`git push`

Espero que este manual te sirva para perderle el miedo a Git, Oscar. Una vez que le coges el truco, ¡te preguntarás cómo has podido vivir sin él todo este tiempo!

En el siguiente artículo veremos cómo usar ese repositorio de GitHub que acabas de crear para publicar tu web estática en internet de forma automática con Cloudflare Pages. ¡Sin tocar un servidor ni un archivo FTP!

Categorías: Desarrollo Web Tutoriales

Etiquetas: git github tutorial windows desarrollo