MÓDULO 6.3

🚀 GitHub Pages: publica gratis

Pon tu proyecto en línea en minutos: gratis, con HTTPS automático y CDN global. Activa Pages, configura el dominio, entiende la caché y confirma que está en línea.

Temas

~40

Minutos

⚡

Intermedio

🌐

Deploy

🌐 Qué es GitHub Pages

Alojamiento gratuito de sitios estáticos directamente desde tu repositorio

🎯 GitHub Pages en 30 segundos

Tienes archivos HTML/CSS/JS en GitHub. Pages los sirve como un sitio público con URL propia, HTTPS automático y CDN global — sin pagar nada, sin configurar un servidor.

Push → build automático → CDN → sitio en línea. Todo el proceso lo gestiona GitHub.

✓ Qué incluye Pages (gratis)

✓HTTPS automático (Let's Encrypt)
✓CDN global (Fastly)
✓URL usuario.github.io/repo
✓Deploys automáticos con cada push

✗ Qué NO hace Pages

✗Backend/servidor (solo estático)
✗Base de datos
✗Node.js, PHP, Python en ejecución
✗Repositorios privados (plan gratuito)

🆓

Gratis

Para repos públicos

🔒

HTTPS

Let's Encrypt automático

🌍

CDN global

Fastly ~200 PoPs

📄

Estático

HTML/CSS/JS/imágenes

⚙️ Activar Pages

Branch/carpeta o GitHub Actions — 3 caminos, 1 resultado

Mediante la interfaz web (más fácil)

Abre el repositorio en GitHub
Ve a Settings → Pages
En "Source", selecciona la branch (main) y la carpeta (/ o /docs)
Haz clic en Save — espera 1-5 minutos

Mediante gh CLI (rápido y automático)

# Ativar Pages na branch main, pasta raiz
$ gh api repos/:owner/:repo/pages \
  -X POST \
  -f source='{"branch":"main","path":"/"}'

# Verificar status
$ gh api repos/:owner/:repo/pages | jq '.status, .html_url'

Branch gh-pages dedicada

# Criar e fazer push para branch gh-pages
$ git checkout --orphan gh-pages
$ git rm -rf .              # limpa a branch
$ cp -r dist/* .             # copia os arquivos de build
$ git add . && git commit -m "deploy: v1.0"
$ git push -u origin gh-pages

💡 ¿Qué método usar?

Para proyectos simples (HTML/CSS puro): rama main + carpeta /. Para proyectos con build (React, Vue, etc.): GitHub Actions hace el build y publica automáticamente. La carpeta /docs es útil cuando el código y la documentación están en el mismo repo.

🌿

Branch main

Más simple

📂

/docs folder

Documentación + código juntos

🔀

rama gh-pages

Deploy aislado

⚙️

Actions

Build automático

🔗 URL usuario.github.io

Dirección predeterminada — compártela en currículums y portfolios

📁 Sitio del proyecto (más común)

Repo: usuario/meu-projeto

URL: usuario.github.io/meu-projeto/

Necesita un index.html en la raíz de la rama/carpeta configurada.

👤 Sitio personal (portafolio personal)

Repo: usuario/usuario.github.io

URL: usuario.github.io

Solo 1 por cuenta. Se sirve automáticamente desde la branch main.

VERIFICAR E INSPECCIONAR URL

# Ver a URL do Pages do repo atual
$ gh api repos/:owner/:repo/pages --jq '.html_url'

# Abrir no browser diretamente
$ gh browse                     # abre o repositório
$ gh browse --settings          # vai para Settings

# Testar com curl (headless)
$ curl -I https://usuario.github.io/meu-projeto/
# Deve retornar: HTTP/2 200

🏠

index.html

Obligatorio en la raíz

🚫

404.html

Página de error personalizada

⚠️

Distingue mayúsculas y minúsculas

Las mayúsculas importan en las URL

🔚

Barra diagonal final

/repo/ ≠ /repo

🌍 Dominio personalizado y CNAME

meusite.com en vez de usuario.github.io — profesionalismo por ~R$50/año

Crear el archivo CNAME en el repo

# Na raiz do branch de Pages:
$ echo "meusite.com" > CNAME
$ git add CNAME && git commit -m "chore: adiciona domínio customizado"
$ git push

Configurar DNS en el registrador

Para www (subdominio):

Tipo: CNAME
Nome: www
Valor: usuario.github.io

Para dominio raíz (raíz):

Tipo: A  |  Nome: @  |  Valor: 185.199.108.153
Tipo: A  |  Nome: @  |  Valor: 185.199.109.153
Tipo: A  |  Nome: @  |  Valor: 185.199.110.153
Tipo: A  |  Nome: @  |  Valor: 185.199.111.153

Activar HTTPS y verificar

En Settings → Pages, configura el dominio y marca "Enforce HTTPS". Espera a que se propaguen los DNS (hasta 48h).

# Testar propagação DNS
$ dig www.meusite.com CNAME
$ nslookup meusite.com

📄

CNAME file

Dominio en el repo

🌐

DNS CNAME

Apunta a GitHub

⏱️

Propagación

Hasta 48h

🔒

Enforce HTTPS

Redirección automática

⏱️ Caché y actualización

¿Por qué no se actualizó el sitio? Entiende y resuélvelo en segundos

🤔 "¡Hice push, pero el sitio no cambió!"

Esto ocurre por una caché de dos capas: (1) el deploy de GitHub Pages tarda entre 1-10 minutos; (2) el navegador almacena los archivos en caché. Espera a que termine la compilación y fuerza la actualización de la página.

✓ Cómo verificar la compilación

✓Pestaña Actions en GitHub: estado del workflow "pages build"
✓gh run list --workflow pages en la terminal
✓gh run watch monitorea en tiempo real
✓Configuración → Pages muestra "Your site is live at..."

🛠️ Forzar la actualización en el navegador

→Windows/Linux: Ctrl+Shift+R
→macOS: Cmd+Shift+R
→DevTools → Network → Disable cache (mientras esté abierto)
→Agregar ?v=2 en la URL para probar

MONITOREAR DEPLOY EN TIEMPO REAL

# Ver último run do Pages
$ gh run list --limit 3
STATUS  TITLE                           WORKFLOW       ID
✓       pages build and deployment      pages          123456789
✓       pages build and deployment      pages          123456788

# Assistir deploy em curso
$ gh run watch
Refreshing run status every 3 seconds. Press Ctrl+C to quit.
✓ build (3s)
✓ deploy (8s)
✓ Run pages build and deployment completed with 'success'

⏳

1-10 min

Tiempo de build

🔄

Actualización forzada

Ctrl+Shift+R

👁️

gh run watch

Deploy en vivo

📦

?v=2

Invalidación de caché

✅ Verificar que esté en línea

Confirmar el deploy con comandos reales, sin suposiciones

LISTA DE VERIFICACIÓN POST-DEPLOY

# 1. Confirmar que Pages está ativo
$ gh api repos/:owner/:repo/pages --jq '{status:.status, url:.html_url}'
{"status":"built","url":"https://usuario.github.io/repo/"}

# 2. Testar HTTP status
$ curl -s -o /dev/null -w "%{http_code}" https://usuario.github.io/repo/
200

# 3. Verificar HTTPS redirect
$ curl -I http://usuario.github.io/repo/
HTTP/1.1 301 Moved Permanently
Location: https://usuario.github.io/repo/

# 4. Verificar conteúdo correto
$ curl -s https://usuario.github.io/repo/ | grep ""
<title>Meu Projeto</title>

📊 Monitoreo continuo

Para proyectos en producción, configura UptimeRobot (gratis) para que haga ping al sitio cada 5 minutos y te avise por correo si se cae. También agrega la insignia de estado al README: ![Uptime](https://img.shields.io/website?url=...)

✓ Deploy exitoso

✓Actions muestra un círculo verde
✓curl devuelve HTTP 200
✓HTTPS activo (candado en el navegador)
✓Contenido más reciente visible

✗ Deploy problemático

✗Actions muestra una X roja → revisa los logs
✗404 → verifica si index.html existe en la carpeta correcta
✗Sitio antiguo → actualización forzada + esperar a la CDN
✗HTTPS no disponible → espera a que se aprovisione

🟢

HTTP 200

Sitio accesible

🔒

HTTPS

Candado en el navegador

📡

UptimeRobot

Monitor gratuito

🏷️

Insignia de uptime

Estado en el README

🎯 Resumen del módulo

Qué aprendiste

✓GitHub Pages: alojamiento gratuito de sitios estáticos
✓3 formas de activarlo: branch, /docs o gh-pages
✓URL predeterminada usuario.github.io/repo
✓Dominio personalizado con CNAME + DNS
✓Caché: espera a que termine el build y fuerza la actualización
✓Verificación completa con curl y gh CLI

Siguiente módulo

Tu proyecto ya está en línea; ahora es momento de evolucionar, versionar releases, construir un portafolio y mantener el proyecto vivo a lo largo del tiempo. Cierre del curso.

Módulo 6.4 — Evolucionar y difundir→

← Módulo 6.2 Siguiente: Evolucionar →