Tutorial de GitHub Pages para Principiantes

Tu sitio web en línea en 10 minutos

Diseñado especialmente para principiantes en Git

🎯 Método A: Usando la Web de GitHub (El más sencillo)

Paso 1: Crear repositorio (2 minutos)

  1. Abrir GitHub.com, iniciar sesión
  2. Hacer clic en el botón verde "New" (Nuevo)
  3. Nombre del repositorio: my-website
  4. Seleccionar "Public" (Público)
  5. Marcar "Add a README file" (Añadir archivo README)
  6. Hacer clic en "Create repository" (Crear repositorio)

Paso 2: Subir archivos del sitio web (3 minutos)

  1. En la página del repositorio recién creado, hacer clic en "uploading an existing file" (subir archivo existente)
  2. Arrastrar todos los archivos del sitio web a la página (o hacer clic para seleccionar archivos)
  3. Ingresar mensaje de commit: Subir mi sitio web
  4. Hacer clic en el botón verde "Commit changes" (Confirmar cambios)

Paso 3: Activar GitHub Pages (2 minutos)

  1. En la página del repositorio, hacer clic en la pestaña "Settings" (Configuración)
  2. En el menú lateral izquierdo, hacer clic en "Pages"
  3. En "Source" (Fuente), seleccionar "Deploy from a branch" (Implementar desde una rama)
  4. En Branch (Rama), seleccionar "main", carpeta seleccionar "/ (root)" (raíz)
  5. Hacer clic en "Save" (Guardar)

Paso 4: Visitar tu sitio web (3 minutos)

  • Esperar 1-2 minutos, actualizar la página de Pages
  • Se mostrará: Your site is published at https://tu-usuario.github.io/my-website
  • ¡Hacer clic en el enlace para ver tu sitio web!

🖥️ Método B: Usando GitHub Desktop (Interfaz gráfica)

Descarga e instalación

  1. Visitar desktop.github.com
  2. Descargar e instalar GitHub Desktop
  3. Iniciar sesión con tu cuenta de GitHub

Pasos de operación

  1. Clone repository: Seleccionar el repositorio creado en GitHub
  2. Añadir archivos: Copiar los archivos del sitio web a la carpeta del repositorio local
  3. Commit: En GitHub Desktop, escribir mensaje de commit, hacer clic en "Commit to main"
  4. Push: Hacer clic en "Push origin"

⚡ Método C: Script de un clic (Para actualizaciones frecuentes)

Para usuarios de Windows

Crear archivo deploy.bat:

@echo off
echo 🚀 Desplegando sitio web...

REM Añadir todos los archivos
git add .

REM Confirmar cambios
set /p message="Ingrese descripción de actualización (Enter para usar predeterminado): "
if "%message%"=="" set message=Actualizar sitio web %date% %time%
git commit -m "%message%"

REM Subir a GitHub
git push origin main

echo ✅ ¡Despliegue completo! Espere 1-2 minutos y visite el sitio web
pause

Para usuarios de Mac

Crear archivo deploy.command:

#!/bin/bash
cd "$(dirname "$0")"

echo "🚀 Desplegando sitio web..."

git add .

read -p "Ingrese descripción de actualización (Enter para usar predeterminado): " message
if [ -z "$message" ]; then
    message="Actualizar sitio web $(date)"
fi

git commit -m "$message"
git push origin main

echo "✅ ¡Despliegue completo! Espere 1-2 minutos y visite el sitio web"

🆘 Solución de problemas comunes

Error 1: git push solicita usuario y contraseña

Solución:

  1. Generar Personal Access Token en configuración de GitHub
  2. Usuario: ingresar nombre de usuario de GitHub
  3. Contraseña: ingresar el token generado (no la contraseña de GitHub)

Error 2: Los archivos no se actualizan

Solución:

  1. Esperar 5 minutos (GitHub a veces tiene retraso)
  2. Presionar Ctrl+F5 para actualizar forzadamente el navegador
  3. Verificar si realmente se subió correctamente

Error 3: El sitio web muestra 404

Solución:

  1. Asegurarse de tener archivo index.html
  2. El nombre del archivo no debe contener chino o caracteres especiales
  3. Verificar si Settings → Pages está configurado correctamente

🎓 Ruta de aprendizaje progresivo

Primera semana: Operaciones básicas

  • Aprender a subir archivos usando la web de GitHub
  • Aprender a activar GitHub Pages
  • Aprender a modificar archivos y volver a subirlos

Segunda semana: Introducción a línea de comandos

  • Instalar Git
  • Aprender git clone
  • Aprender git add . && git commit -m "mensaje" && git push

Tercera semana: Operaciones avanzadas

  • Aprender a ver git status
  • Aprender a resolver conflictos simples
  • Aprender a usar ramas (branches)

📞 Guía para pedir ayuda

Cuándo puedes resolver por ti mismo

  • Sitio web no se actualiza → Esperar 5 minutos, actualizar navegador
  • Error al subir archivo → Verificar tamaño de archivo (GitHub limita a 100MB)
  • Error 404 → Verificar que el nombre del archivo sea correcto

Cuándo necesitas ayuda

  • Aparece mensaje de error en rojo
  • Primera vez configurando y encontraste problemas
  • Necesitas funciones avanzadas (dominio personalizado, etc.)

Cómo pedir ayuda efectivamente

  1. Capturar pantalla del error: Enviar captura completa del error
  2. Explicar pasos realizados: Decir qué hiciste
  3. Proporcionar enlace del repositorio: Permitir ver el problema directamente

💪 Construyendo confianza

Buenas noticias

  • La interfaz de GitHub Desktop es muy amigable
  • Las operaciones web son intuitivas y fáciles de entender
  • El script de un clic reduce operaciones repetitivas
  • Estoy disponible en cualquier momento para ayudarte a resolver problemas

Expectativas realistas

  • Las primeras 3 implementaciones podrían requerir ayuda
  • De la 4ta a 10ma vez básicamente podrás operar de forma independiente
  • Después de 10 veces será memoria muscular

Tiempo de aprendizaje

🚀 Empieza ahora

Mi recomendación: Primero intenta el Método A (versión web), después de tener éxito considera otros métodos.

Recuerda: Todos los programadores comenzaron sin saber Git, ¡solo necesitas dar el primer paso!

¡Pregúntame cualquier cosa en cualquier momento, te guiaré paso a paso! 😊

← Volver a Crecimientos Lentos