GitHub Pages

Paso 1 de 10 · Del archivo local a la Web

Tu CV ya existe. Ahora debe dejar de vivir solo en tu computadora.

Hasta ahora tu archivo puede abrirse con una ruta como C:\...\CV.html. Publicarlo significa colocarlo en un servidor para que otras personas puedan abrirlo mediante una dirección web.

Al terminar: podrás explicar la diferencia entre “abrir un archivo local” y “visitar un sitio publicado”.

1 · Tu computadoraindex.html + styles.css

→

2 · HostingLos archivos quedan disponibles en un servidor.

→

3 · NavegadorOtra persona abre una URL pública.

Archivo local

Solo funciona desde tu equipo y depende de una ruta local.

file:///C:/Usuarios/Ana/CV.html

Sitio publicado

Puede abrirse desde Internet mediante una URL.

https://ana.github.io/cv-web/

Referencia del concepto: MDN explica que, una vez organizado el código, necesitas poner los archivos en línea para que otras personas puedan encontrarlos; entre los conceptos básicos de publicación están hosting y dominio.

Comprueba la idea

¿Qué hace que tu CV deje de ser solamente un archivo local?

Paso 2 de 10 · Direcciones y servidores

Dominio y hosting no son lo mismo

Para publicar necesitas comprender dos ideas: dónde están tus archivos y cómo llega una persona hasta ellos.

Al terminar: distinguirás dominio, hosting y URL sin confundirlos.

Dominio

Es el nombre o dirección que identifica un sitio, por ejemplo universidad.mx.

Hosting

Es el servicio que almacena y entrega los archivos del sitio desde un servidor.

URL

Es una dirección completa hacia un recurso. Puede incluir protocolo, dominio y ruta.

Anatomía de una URL

https://usuario.github.io/cv-web/

Protocolo

Cómo se realiza la comunicación.

Dominio

El nombre donde se encuentra el sitio.

Ruta

La ubicación del proyecto dentro del sitio.

MDN: el hosting es espacio de archivos en un servidor web, mientras que el nombre de dominio es la dirección única donde las personas encuentran un sitio.

Comprueba

En https://usuario.github.io/cv-web/, ¿qué representa usuario.github.io?

Paso 3 de 10 · Alternativas

Hay varias formas de publicar un sitio estático

Para un CV hecho con HTML y CSS no necesitas un servidor complejo. Existen plataformas para desplegar sitios estáticos; en esta práctica utilizaremos GitHub Pages.

Al terminar: sabrás por qué GitHub Pages es apropiado para este proyecto y reconocerás otras alternativas.

Práctica de esta fase

Publica HTML, CSS y JavaScript directamente desde un repositorio de GitHub.

Netlify

Alternativa para desplegar proyectos web estáticos y otros flujos de frontend.

Cloudflare Pages

Otra opción para alojar y desplegar proyectos frontend.

Vercel

Plataforma de despliegue muy utilizada en frontend moderno.

¿Por qué GitHub Pages aquí?

Continuidad

El mismo repositorio conserva los archivos que ya creaste.

Publicación estática

Tu CV solo necesita HTML y CSS.

Portafolio

El código y el sitio quedan vinculados a tu trabajo en GitHub.

GitHub: GitHub Pages es un servicio de alojamiento de sitios estáticos que toma HTML, CSS y JavaScript desde un repositorio y publica un sitio web.

Decisión

¿Qué característica hace que GitHub Pages sea adecuado para tu CV?

Paso 4 de 10 · Del proyecto al repositorio

GitHub guarda tu proyecto; GitHub Pages lo publica

No son exactamente lo mismo. Primero colocas tus archivos en un repositorio. Después configuras GitHub Pages para convertir esos archivos en un sitio público.

Al terminar: comprenderás la ruta repositorio → Pages → URL.

La ruta que vas a realizar

Archivos localesindex.html
styles.css

→

Repositorio GitHubGuarda y versiona el proyecto

→

GitHub PagesPublica una URL web

Repositorio

Es el espacio de un proyecto en GitHub. Contiene archivos y un historial de cambios.

Publicación

Pages toma una fuente del repositorio y genera el sitio accesible desde Internet.

Importante antes de publicar

Un sitio de GitHub Pages es público en Internet. No debes incluir contraseñas, claves API, documentos privados ni datos que no quieras hacer públicos.

Comprueba

¿En qué orden sucede esta práctica?

Paso 5 de 10 · Actividad · Preparación

Prepara los archivos para que GitHub Pages los encuentre

Tu archivo de la Fase 2 se llamaba CV.html. Para publicar el proyecto de forma clara, lo convertiremos en la página de entrada index.html.

Producto de este paso: una carpeta lista para publicar con index.html, styles.css y recursos relativos.

Antes

📁 CV/

