Crearemos un sitio web simple, lo subiremos a GitHub y lo publicaremos en GitHub Pages.
Requisitos previos:
- Cuenta de GitHub.
- Git instalado en tu ordenador (puedes verificarlo escribiendo
git --versionen la terminal).
Pasos detallados:
1. Crear una página web de ejemplo
Crea una página web simple en tu computadora. Aquí tienes un código básico de ejemplo para una página web llamada index.html:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Web en GitHub Pages</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
header {
background-color: #282c34;
padding: 20px;
color: white;
}
h1 {
font-size: 2.5rem;
}
main {
padding: 20px;
}
</style>
</head>
<body>
<header>
<h1>Bienvenido a Mi Sitio Web</h1>
</header>
<main>
<p>Este es un ejemplo de cómo publicar una página web en GitHub Pages.</p>
<p>Desarrollado por: <strong>Tu Nombre</strong></p>
</main>
</body>
</html>
Guarda este archivo en una carpeta, por ejemplo mi-sitio-web.
2. Crear un repositorio en GitHub
- Inicia sesión en GitHub.
- Haz clic en el ícono de + en la parte superior derecha y selecciona New repository.
- Ponle un nombre, como
mi-sitio-web, y elige que sea público. - No es necesario marcar la opción para inicializar con un README, ya que lo subiremos luego.
- Haz clic en Create repository.
3. Clonar el repositorio en tu computadora
Ahora que has creado el repositorio, vamos a clonarlo en tu computadora.
- Abre una terminal (o Git Bash en Windows) y clona el repositorio:
git clone https://github.com/tu-usuario/mi-sitio-web.git
- Ve al directorio clonado:
cd mi-sitio-web
4. Agregar los archivos del proyecto web
Copia el archivo index.html que creaste en el paso 1 dentro de este repositorio local (dentro de la carpeta mi-sitio-web).
5. Subir tu proyecto web a GitHub
Ahora vamos a subir el archivo al repositorio de GitHub.
- Primero, verifica que los archivos se han copiado correctamente usando:
ls
- Luego agrega los archivos al área de preparación de Git:
git add .
- Realiza un commit con un mensaje explicativo:
git commit -m "Agregando mi sitio web de ejemplo"
- Finalmente, sube los cambios al repositorio en GitHub:
git push origin main
Si estás usando la rama master en lugar de main, sustituye main por master.
6. Configurar GitHub Pages
Ahora que los archivos están en GitHub, vamos a habilitar GitHub Pages para publicar la web.
Ve a tu repositorio en GitHub.
Haz clic en la pestaña Settings (Configuración).
Desplázate hacia abajo hasta la sección Pages.
En Source, selecciona la rama main (o master).
Asegúrate de que el directorio raíz esté configurado como /root.
Haz clic en Save.
GitHub generará una URL para tu página web en unos segundos.
7. Ver tu página web publicada
Después de unos minutos, tu sitio estará en vivo. La URL seguirá este formato:
https://tu-usuario.github.io/mi-sitio-web/
Reemplaza tu-usuario con tu nombre de usuario de GitHub. Por ejemplo, si tu usuario es juan123, la URL será:
https://juan123.github.io/mi-sitio-web/
8. Actualizar tu sitio web
Cada vez que quieras actualizar tu sitio web, simplemente sigue estos pasos:
- Haz los cambios en los archivos locales de tu sitio (por ejemplo, en
index.html). - En la terminal, añade los cambios:
git add .
- Haz un commit con un mensaje:
git commit -m "Actualización de mi sitio web"
- Empuja los cambios a GitHub:
git push origin main
GitHub actualizará automáticamente tu sitio web en unos minutos.
El resultado es:
https://ismma.github.io/mi-sitio-web
Ingeniero en Informática, Investigador, me encanta crear cosas o arreglarlas y darles una nueva vida. Escritor y poeta. Más de 20 APPs publicadas y un libro en Amazon.