Creación y Publicación de Sitios Web con GitHub Pages

Contenido del curso

Fundamentos de Git y control de versiones

Introducción a GitHub

Herramientas de colaboración en GitHub

GitHub Codespaces

Seguridad y buenas prácticas en GitHub

Administración de GitHub

Gestión de Cambios con Pull Requests

GitHub Releases

Cierre

42
Pro tips ocultos de GitHub para trabajar mejor
10:13 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:40

Creación y Publicación de Sitios Web con GitHub Pages

Curso de Git y GitHub

Clase 25 de 42

Clase 25 / 42

Recursos

Si te interesa el desarrollo front end, existe una funcionalidad dentro de GitHub que te permite publicar sitios web de forma gratuita y accesible para cualquier persona en el mundo. GitHub Pages convierte un repositorio en un servidor de alojamiento web, sin importar si tu sitio es estático o dinámico, y todo funciona integrado con el flujo de trabajo habitual de Git.

¿Cómo funciona GitHub Pages y por qué es tan útil?

GitHub Pages no es un entorno aislado. Trabajas directamente sobre un repositorio de GitHub, lo que significa que cada cambio que hagas en tu código se refleja de manera casi inmediata en tu sitio publicado. Esto lo convierte en una herramienta ideal para portafolios, páginas personales o proyectos de práctica.

Un dato importante: por defecto, todas las GitHub Pages son públicas [1:13]. La única forma de mantener una página privada es mediante planes empresariales. Para la mayoría de casos de uso personal o educativo, el repositorio público funciona perfectamente.

¿Qué pasos seguir para crear tu repositorio de GitHub Pages?

El proceso comienza en la página pages.github.com [0:41], donde encontrarás un tutorial básico. La regla fundamental es que el repositorio debe llamarse exactamente con el formato username.github.io [0:54]. Es decir, tu nombre de usuario seguido de .github.io.

Crea un nuevo repositorio con el nombre tunombredeusuario.github.io.
Hazlo público y agrega un archivo README.
Copia la dirección SSH desde el botón code del repositorio.
Clona el repositorio en tu entorno local con git clone [1:33].

¿Cómo agregar contenido y la carpeta docs?

Una vez clonado el repositorio, ábrelo en Visual Studio Code con el comando code . [1:46]. Lo siguiente es colocar los archivos de tu sitio web dentro de una carpeta con un nombre específico: docs [2:24]. Esta palabra es obligatoria, ya que GitHub Pages la reconoce como la fuente del contenido a desplegar.

Puedes usar cualquier archivo HTML que desees. En el ejemplo se utiliza una plantilla con un index.html y una carpeta de assets [2:05]. Lo valioso es que puedes personalizar completamente el contenido: agregar tus redes sociales, tu imagen y cualquier información que quieras compartir.

¿Cómo subir los cambios y configurar el despliegue?

Con la carpeta docs lista, el siguiente paso es subir los cambios al repositorio remoto. Desde la terminal ejecuta los siguientes comandos [3:06]:

bash git add . git commit -m "plantilla HTML" git push

Una vez que los cambios estén en GitHub, dirígete a Settings del repositorio. En la columna izquierda selecciona la categoría Pages [3:27]. El asistente te preguntará desde dónde desplegar la información:

Selecciona Deploy from a branch en lugar de GitHub Actions.
Elige la rama Main como fuente.
Selecciona la carpeta /docs como directorio raíz del sitio [3:44].
Guarda los cambios.

Cuando aparezca el mensaje GitHub Pages Source Saved, regresa a la página principal y luego vuelve a entrar a Settings > Pages. Verás un nuevo mensaje indicando que tu sitio está en vivo junto con la URL pública [4:03].

¿Qué son los dominios personalizados en GitHub Pages?

Dentro de la configuración de Pages existe una sección llamada Custom Domain [4:26]. Esta funcionalidad te permite asociar un dominio propio, como tunombre.com, a tu GitHub Page. De esta forma, la URL deja de ser larga y pasa a corresponder con un nombre de dominio personalizado, lo cual es ideal si quieres darle un aspecto más profesional a tu presencia en línea.

Cada modificación que realices en la plantilla HTML dentro de la carpeta docs se verá reflejada de forma casi inmediata en tu página publicada [4:52]. Esto hace que el ciclo de desarrollo y despliegue sea extremadamente ágil.

Si ya creaste tu GitHub Page, compártela para que otros puedan ver el resultado de tu trabajo y te den retroalimentación sobre el diseño y contenido que elegiste.

Gabriel Obregón

Hace un año

🧭Cómo crear un sitio web con GitHub Pages

🌐 ¿Qué es GitHub Pages?

🔹 Plataforma gratuita de GitHub para crear y publicar sitios web.

🔹 Acepta sitios estáticos o dinámicos.

🔹 Ideal para:

Portafolios 💼
Blogs personales ✍️
Proyectos o documentación 💻 🔹 Convierte tu repositorio en una página accesible al mundo 🌍.

🚀 FASE 1: Iniciar el proyecto

🎯 Objetivo: Crear el entorno donde vivirá tu sitio web.

📍 Pasos esenciales:

🧩 1. Visita el sitio oficial

👉 — guía y ejemplos de uso.

🧩 2. Crea tu repositorio

📁 Nombre:

(usa tu nombre de usuario en lugar de username).

🧩 3. Configura el repositorio

Modo público 🌍
Agrega README.md con descripción del proyecto.

