10 min Git

Primer repositorio

Ya tienes Git instalado y configurado. Ahora viene lo bueno: vamos a crear tu primer repositorio con un proyecto real. Vamos a usar cafe-estelar, el proyecto que has ido construyendo en las secciones de HTML, CSS y JavaScript (con la base lógica que aprendiste en la sección de Lógica de Programación). Es el momento de ponerlo bajo control de versiones.

Comandos básicos de la terminal

Antes de crear nuestro primer repositorio, necesitas conocer unos pocos comandos de terminal. No son de Git — son comandos del sistema operativo para moverte por carpetas y crear archivos. Los vas a usar constantemente:

Comando	Qué hace	Ejemplo
`pwd`	Muestra en qué carpeta estás ahora mismo	`pwd` → `/home/ana/proyectos`
`ls`	Lista los archivos y carpetas del directorio actual	`ls` → `index.html styles.css`
`cd nombre`	Entra en una carpeta (cd = "change directory")	`cd proyectos`
`cd ..`	Sube un nivel (vuelve a la carpeta padre)	`cd ..`
`mkdir nombre`	Crea una carpeta nueva (mkdir = "make directory")	`mkdir mi-proyecto`
`touch nombre`	Crea un archivo vacío	`touch index.html`

En Windows con Git Bash, estos comandos funcionan exactamente igual. Si usas PowerShell, ls y cd también funcionan, pero touch no existe — puedes usar New-Item index.html en su lugar. Recomendamos Git Bash para evitar estas diferencias.

Crear la carpeta del proyecto

Si ya tienes la carpeta de Café Estelar de las lecciones anteriores, genial, puedes usarla directamente. Si empiezas desde cero, vamos a crearla paso a paso.

Primero, sitúate en la carpeta donde guardas tus proyectos. Por ejemplo, si tienes una carpeta proyectos en tu escritorio:

# Comprueba dónde estás
pwd

# Ve a tu carpeta de proyectos (ajusta la ruta a tu caso)
cd ~/proyectos

Ahora crea la carpeta del proyecto y entra en ella:

# Crea la carpeta
mkdir cafe-estelar

# Entra en ella
cd cafe-estelar

Puedes verificar que estás dentro con pwd. Deberías ver algo como /home/tu-usuario/proyectos/cafe-estelar.

Ahora estás dentro de una carpeta vacía. Todavía no es un repositorio Git. Es solo una carpeta normal. Vamos a cambiar eso.

git init: el nacimiento de un repositorio

El comando git init convierte cualquier carpeta en un repositorio Git:

git init

Verás algo como:

Initialized empty Git repository in /home/tu-usuario/cafe-estelar/.git/

Eso es todo. Con un solo comando, Git ha creado un repositorio vacío dentro de tu carpeta. Pero, ¿qué ha pasado exactamente? Git ha creado una carpeta oculta llamada .git dentro de tu proyecto.

La carpeta .git: el cerebro del repositorio

Puedes ver la carpeta oculta con:

ls -la

Verás una carpeta .git/ que contiene todo lo que Git necesita: el historial de cambios, las ramas, la configuración del repositorio, todo. Es la base de datos completa de tu proyecto.

Regla de oro: nunca modifiques ni borres la carpeta .git manualmente. Si la borras, pierdes todo el historial del proyecto. Solo necesitas saber que existe y que Git la gestiona por ti.

git status: tu comando favorito

Si solo pudieras recordar un comando de Git, que sea este. git status te dice en qué estado está tu proyecto en cualquier momento:

git status

Como acabamos de inicializar el repositorio y no hay archivos, verás algo como:

On branch main

No commits yet

nothing to commit (create/copy files and use "git add" to track)

Git te está diciendo: "Estás en la rama main, no hay commits todavía y no hay nada que guardar." Perfecto, es lo esperado. Vamos a darle contenido.

Crear los archivos del proyecto

Vamos a crear la estructura básica de Café Estelar. Crea estos tres archivos:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Café Estelar</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Café Estelar</h1>
        <nav>
            <a href="#menu">Menú</a>
            <a href="#nosotros">Nosotros</a>
            <a href="#contacto">Contacto</a>
        </nav>
    </header>

    <main>
        <section id="menu">
            <h2>Nuestro Menú</h2>
            <p>Los mejores cafés de la galaxia.</p>
        </section>
    </main>

    <script src="app.js"></script>
</body>
</html>

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, sans-serif;
    background: #0a0a0a;
    color: #f5f5f5;
    line-height: 1.6;
}

header {
    padding: 2rem;
    text-align: center;
    border-bottom: 1px solid #333;
}

header h1 {
    font-size: 2.5rem;
    color: #F05032;
}

console.log("Café Estelar cargado correctamente");

Ahora tienes tres archivos en tu proyecto. Veamos qué dice Git:

git status con archivos nuevos

git status

