Este proyecto es una guía práctica para aprender a usar Git y GitHub con ramas, commits convencionales y resolución de conflictos. A lo largo de esta actividad, crearás una página web simple, trabajarás en múltiples ramas y resolverás conflictos de fusión.
- Aprender a crear y manejar ramas en Git.
- Usar commits convencionales para mantener un historial de cambios claro.
- Resolver conflictos de fusión en archivos HTML y CSS.
- Tener Git instalado en tu máquina.
- Tener una cuenta en GitHub.
- Un editor de texto (por ejemplo, VS Code, Atom, Sublime Text).
Crea una carpeta en tu ordenador:
mkdir practica-gitnavegar a ella:
cd practica-gitY luego de haber creado también un repositorio en github usar los siguientes comandos para conectarlo a tu local:
Inicializa git dentro de tu carpeta>
git initCrea un archivo de ejemplo (como un README) para tener algo que subir
echo "# Práctica Git" >> README.mdConecta tu repositorio local con el nuevo repositorio remoto en GitHub (Reemplaza [URL_DEL_REPOSITORIO] con la URL real de tu repo de GitHub)
git remote add origin [URL_DEL_REPOSITORIO]Renombra la rama local a 'main' si tienes un rama llamad 'Master' en lugar de 'main'
git branch -M mainAñade los archivos al "staging area" de Git
git add .Confirma (commit) los archivos por primera vez
git commit -m "first commit"Sube tu código local a GitHub
git push -u origin mainClona el repositorio en tu máquina local:
git checkout -b feature/pagina-principal<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Página Principal</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Bienvenido a mi página web</h1>
<p>Esta es una página de ejemplo.</p>
</body>
</html>body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
}
h1 {
color: #007acc;
}Realiza un commit usando el formato de Conventional Commits:
git add index.html style.css
git commit -m "feat: crear la estructura inicial de la página principal"Empuja la rama al repositorio remoto:
git push -u origin feature/pagina-principalCrea una nueva rama para una nueva funcionalidad:
git checkout -b feature/nueva-seccionAñade una nueva sección al index.html:
<div>
<h2>Nueva Sección</h2>
<p>Contenido de la nueva sección.</p>
</div>Realiza un commit usando el formato de Conventional Commits:
git add index.html
git commit -m "feat: añadir una nueva sección a la página principal"Vamos a crear un conflicto editando el mismo párrafo en ambas ramas. Vuelve a la rama feature/pagina-principal y edita el index.html:
git checkout feature/pagina-principalModifica el párrafo:
<p>Esta es una página de ejemplo con información adicional.</p>Haz un commit:
Copy code
git add index.html
git commit -m "fix: actualizar el contenido del párrafo en la página principal"Haz push a los cambios:
Copy code
git push origin feature/pagina-principalIntenta fusionar la rama feature/nueva-seccion en feature/pagina-principal:
git checkout feature/pagina-principal
git merge feature/nueva-seccionGit mostrará un conflicto. Abre el index.html y resuelve el conflicto editando el archivo para que luzca así, es decir haciendo click en "accept incoming change":
<p>Esta es una página de ejemplo con información adicional y una nueva sección.</p>
<div>
<h2>Nueva Sección</h2>
<p>Contenido de la nueva sección.</p>
</div>Añade y commitea los cambios resueltos:
- Es normal que en el archivo index aparezca un signo "!" y el nombre en rojo aunque se haya resuelto el conflicto, esto no cambiará hasta que hagas commit.
git add index.html
git commit -m "merge: resolver el conflicto entre las ramas feature/pagina-principal y feature/nueva-seccion"Envía los cambios al repositorio remoto:
git push origin feature/pagina-principal- Ve a GitHub y abre tu repositorio.
- Verás una opción para crear un Pull Request para la rama
feature/pagina-principal. - Crea el Pull Request siguiendo los pasos que te indique GitHub.
- Una vez revisado y listo para ser fusionado, haz el merge de la rama
feature/pagina-principalenmain.