{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Publicar una web gratis con GitHub Pages\n",
"\n",
"Un repositorio, un archivo y una dirección que puedes mandar por WhatsApp\n",
"\n",
"Cuaderno de práctica del capítulo 19 de **Git desde cero**, de Miss Yera.\n",
"\n",
"Corre de arriba abajo. Si lo abres en Google Colab no necesitas instalar nada.\n",
"\n",
"Capítulo completo: https://missyera.com/guias/git-desde-cero/publicar-una-web/\n",
"\n",
"Los ejercicios están al final y traen una celda vacía debajo de cada uno. Las\n",
"respuestas viven en el cuaderno de soluciones, y merece la pena pelearse un\n",
"rato antes de abrirlo 💛"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Antes de empezar\n",
"\n",
"Este capítulo son comandos de terminal, no Python. La celda de abajo baja el\n",
"ayudante que los ejecuta y que **recuerda en qué carpeta quedaste**, que es lo\n",
"que hace falta para que un `cd` de una celda siga valiendo en la siguiente.\n",
"\n",
"A partir de ahí, cada celda de comandos empieza por `%%consola`."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"import urllib.request\n",
"\n",
"# El ayudante de los cuadernos. Trae la corrección de los ejercicios y, en los\n",
"# capítulos de consola, la celda mágica que ejecuta los comandos. Se baja en\n",
"# vez de venir pegado aquí para que siempre sea el último.\n",
"urllib.request.urlretrieve(\n",
" \"https://missyera.com/static/cuadernos/revisa.py\", \"revisa.py\")\n",
"import revisa\n",
"revisa.carga({\n",
" 1: \"aW5kZXguaHRtbAo1IGluZGV4Lmh0bWw=\",\n",
" 2: \"VG8gLi4vY2F0YWxvZ28tc2Vydmlkb3IuZ2l0CiAqIFtuZXcgYnJhbmNoXSAgICAgIG1haW4gLT4gbWFpbgpicmFuY2ggJ21haW4nIHNldCB1cCB0byB0cmFjayAnb3JpZ2luL21haW4nLg==\",\n",
" 3: \"bGlzdG8gcGFyYSBQYWdlcw==\",\n",
" 4: \"Y2FuYWxlcy5odG1sCmluZGV4Lmh0bWw=\",\n",
" 5: \"Y2FuYWxlcy5odG1sCmNsaWVudGVzLmNzdgppbmRleC5odG1s\",\n",
" 6: \"LmdpdGlnbm9yZQpjYW5hbGVzLmh0bWwKaW5kZXguaHRtbApjYW5hbGVzLmh0bWwKY2xpZW50ZXMuY3N2CmluZGV4Lmh0bWw=\",\n",
" 7: \"Y2F0OiBjb250YWN0by5odG1sOiBObyBzdWNoIGZpbGUgb3IgZGlyZWN0b3J5\",\n",
"}, lenguaje=\"bash\")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Este es el capítulo que más gusta, porque es donde el repositorio deja de\n",
"ser una carpeta y se convierte en algo que puedes mandar por WhatsApp 📲\n",
"\n",
"GitHub Pages es hospedaje gratis para páginas web. No hay servidor que\n",
"contratar, no hay tarjeta, no hay panel de control. Hay un repositorio."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Qué se puede publicar y qué no"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"| Sí | No |\n",
"|---|---|\n",
"| HTML, CSS y JavaScript | Python, PHP o cualquier cosa de servidor |\n",
"| Un portafolio, un reporte, una landing | Un formulario que guarde en base de datos |\n",
"| Datos leídos de un CSV o un JSON del propio repositorio | Cualquier cosa con contraseñas dentro |"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"La regla corta: si tu página funciona abriendo el archivo con doble clic en\n",
"tu computadora, funciona en Pages 🖱️"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## El archivo que hace falta"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Uno solo, y tiene que llamarse `index.html`. Vamos a hacer el\n",
"reporte de ventas por ciudad:"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"%%consola\n",
"mkdir reporte-ventas\n",
"cd reporte-ventas\n",
"git init -q\n",
"cat > index.html <<'FIN'\n",
"\n",
"\n",
"Ventas por ciudad\n",
"\n",
" Ventas por ciudad
\n",
" \n",
" | Ciudad | Monto |
|---|
\n",
" | Lima | 1200 |
\n",
" | Arequipa | 890 |
\n",
"
\n",
"\n",
"\n",
"FIN\n",
"git add index.html\n",
"git commit -q -m \"Primera version del reporte web de ventas\"\n",
"ls\n",
"head -4 index.html"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Eso es una página web completa. Se puede abrir con doble clic ahora mismo y\n",
"se ve 🌐"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Publicarla"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Se sube como cualquier otro proyecto, con lo del capítulo\n",
"17:"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"%%consola\n",
"cd ..\n",
"git init -q --bare servidor.git\n",
"cd reporte-ventas\n",
"git remote add origin ../servidor.git\n",
"git push -u origin main"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Y en GitHub se activa en *Settings > Pages*: en\n",
"**Source** eliges *Deploy from a branch*, la rama\n",
"`main` y la carpeta `/ (root)`. Guardas.\n",
"\n",
"Dos minutos después, la dirección aparece arriba de esa misma pantalla:\n",
"`https://tuusuario.github.io/reporte-ventas/`. Esa es la que mandas\n",
"por WhatsApp 🎉"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Los tres tropiezos del primer intento"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"- **El archivo no se llama `index.html`.** Si se\n",
"llama `reporte.html`, la dirección de arriba da 404 y hay que entrar\n",
"a `.../reporte-ventas/reporte.html`.\n",
"\n",
"- **El repositorio es privado.** Con cuenta gratuita, Pages\n",
"necesita repositorio público.\n",
"\n",
"- **Miraste a los diez segundos.** Tarda un par de minutos la\n",
"primera vez, y a veces más."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"%%consola\n",
"mv index.html reporte.html\n",
"ls\n",
"test -f index.html && echo \"hay index\" || echo \"sin index.html: la raiz dara 404\"\n",
"mv reporte.html index.html\n",
"test -f index.html && echo \"arreglado\""
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Ojo con lo que va de paquete"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Pages publica **todo el contenido de la rama**. Si en el\n",
"repositorio hay un CSV con los clientes, ese CSV se descarga escribiendo su\n",
"dirección, aunque ninguna página enlace a él."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"%%consola\n",
"printf 'cliente,ciudad,monto\\nBodega Inti,Cusco,760\\n' > clientes.csv\n",
"printf 'no publicar esto\\n' > notas-internas.md\n",
"git add .\n",
"git commit -q -m \"Entran datos que NO deberian publicarse\"\n",
"git ls-files"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Los tres archivos quedarían publicados. Lo que se hace es sacarlos del\n",
"repositorio y dejarlos fuera con lo del capítulo\n",
"9:"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"%%consola\n",
"git rm -q --cached clientes.csv notas-internas.md\n",
"printf 'clientes.csv\\nnotas-internas.md\\n' > .gitignore\n",
"git add .gitignore\n",
"git commit -q -m \"Los datos internos salen del repositorio\"\n",
"git ls-files\n",
"git status --short"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Ahora el repositorio solo tiene lo publicable. Los archivos siguen en tu\n",
"carpeta, pero ya no viajan 🧳"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### La trampa\n",
"\n",
"Publicas la web del reporte de ventas con GitHub Pages para enseñársela a tu jefe. La página se ve preciosa.\n",
"\n",
"```\n",
"$ ls\n",
"index.html ventas.csv clientes.csv notas-internas.md\n",
"\n",
"$ git push origin main\n",
"To github.com:tuusuario/reporte.git\n",
" 3c1f80a..8a2b19c main -> main\n",
"```\n",
"\n",
"**¿Qué está mal?** La respuesta está en el cuaderno de soluciones. Míralo tú primero."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Comprueba que se entendió"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Comprueba que lo tienes\n",
"\n",
"Activaste Pages y la dirección da 404. ¿Qué revisas primero?\n",
"\n",
"a) Que el archivo se llame `index.html` y esté en la raíz\n",
"\n",
"b) Que el HTML no tenga errores\n",
"\n",
"c) Que tenga un dominio propio configurado\n",
"\n",
"d) Que el repositorio tenga licencia"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Ejercicios"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### 1. Crea la página del catálogo\n",
"\n",
"Un `index.html` con la tabla de bodegas."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"%%revisa 1\n",
"# tu turno"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### 2. Súbela\n",
"\n",
"Móntale el servidor y haz el primer push."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"%%revisa 2\n",
"# tu turno"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### 3. Comprueba el nombre del archivo\n",
"\n",
"Verifica que existe el `index.html` en la\n",
"raíz."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"%%revisa 3\n",
"# tu turno"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### 4. Agrega una segunda página\n",
"\n",
"Pages sirve cualquier archivo de la rama por su nombre."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"%%revisa 4\n",
"# tu turno"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### 5. Mira qué se publicaría\n",
"\n",
"Lista todo lo que la rama llevaría a la web."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"%%revisa 5\n",
"# tu turno"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### 6. Sácalo de la publicación\n",
"\n",
"Quita el CSV del repositorio sin borrarlo de tu carpeta."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"%%revisa 6\n",
"# tu turno"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### 7. Pide una página que no existe\n",
"\n",
"Comprueba en tu propia carpeta lo que Pages te contestaría\n",
"con un 404."
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {},
"outputs": [],
"source": [
"%%revisa 7\n",
"# tu turno"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Lo que te llevas"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"**Un `index.html` en la raíz de un repositorio público y ya\n",
"tienes web. Y todo lo demás de esa rama también se publica.**"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"---\n",
"\n",
"Ese era el capítulo 19 de **Git desde cero**. El texto completo, con las salidas de cada bloque, está en https://missyera.com/guias/git-desde-cero/publicar-una-web/\n",
"\n",
"Que tengas lindo día! 🌸"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"name": "python",
"version": "3.11"
}
},
"nbformat": 4,
"nbformat_minor": 5
}