📄 CV.html

📄 styles.css

→

Listo para publicar

📁 cv-web/

📄 index.html

📄 styles.css

📁 img/ (si aplica)

Ruta correcta

<link rel="stylesheet" href="styles.css">
<img src="img/foto.jpg" alt="...">

Las rutas son relativas al proyecto.

Evita rutas locales

C:\Usuarios\Ana\styles.css
file:///C:/Fotos/foto.jpg

Esas rutas solo existen en tu computadora.

Checklist antes de subir

Renombré mi página principal a index.htmlEs el punto de entrada esperado para este proyecto.styles.css está junto a index.htmlO ajusté correctamente la ruta si está en otra carpeta.No uso rutas de WindowsMis enlaces a CSS e imágenes son relativos.Abrí index.html localmente y se ve correctamenteAntes de publicar, compruebo el proyecto.

Completa las cuatro comprobaciones.

GitHub Docs: GitHub Pages busca un archivo de entrada como index.html en la raíz de la fuente de publicación que hayas configurado.

Paso 6 de 10 · Actividad · Repositorio

Crea un repositorio público y sube tu CV

Para esta práctica utilizaremos un sitio de proyecto, por ejemplo cv-web. Así la URL esperada tendrá la forma usuario.github.io/cv-web/.

Producto de este paso: un repositorio de GitHub con index.html y styles.css visibles en la raíz.

Datos de tu publicación

Usuario de GitHub

Nombre del repositorio

Usa nombres simples: minúsculas y guiones son fáciles de leer.

Repositorio esperado:
https://github.com/usuario/cv-web

Sitio esperado después de Pages:
https://usuario.github.io/cv-web/

Pasos en GitHub

Abre GitHub y elige New repositoryInicia sesión con tu cuenta.

Escribe el nombre del repositorioPara esta actividad sugerimos cv-web.

Selecciona PublicEn GitHub Free, Pages funciona con repositorios públicos.

Crea el repositorio y sube los archivosUsa Add file → Upload files y agrega index.html, styles.css e imágenes.

Confirma que los archivos se ven en la raízEl repositorio debe mostrar claramente tu proyecto.

Abrir “New repository” en GitHub

Ya creé el repositorio y subí mis archivos.Regresé a este artefacto después de comprobarlo en GitHub.

Marca la comprobación cuando tu repositorio esté listo.

Paso 7 de 10 · Actividad · Publicación

Activa GitHub Pages desde Settings → Pages

Para un CV estático no necesitas un proceso de compilación especial. GitHub recomienda publicar desde una rama cuando no necesitas controlar un proceso de build.

Producto de este paso: GitHub Pages configurado para publicar desde main y /(root).

Ruta exacta

Abre tu repositorioDebe contener index.html.

Entra a SettingsSi no aparece, revisa el menú adicional del repositorio.

En la barra lateral selecciona PagesEstá dentro de la configuración del repositorio.

En Build and deployment elige Deploy from a branchPara esta práctica publicaremos directamente desde una rama.

Selecciona main y /(root)Después pulsa Save.

Settings · Pages

Build and deployment

Source

Deploy from a branch

Branch

main ▾ /(root) ▾

Save

Después GitHub iniciará el proceso de publicación.

GitHub Docs: en Settings → Pages, dentro de Build and deployment, selecciona Deploy from a branch, después la rama y carpeta que funcionarán como fuente de publicación.

Configuré Pages con main y /(root).GitHub puede tardar varios minutos en publicar los cambios.

Después de guardar, espera a que GitHub muestre el sitio publicado.

Paso 8 de 10 · Verificación

Un enlace existe cuando realmente puedes abrirlo y ver tu CV

No basta con configurar Pages. Debes abrir el sitio publicado, comprobar contenido y estilos, y registrar las dos direcciones que formarán parte de tu evidencia.

Producto de este paso: URL pública del CV verificada manualmente + URL del repositorio.

Registra tus enlaces

URL pública de tu CV *

URL del repositorio *

Escribe ambos enlaces y ábrelos para realizar la comprobación.

Comprobación manual

El enlace abre sin error 404Veo mi nombre y contenido del CVLos estilos CSS se aplicanProbé el sitio también en una ventana o dispositivo diferente

Confirma cada punto después de abrir tu sitio.

Si algo falla, revisa en este orden

404 / página no encontrada

Comprueba que exista index.html en la fuente de publicación y que Pages use la rama correcta.

Se ve sin CSS

Revisa href="styles.css" y evita rutas de Windows o rutas absolutas como /styles.css en un sitio de proyecto.

Imágenes rotas

Comprueba mayúsculas/minúsculas y rutas relativas como img/foto.jpg.

Acabo de cambiar algo

GitHub indica que los cambios pueden tardar varios minutos en publicarse; vuelve a revisar después.