Ahora la salida es diferente:

On branch main

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        app.js
        index.html
        styles.css

nothing added to commit but untracked files present (use "git add" to track)

Los archivos aparecen en rojo como "Untracked files". Esto significa que Git los ve, pero no los está rastreando todavía. Le has dicho a Git que este es un repositorio, pero no le has dicho que vigile estos archivos. Vamos a hacerlo.

El flujo básico de Git: modificar, add, commit

Este es el flujo que vas a repetir cientos de veces como desarrollador:

Modificas archivos: escribes código, cambias estilos, lo que sea.
git add: seleccionas qué cambios quieres guardar (los mueves al "staging area").
git commit: guardas esos cambios en el historial con un mensaje descriptivo.

Piensa en ello como hacer una foto: primero colocas a la gente (git add), luego disparas la cámara (git commit). En la siguiente lección veremos este flujo en profundidad. Por ahora, vamos a hacer tu primer commit.

Tu primer commit

Primero, agrega todos los archivos al staging area:

git add index.html styles.css app.js

Si ejecutas git status ahora, los archivos aparecen en verde bajo "Changes to be committed". Están listos para ser guardados.

Ahora crea el commit con un mensaje descriptivo:

git commit -m "feat: initial project structure"

Verás algo como:

[main (root-commit) a1b2c3d] feat: initial project structure
 3 files changed, 45 insertions(+)
 create mode 100644 app.js
 create mode 100644 index.html
 create mode 100644 styles.css

Acabas de crear tu primer punto en el historial. Git ha guardado una "foto" exacta de tu proyecto en este momento. Si rompes algo en el futuro, siempre puedes volver aquí.

git status después del commit

git status

On branch main
nothing to commit, working tree clean

"Working tree clean" es la frase más bonita que vas a ver en Git. Significa que todo está guardado, no hay cambios pendientes. Todo bajo control.

.gitignore: archivos que Git debe ignorar

No todo lo que está en tu carpeta debería estar en el repositorio. Hay archivos que no quieres rastrear:

node_modules/: dependencias de npm. Pesan mucho y se regeneran con npm install.
.env: variables de entorno con claves secretas, contraseñas, tokens de API.
.DS_Store: archivo invisible que macOS crea en cada carpeta.
Thumbs.db: lo mismo, pero en Windows.
dist/ o build/: archivos generados automáticamente.

Para decirle a Git que ignore estos archivos, creas un archivo llamado .gitignore en la raíz de tu proyecto:

# Dependencias
node_modules/

# Variables de entorno
.env
.env.local

# Archivos del sistema operativo
.DS_Store
Thumbs.db

# Archivos generados
dist/
build/

# Logs
*.log

Cada línea es un patrón. Git lo lee y sabe que esos archivos o carpetas no deben rastrearse, aunque existan en tu carpeta. El # son comentarios para que tú (y tu equipo) sepan por qué se ignora cada cosa.

Ahora agrega el .gitignore y haz un commit:

git add .gitignore
git commit -m "chore: add gitignore with common patterns"

El .gitignore sí se incluye en el repositorio. Así todo el equipo comparte las mismas reglas de qué ignorar. Es uno de los primeros archivos que deberías crear en cualquier proyecto.

Resumen

En esta lección has aprendido:

git init convierte una carpeta en un repositorio Git.
La carpeta .git es el cerebro del repositorio. No la toques.
git status te muestra el estado de tu proyecto en todo momento.
Los archivos nuevos aparecen como "Untracked" (rojo) hasta que los agregas.
El flujo básico es: modificar → git add → git commit.
.gitignore le dice a Git qué archivos no debe rastrear.

En la siguiente lección vamos a profundizar en el staging area y los commits: cómo elegir exactamente qué cambios guardar, cómo escribir buenos mensajes de commit y cómo ver el historial de tu proyecto.

Crea un proyecto nuevo llamado pixel-games (un catálogo de videojuegos retro) y ponlo bajo control de versiones:

Crea la carpeta pixel-games e inicializa un repositorio Git dentro.
Crea un index.html con estructura básica: un <header> con el título "Pixel Games", una <main> con una sección de catálogo que tenga al menos 3 juegos en una lista, y un <footer>.
Crea un archivo .gitignore que ignore node_modules/, .env, .DS_Store y *.log.
Ejecuta git status para ver los archivos sin rastrear.
Agrega todos los archivos y haz tu primer commit con el mensaje: "feat: initial pixel-games catalog".
Ejecuta git status de nuevo y confirma que el working tree está limpio.

Pistas

Recuerda la secuencia: mkdir pixel-games && cd pixel-games, luego git init. Para agregar los archivos puedes listarlos uno por uno (git add index.html .gitignore) o usar git add . para agregar todo lo que no esté en el .gitignore. Verifica siempre con git status antes de hacer commit.

Anterior Instalación y configuración

Siguiente Commits e historial