Práctica: Subir una Web a GitHub y
Publicarla
Una guía completa para crear una web sencilla, subirla a GitHub usando comandos Git, publicarla con
GitHub Pages, hacer cambios y actualizarla.
Requisitos Previos
Git instalado en tu equipo
Cuenta en GitHub
Editor de código (VS Code)
Paso 1: Crear el Proyecto Local
Crea una carpeta para tu proyecto y archivos HTML básicos:
mkdir mi-web-practica
cd mi-web-practica
Crea un archivo [Link] con contenido simple:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Primera Web en GitHub</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>¡Hola Mundo!</h1>
<p>Esta es mi primera web publicada en GitHub Pages.</p>
</body>
</html>
Crea un archivo [Link] :
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 50px;
background-color: #f0f0f0;
}
h1 {
color: #333;
}
Paso 2: Inicializar Git y Primer Commit
Configura Git si no lo has hecho (sustituye con tus datos):
git config --global [Link] "Tu Nombre"
git config --global [Link] "tuemail@[Link]"
Inicializa el repositorio y realiza el primer commit:
git init
git status
git add .
git commit -m "feat: Primer commit - estructura inicial de la web"
Paso 3: Crear Repositorio en GitHub y Conectarlo
Accede a GitHub y crea un nuevo repositorio llamado mi-web-practica
No inicialices con README, .gitignore o licencia
Copia la URL del repositorio
Conecta tu repositorio local con GitHub:
git remote add origin [Link]
git branch -M main
git push -u origin main
Paso 4: Activar GitHub Pages
Ve a Settings > Pages en tu repositorio
En "Source", selecciona la rama main y carpeta / (root)
Haz clic en "Save"
Tu sitio estará disponible en [Link]
Paso 5: Realizar Cambios y Actualizar
Modifica el archivo [Link] añadiendo más contenido:
<body>
<h1>¡Hola Mundo!</h1>
<p>Esta es mi primera web publicada en GitHub Pages.</p>
<h2>Actualización</h2>
<p>He aprendido a usar Git y GitHub Pages.</p>
</body>
Verifica el estado, prepara y confirma los cambios:
git status
git add [Link]
git commit -m "feat: Añadida sección de actualización"
git push origin main
Paso 6: Practicar Comandos Adicionales
Ver el historial de commits
git log
git log --oneline
Ver diferencias antes de commit
git diff
Crear y trabajar con ramas
git branch nueva-seccion
git checkout nueva-seccion
# Realiza cambios
git add .
git commit -m "feat: Nueva sección añadida"
git checkout main
git merge nueva-seccion
git push origin main
Ver estado del repositorio
git status
Actualizar tu repositorio local
git pull origin main
Comandos Git Esenciales Resumidos
Comando Descripción
git init Inicializa un repositorio Git
git add <archivo> Añade un archivo al área de preparación
git add . Añade todos los cambios al área de preparación
git commit -m "mensaje" Confirma los cambios con un mensaje descriptivo
git status Muestra el estado de los archivos
git push origin main Sube los cambios al repositorio remoto
git pull origin main Descarga y fusiona cambios del repositorio remoto
git log Muestra el historial de commits
git log --oneline Muestra el historial de forma compacta
git diff Muestra las diferencias en archivos no confirmados
git branch Gestiona ramas
git checkout <rama> Cambia a una rama específica
git merge <rama> Fusiona una rama con la actual
Resumen del Flujo de Trabajo
1. Crear proyecto local - Estructura inicial de archivos
2. Inicializar Git - Configurar repositorio local
3. Crear repositorio en GitHub - Configurar repositorio remoto
4. Conectar repositorios - Enlazar local con remoto
5. Activar GitHub Pages - Publicar la web
6. Hacer cambios - Modificar archivos locales
7. Confirmar cambios - Crear commits descriptivos
8. Subir cambios - Push al repositorio remoto
9. Ver cambios en vivo - Acceder a la URL de GitHub Pages
Esta práctica te permite familiarizarte con el flujo completo de trabajo con Git y GitHub Pages, desde
la creación inicial hasta la publicación y actualización de tu sitio web.