GitHub Docs: la página publicada puede tardar hasta unos minutos en reflejarse después de los cambios; GitHub ofrece el botón Visit site en la configuración de Pages.

Paso 9 de 10 · Evidencia y metacognición

Tu evidencia debe demostrar que el CV ya está publicado

El PDF registrará tu identidad, URL pública, repositorio, comprobaciones, autoevaluación y reflexión sobre el proceso.

Entrega: PDF con matrícula que incluya el enlace al sitio ya publicado.

3 · Reflexión metacognitiva

¿Qué diferencia comprendes ahora entre archivo local, hosting y dominio? *

¿Qué paso del proceso de publicación fue más importante para ti y por qué? *

¿Qué problema encontraste y cómo lo resolviste? *

Si mañana publicaras otro proyecto, ¿qué procedimiento repetirías? *

4 · Genera tu evidencia

El PDF incluirá el enlace público y el repositorio, además de tus comprobaciones y reflexión.

Completa los campos obligatorios antes de generar el PDF.

5 · Transparencia, accesibilidad y autoría

Accesibilidad

Diseñado y revisado con criterios WCAG 2.2 AA: teclado, foco visible, etiquetas, estados, reflow y movimiento reducido.

Usabilidad

Se aplican principios de Nielsen: estado visible, lenguaje cercano, prevención de errores, ayuda y recuperación.

Diseño pedagógico · EAIA

Este recurso educativo fue diseñado bajo los principios de la Estrategia de Aprendizaje Inmersivo con Artefactos (EAIA), integrando comprensión conceptual, representación visual, interacción guiada, construcción progresiva de un producto, retroalimentación, generación de evidencia y reflexión metacognitiva.

Transparencia de IAG · UdeC

La IAG apoyó al docente en la elaboración del material y la herramienta. No publica por el estudiante ni sustituye su evidencia o reflexión.

Autoría

Ing. Ricardo Jaramillo Velasco · Facultad de Telemática · Universidad de Colima.

Paso 10 de 10 · Cierre

Tu CV ya recorrió el ciclo completo

Construiste estructura con HTML, presentación con CSS y finalmente un sitio público mediante GitHub Pages.

Cadena final: HTML → CSS → repositorio → hosting estático → URL pública.

Fase 1HTML: estructura y significado

→

Fase 2CSS: presentación y diseño

→

Fase 3GitHub Pages: publicación

Referencias técnicas y pedagógicas · APA 7

GitHub. (s. f.). ¿Qué es GitHub Pages? GitHub Docs. Recuperado el 19 de septiembre de 2026, de https://docs.github.com/es/pages/getting-started-with-github-pages/what-is-github-pages
GitHub. (s. f.). Creación de un sitio de GitHub Pages. GitHub Docs. Recuperado el 19 de septiembre de 2026, de https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site
GitHub. (s. f.). Configuración de un origen de publicación para el sitio de GitHub Pages. GitHub Docs. Recuperado el 19 de septiembre de 2026, de https://docs.github.com/es/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site
Mozilla Developer Network. (s. f.). Publicar tu sitio web. MDN Web Docs. https://developer.mozilla.org/es/docs/Learn_web_development/Getting_started/Your_first_website/Publishing_your_website
World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. https://www.w3.org/TR/WCAG22/
Nielsen Norman Group. (2024). 10 usability heuristics for user interface design. https://www.nngroup.com/articles/ten-usability-heuristics/

Tu CV ya existe. Ahora debe dejar de vivir solo en tu computadora.

Archivo local

Sitio publicado

Comprueba la idea

Dominio y hosting no son lo mismo

Comprueba

Hay varias formas de publicar un sitio estático

GitHub Pages

Netlify

Cloudflare Pages

Vercel

¿Por qué GitHub Pages aquí?

Decisión

GitHub guarda tu proyecto; GitHub Pages lo publica

Repositorio

Publicación

Importante antes de publicar

Comprueba

Prepara los archivos para que GitHub Pages los encuentre

Antes

Listo para publicar

Ruta correcta

Evita rutas locales

Checklist antes de subir

Crea un repositorio público y sube tu CV

Datos de tu publicación

Pasos en GitHub

Activa GitHub Pages desde Settings → Pages

Ruta exacta

Build and deployment

Un enlace existe cuando realmente puedes abrirlo y ver tu CV

Registra tus enlaces

Comprobación manual

Si algo falla, revisa en este orden

Tu evidencia debe demostrar que el CV ya está publicado

1 · Identificación

2 · Autoevaluación

3 · Reflexión metacognitiva

4 · Genera tu evidencia

5 · Transparencia, accesibilidad y autoría

Tu CV ya recorrió el ciclo completo

Referencias técnicas y pedagógicas · APA 7