🧩 4. Clona el repositorio a tu PC

Ejecuta en tu terminal:

git clone [URL]

5. Abre el proyecto

💡 Usa Visual Studio Code o tu editor favorito.

🧱 FASE 2: Agregar y personalizar el contenido

🎯 Objetivo: Diseñar y estructurar el sitio que verán tus visitantes.

💡 Estructura recomendada:

/docs

├── index.html

├── style.css

└── script.js

🖋️ Pasos:

✨ Crea el contenido de tu sitio (HTML, CSS, imágenes, etc.).

✨ Nombra la carpeta principal docs (GitHub la usará para desplegar).

✨ Personaliza la plantilla con:

Enlaces a redes 🌐
Fotos o logotipo 🖼️
Información profesional 👤
Proyectos o cursos 📚

💾 Guarda y publica los cambios:

git add .

git commit -m "Primera versión del sitio"

git push

🌈 FASE 3: Publicar y personalizar tu sitio

🎯 Objetivo: Poner tu web en línea.

⚙️ Configuración en GitHub:

Entra en tu repositorio → Settings → Pages
Configura:
- Rama: main
- Carpeta: /docs

🌐 Tu sitio quedará disponible en:

💡 Opcional:

Asocia tu dominio propio (ejemplo: tusitio.com).
Añade un favicon o una imagen personalizada 🧩.
Cambia colores y fuentes para un estilo único 🎨.

🔁 Actualizaciones automáticas: Cada vez que subas cambios al repositorio, GitHub Pages los aplicará al instante.

Comentarios (51)51 comentarios

Sebastian Martinez

Jess Key

Hace 10 meses

Sergio Sanjuan

Hace 9 meses

Alexandra Carolina Avila Londono

Hace 5 meses

Mauricio Pineda

Junior Paradelo

Hace 2 años

Albert Jose Salas Yustiz

Luis Andres Martínez Cerrato

Ciro de Jesus Arrieta Lacouture

Alexis Dorado Muñoz

Andres Felipe Landazabal Sanmiguel

Diego Mauricio Zuluaga Rodríguez

Hace 6 meses

Alfonso Neil Jiménez Casallas

Gabriel Carpio Ochoa

MANUEL FELIPE MORA ROCHA

Santiago Pinto

Mario Alexander Vargas Celis

Diego Fernando Enriquez Bernal

Oscar Giovanni Bocanegra Hurtado

José Adrián Flores Vigil

SANTIAGO ALBERTO BOLIVAR CARDENAS.

Carlos Ramos

Luis Quiroz Prada

Jorge Fabian Luevano Rodriguez

Amin Espinoza

Profesor

Dussan Freire

ROMMEL DUAREZ SAENZ

Hace 8 meses

Fundamentos de Git y control de versiones

Control de Versiones con Git y GitHub: De Básico a Avanzado

Fundamentos de Git: Configuración y Comandos Básicos

Control de Versiones con Git: Comandos Básicos y Flujo de Trabajo

Gestión de ramas en Git: creación, fusión y eliminación eficiente

Git reset vs revert para deshacer commits

Git Tag y Checkout sin romper tu proyecto

Cómo resolver conflictos de merge en Git

Uso de Git en Visual Studio Code

Introducción a GitHub

Uso de GitHub para Colaboración y Desarrollo Seguro

Cómo crear y proteger tu cuenta de GitHub

Proceso de Trabajo con Git y GitHub: Creación y Revisión de Repositorios

Crea y clona tu primer repo en GitHub

Precios y Planes de Productos de Github

Configuración de SSH en GitHub para Windows, Linux y Mac

Uso de Forks y Estrellas en Repositorios de GitHub

Uso de git pull, git push y git fetch en repositorios GitHub

Plantillas de issues en GitHub paso a paso

Uso de Pull Requests en GitHub para Colaboración Efectiva

Herramientas de colaboración en GitHub

GitHub Projects para gestionar tareas en equipo

Automatiza GitHub Projects con workflows

Recursos Esenciales de Markdown para Documentación Efectiva

Creación de una Portada de Perfil en GitHub con Markdown

Creación y Gestión de Wikis en GitHub

Uso de GitHub Gist para Compartir y Revisar Código Colaborativo

Creación y Publicación de Sitios Web con GitHub Pages

GitHub Codespaces

Creación y Gestión de GitHub Codespaces en la Nube

Plantillas de Codespaces con Django y devcontainer

Pair programming con Live Share en Codespaces

Uso del Editor Web de GitHub para Edición Rápida de Archivos

Seguridad y buenas prácticas en GitHub

Gestión de GitHub Tokens para Acceso Seguro a Repositorios

Secret Scanning en GitHub y sus límites

Gestión de Seguridad de Paquetes con Dependabot en Proyectos .NET

Repositorios privados y .gitignore en GitHub

Administración de GitHub

Creación y gestión de repositorios en GitHub

Automatización de GitHub Actions para Actualizar Perfil

Gestiona GitHub desde tu terminal con gh

Gestión de Cambios con Pull Requests

Configuración de Proyectos de Software con Git y GitHub

Cómo resolver conflictos de merge en VS Code

Estrategias de Fusión de Ramas en Git

GitHub Releases

Creación de Releases en Github para Desarrolladores de Software

Instala tu paquete pip desde GitHub

Cierre

Pro tips ocultos de GitHub para trabajar mejor

Creación y Publicación de Sitios Web con GitHub Pages