Publicar una web gratis con GitHub Pages

Este es el capítulo que más gusta, porque es donde el repositorio deja de ser una carpeta y se convierte en algo que puedes mandar por WhatsApp 📲

GitHub Pages es hospedaje gratis para páginas web. No hay servidor que contratar, no hay tarjeta, no hay panel de control. Hay un repositorio.

Qué se puede publicar y qué no

Sí	No
HTML, CSS y JavaScript	Python, PHP o cualquier cosa de servidor
Un portafolio, un reporte, una landing	Un formulario que guarde en base de datos
Datos leídos de un CSV o un JSON del propio repositorio	Cualquier cosa con contraseñas dentro

La regla corta: si tu página funciona abriendo el archivo con doble clic en tu computadora, funciona en Pages 🖱️

El archivo que hace falta

Uno solo, y tiene que llamarse index.html. Vamos a hacer el reporte de ventas por ciudad:

mkdir reporte-ventas
cd reporte-ventas
git init -q
cat > index.html <<'FIN'
<!doctype html>
<html lang="es">
<head><meta charset="utf-8"><title>Ventas por ciudad</title></head>
<body>
  <h1>Ventas por ciudad</h1>
  <table>
    <tr><th>Ciudad</th><th>Monto</th></tr>
    <tr><td>Lima</td><td>1200</td></tr>
    <tr><td>Arequipa</td><td>890</td></tr>
  </table>
</body>
</html>
FIN
git add index.html
git commit -q -m "Primera version del reporte web de ventas"
ls
head -4 index.html

index.html
<!doctype html>
<html lang="es">
<head><meta charset="utf-8"><title>Ventas por ciudad</title></head>
<body>

Eso es una página web completa. Se puede abrir con doble clic ahora mismo y se ve 🌐

Publicarla

Se sube como cualquier otro proyecto, con lo del capítulo 17:

cd ..
git init -q --bare servidor.git
cd reporte-ventas
git remote add origin ../servidor.git
git push -u origin main

To ../servidor.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.

Y en GitHub se activa en Settings > Pages: en Source eliges Deploy from a branch, la rama main y la carpeta / (root). Guardas.

Dos minutos después, la dirección aparece arriba de esa misma pantalla: https://tuusuario.github.io/reporte-ventas/. Esa es la que mandas por WhatsApp 🎉

Los tres tropiezos del primer intento

El archivo no se llama index.html. Si se llama reporte.html, la dirección de arriba da 404 y hay que entrar a .../reporte-ventas/reporte.html.
El repositorio es privado. Con cuenta gratuita, Pages necesita repositorio público.
Miraste a los diez segundos. Tarda un par de minutos la primera vez, y a veces más.

mv index.html reporte.html
ls
test -f index.html && echo "hay index" || echo "sin index.html: la raiz dara 404"
mv reporte.html index.html
test -f index.html && echo "arreglado"

reporte.html
sin index.html: la raiz dara 404
arreglado

Ojo con lo que va de paquete

Pages publica todo el contenido de la rama. Si en el repositorio hay un CSV con los clientes, ese CSV se descarga escribiendo su dirección, aunque ninguna página enlace a él.

printf 'cliente,ciudad,monto\nBodega Inti,Cusco,760\n' > clientes.csv
printf 'no publicar esto\n' > notas-internas.md
git add .
git commit -q -m "Entran datos que NO deberian publicarse"
git ls-files

clientes.csv
index.html
notas-internas.md

Los tres archivos quedarían publicados. Lo que se hace es sacarlos del repositorio y dejarlos fuera con lo del capítulo 9:

git rm -q --cached clientes.csv notas-internas.md
printf 'clientes.csv\nnotas-internas.md\n' > .gitignore
git add .gitignore
git commit -q -m "Los datos internos salen del repositorio"
git ls-files
git status --short

.gitignore
index.html

Ahora el repositorio solo tiene lo publicable. Los archivos siguen en tu carpeta, pero ya no viajan 🧳

La trampa

