sesión 3 de 3
publicar
y mantener
Tres horas. Al final de hoy tu web está en internet, entiendes por qué, y sabes actualizarla tú sola.
taller de web autogestionada · la escocesa · meowrhino.studio
Las láminas amarillas son práctica: las haces tú en el ordenador. Las blancas son teoría: se explican proyectadas.
qué es todo esto
GitHub, Pages, Cloudflare, dominio, DNS. Cinco palabras que dan miedo y no son nada.
el camino de tu carpeta a internet
tu carpeta → el repositorio → el servidor → la dirección
en tu ordenador (GitHub) (Pages) (el dominio)
editas aquí guarda copia la sirve a la gente
e histórico quien la pida la escribeCada casilla resuelve un problema distinto. Puedes cambiar cualquiera de ellas sin tocar las demás, y por eso esto no caduca.
qué es un repositorio, y qué es github
Repositorio
Una carpeta que además guarda el histórico de sus cambios. Cada vez que subes algo queda registrado qué cambió, cuándo y por qué. Puedes volver a cualquier momento anterior.
Es la diferencia entre una carpeta normal y un repositorio. Nada más.
GitHub
Una empresa que aloja repositorios gratis. Es de Microsoft. Usarla no te ata: tu carpeta sigue en tu ordenador, y si mañana GitHub cierra o te deja de gustar, subes esa misma carpeta a otro sitio en diez minutos.
Eso es lo que hace que esto sea autogestionado: la copia buena la tienes tú.
Existe una forma de hacer esto escribiendo comandos, y es más cómoda a la larga. Hoy no la necesitas para nada. Todo con el ratón, en la web.
github pages y cloudflare pages
Un repositorio, por sí solo, solo guarda archivos. Para que alguien pueda visitarlos hace falta un servidor que los entregue. Eso es lo que hacen estos dos, gratis:
| servicio | qué hace | cuándo |
|---|---|---|
| GitHub Pages | Coge tu repositorio y lo publica en tunombre.github.io/mi-web. Cuatro clics, sin configurar nada. | Lo que usamos hoy. |
| Cloudflare Pages | Lo mismo, pero conectado al repositorio: cada vez que subes un cambio, republica sola. Y va más rápido en el resto del mundo. | Buen segundo paso, cuando ya te aburra el proceso manual. |
| Neocities | Más artesanal, con comunidad de webs personales y editor propio en la web. | Si te apetece la parte social. |
Montamos GitHub Pages y ya está. Cloudflare queda apuntado en la guía para cuando quieras. Dos caminos abiertos a la vez en clase es la manera de que nadie acabe ninguno.
qué es un dominio, y qué es el dns
Cada servidor de internet tiene un número, algo como 185.199.108.153. Nadie se acuerda de eso.
Un dominio es un nombre alquilado que apunta a ese número: ritamestre.com. Lo alquilas por años, entre 10 y 15 € al año.
El DNS es la agenda de teléfonos que traduce el nombre al número. Cuando «conectas» un dominio a tu web, lo que haces es escribir una línea en esa agenda.
ritamestre.com
↓ el DNS traduce
185.199.108.153
↓ ahí vive
tu carpeta publicadaTarda un rato en propagarse — de minutos a un día — porque esa agenda está copiada en medio mundo y cada copia se actualiza a su ritmo.
El dominio se pone a tu nombre y con tu correo. Siempre. Aunque te lo configure otra persona, aunque sea de confianza, aunque sea más cómodo.
Es lo único de todo esto que se puede perder de verdad. La carpeta la tienes tú, el repositorio se rehace — pero un dominio a nombre de otro es un dominio que no es tuyo.
checklist antes de publicar
Cinco minutos repasando la carpeta, persona a persona. Ahorran media hora de depuración después.
checklist antes de publicar
Archivos
- La portada se llama exactamente
index.html - Todas las imágenes están dentro de
img/ - Ningún nombre tiene espacios, acentos ni mayúsculas
HTML
- Cada página tiene su
<title>propio y descriptivo - Todas llevan
<meta charset="UTF-8"> - Todas las imágenes tienen
altescrito - El menú es idéntico en todas las páginas
- Todos los enlaces funcionan en local, en los dos sentidos
- No quedan comentarios de instrucciones ni texto de relleno
CSS
- El
<link>al CSS está en todas las páginas img { max-width: 100%; }está puesto- Se ve bien estrechando la ventana hasta tamaño móvil
Peso
- Ninguna imagen pasa de 1 MB
- La carpeta entera pesa menos de 25 MB
Después de publicar
- La web abre en el móvil
- Las imágenes se ven publicadas, no solo en local
- Los enlaces del menú funcionan también publicados
- La dirección está apuntada en papel
tu web pesa 193 KB
Medido en la web terminada del taller — la de Rita, dos páginas y cuatro fotos:
index.html + estilo.css | 7,5 KB, que viajan comprimidos como 2,9 KB |
| las cuatro fotos | 190 KB |
| total que se descarga quien te visita | 193 KB |
Tu código es el 4% del peso. Las fotos son el 96%.
Por eso la línea de la checklist que parece una tontería —«ninguna imagen pasa de 1 MB»— es la decisión ecológica más grande de todo el taller. Pasar las fotos por squoosh hace más que cualquier otra cosa que puedas tocar.
por qué esto también es una postura
Una web media hoy pesa unos 2 MB y emite unos 0,36 g de CO₂ por visita. Escribir HTML y CSS a mano no es nostalgia: es la manera más directa de no participar en eso.
| web | CO₂ por visita |
|---|---|
| nytimes.com | 3,08 g |
| media global | 0,36 g |
| una web escrita a mano | 0,04 g |
| text.npr.org, solo texto | 0,001 g |
Cifras de The Ten Commandments of the Small Internet (cheapskatesguide.org) y del modelo de websitecarbon.com, donde puedes medir la tuya.
La cuenta tiene dos mitades. Los bytes son tuyos y los acabas de medir. La energía del servidor no, y ahí GitHub no sale bien parado: en el directorio de la Green Web Foundation, github.io aparece en gris, sin pruebas de energía renovable. También Neocities, Codeberg y Pangea. Gris significa nadie lo ha acreditado, no funciona con carbón.
ejercicio 6 · subir y publicar
Ahora entendiendo cada paso. Nadie pasa al siguiente bloque sin su dirección funcionando.
subir y publicar
- La checklist repasada entera
New repository→ nombre → Public- Arrastrar el contenido, no la carpeta
Commit changesSettings → Pages → main → Save- La dirección apuntada en papel
- Abrirla en tu móvil
- Comprobar que los enlaces funcionan publicados
- Comprobar que las imágenes se ven
- Poner un
favicon
- Una
meta descriptionpor página - Cloudflare Pages sobre el mismo repositorio
- Un dominio propio (en casa, con calma)
- Una página
404.htmltuya
Entra en tu repositorio: ¿ves index.html nada más abrirlo? Si lo que ves es una carpeta, subiste la carpeta contenedora. Bórralo y vuelve a subir solo el contenido.
tunombre.github.io / _______________
En papel. Ahora. Y ábrela en el móvil: es donde se ve para qué servía la media query de la sesión pasada.
un dominio propio
Opcional, cuesta unos 12 € al año, y hay una regla que ya sabes.
si quieres tunombre.com
- Se compra aparte: entre 10 y 15 € al año en Porkbun, Namecheap o Gandi.
- Se conecta desde los ajustes del dominio, apuntándolo a GitHub.
- Evita los que regalan el primer año y multiplican el precio del segundo.
- La dirección de GitHub sigue funcionando igual, y es gratis para siempre.
Nadie mete su tarjeta con catorce personas mirando. Esto se hace en casa, con calma.
pausa
Después viene la parte importante del día.
actualizar tu web
El ciclo que hace que la web sea tuya de verdad. Lo hace cada una, entera, sola.
el ciclo, siempre igual
1 Editas 2 Guardas y miras 3 Subes 4 Un minuto en VS Code → en local → a GitHub → y está online
Subir un archivo cambiado: Add file → Upload files → arrastras el nuevo encima del viejo → Commit changes.
Comprueba en local antes de subir. Siempre. Así lo que se rompe se rompe en tu ordenador y no delante de todo el mundo.
Copia de la carpeta antes de cambios grandes, con la fecha en el nombre. Es la manera más simple de poder volver atrás.
Y si pierdes el portátil, tu web sigue entera en GitHub: botón verde Code → Download ZIP y la recuperas. Hazlo una vez al año, el mismo día que te toque renovar el dominio.
ejercicio 7 · cambiar y volver a subir
El ejercicio más importante del taller. Lo hace cada una, entera, sola, y yo no toco ningún teclado.
cambiar algo y volver a subirlo
Publicar lo hace cualquiera una vez. Lo que hace que la web sea tuya es saber cambiarla dentro de seis meses. Hazlo tú sola, entera.
- Cambiar algo que se note, en VS Code
- Guardar y comprobarlo en local
Add file → Upload files- Arrastrar el archivo encima del viejo
Commit changesy ver el cambio online- Repetirlo una segunda vez, sin mirar los pasos
- Añadir un proyecto nuevo entero
- Duplicar la carpeta con la fecha antes de tocar
- Mirar el
Historydel archivo en GitHub
- Editar directamente en GitHub con el lápiz
- El panel Control de código fuente de VS Code
- Un
README.mden el repositorio
Hasta que no lo has hecho sola una vez, no lo sabes hacer. Todo lo demás del taller se puede recuperar leyendo la guía; esto no.
remates y cómo seguir
Los detalles que faltan, dónde buscar, y cómo pedir ayuda sin perder tu web.
cuando algo no funciona
- ¿Has guardado el archivo?
- ¿Has recargado? Recarga forzada: Cmd+Shift+R o Ctrl+F5.
- ¿Falta cerrar una etiqueta, una comilla o un punto y coma? VS Code lo marca en color.
- ¿Una imagen no sale? El nombre del archivo y el
srctienen que coincidir exactamente — mayúsculas y extensión incluidas..JPGno es.jpg. - Botón derecho → Inspeccionar → pestaña Console. Si hay un error, está escrito ahí.
- Vuelve a la última copia que iba bien y avanza otra vez desde ahí.
pedirle ayuda a una inteligencia artificial
- Pega solo el trozo que falla, no la web entera.
- Pídele que te explique el cambio, no solo el código.
- No aceptes una reescritura completa.
Si le das la web entera te la devuelve reescrita de arriba abajo. Funcionará, pero ya no sabrás dónde tocar — y eso es justo lo que has venido a aprender.
dónde buscar
si GitHub te da asco
Dicho en voz alta, porque es verdad: GitHub es de Microsoft y lo que subes ahí alimenta a Copilot. Lo usamos hoy porque es el único sitio donde catorce personas publican en quince minutos. Cuando tu web ya esté hecha, por aquí se sale.
En septiembre de 2026 cerró Autistici/Inventati tras 25 años alojando proyectos como el tuyo. Los hostings alternativos también se acaban. Tu carpeta se muda a cualquiera de estos en una tarde: eso es lo que no se pierde.
las preguntas de siempre
| ¿un formulario de contacto? | Necesita un servidor. Hay servicios que lo resuelven pegando unas líneas (Formspree, Tally). El consejo honesto: pon tu correo con mailto:. No se rompe nunca y a nadie le ha costado nunca un encargo. |
| ¿un blog? | Sí, con una limitación: cada entrada es un archivo que creas a mano. Para tres o cuatro al año, perfecto. Para escribir cada semana, cansa. |
| ¿mejor que wordpress o cargo? | Depende. Ganas: no pagas al mes, nadie puede cerrarte la web, carga rápido y dentro de diez años seguirá igual. Pierdes: no hay panel bonito, ni tienda, ni comentarios. |
| ¿puedo vender? | No con esto. Enlaza a Bandcamp o Big Cartel, que es lo que hace mucha gente. |
| ¿cómo salgo en google? | Tres cosas gratis: un <title> propio por página, los textos como texto y no dentro de imágenes, y que otras webs te enlacen. Lo demás que te vendan sobre SEO, para una web de artista, es humo. |
| ¿cuánta gente entra? | Hay contadores que respetan la privacidad. Pero pregúntate primero si el dato te va a servir para algo. |
hasta dónde se puede llegar
Todo esto son archivos sueltos que se publican igual que tu web: los subes y ya está.
lo que te llevas
Y el correo de dudas de las dos semanas siguientes.
- Una web publicada, con dirección propia.
- Una carpeta en tu ordenador que puedes cambiar cuando quieras.
- Una guía escrita y una chuleta para dentro de tres meses.
- Dos semanas de dudas por correo.
No caduca, no tiene suscripción y no se lo lleva nadie al cerrar. Son archivos de texto en una carpeta: el formato más duradero que existe en internet.