Publicas la web del reporte de ventas con GitHub Pages para enseñársela a tu jefe. La página se ve preciosa.

$ ls
index.html  ventas.csv  clientes.csv  notas-internas.md

$ git push origin main
To github.com:tuusuario/reporte.git
   3c1f80a..8a2b19c  main -> main

Qué está mal

Pages publica el repositorio entero, no solo el HTML 🌐

La página que se ve bonita es index.html, pero todo lo demás que esté en esa rama queda accesible por su dirección directa: tuusuario.github.io/reporte/clientes.csv se descarga sin pedir nada, y las notas internas también.

Y hay una capa más: el repositorio de una Pages gratuita tiene que ser público, así que además los archivos están en el repositorio a la vista de cualquiera.

La costumbre: lo que se publica va en su propia carpeta con solo lo publicable dentro, y lo que no se publica no entra al repositorio, que es de lo que trata el capítulo 9.

Comprueba que se entendió

Comprueba que lo tienes

Activaste Pages y la dirección da 404. ¿Qué revisas primero?

Que el archivo se llame index.html y esté en la raíz
Que el HTML no tenga errores
Que tenga un dominio propio configurado
Que el repositorio tenga licencia

Ejercicios

1. Crea la página del catálogo

Un index.html con la tabla de bodegas.

cd ..
mkdir catalogo-web
cd catalogo-web
git init -q
cat > index.html <<'FIN'
<!doctype html>
<html lang="es">
<head><meta charset="utf-8"><title>Catalogo de bodegas</title></head>
<body><h1>Bodegas por ciudad</h1><p>Bodega Inti, Cusco</p></body>
</html>
FIN
git add index.html
git commit -q -m "Pagina del catalogo de bodegas"
ls
wc -l index.html

index.html
5 index.html

Cinco líneas y ya es una web publicable.

2. Súbela

Móntale el servidor y haz el primer push.

cd ..
git init -q --bare catalogo-servidor.git
cd catalogo-web
git remote add origin ../catalogo-servidor.git
git push -u origin main

To ../catalogo-servidor.git
 * [new branch]      main -> main
branch 'main' set up to track 'origin/main'.

Con GitHub, aquí es donde entras a Settings y activas Pages.

3. Comprueba el nombre del archivo

Verifica que existe el index.html en la raíz.

test -f index.html && echo "listo para Pages" || echo "falta index.html"

listo para Pages

El 90% de los 404 del primer intento son esto.

4. Agrega una segunda página

Pages sirve cualquier archivo de la rama por su nombre.

printf '<h1>Ventas por canal</h1><p>Bodegas 4200</p>\n' > canales.html
git add canales.html
git commit -q -m "Pagina de ventas por canal"
git push -q origin main
git ls-files

canales.html
index.html

Esa segunda vive en .../catalogo-web/canales.html.

5. Mira qué se publicaría

Lista todo lo que la rama llevaría a la web.

printf 'cliente,monto\nBodega Inti,760\n' > clientes.csv
git add clientes.csv
git commit -q -m "Entra el CSV de clientes"
git ls-files

canales.html
clientes.csv
index.html

Ese CSV se descargaría escribiendo su dirección. Nadie lo enlaza, y da igual 👀

6. Sácalo de la publicación

Quita el CSV del repositorio sin borrarlo de tu carpeta.

git rm -q --cached clientes.csv
printf 'clientes.csv\n' > .gitignore
git add .gitignore
git commit -q -m "El CSV de clientes sale de la web"
git ls-files
ls

.gitignore
canales.html
index.html
canales.html
clientes.csv
index.html

Fuera del repositorio, dentro de tu carpeta. Es exactamente lo que quieres 🧹

7. Pide una página que no existe

Comprueba en tu propia carpeta lo que Pages te contestaría con un 404.

cat contacto.html

cat: contacto.html: No such file or directory

Lo mismo que pasa en la web: si el archivo no está en la rama, no hay página que mostrar 🕳️

Lo que te llevas

Un index.html en la raíz de un repositorio público y ya tienes web. Y todo lo demás de esa rama también se publica.