Publicar tu web en Internet

Hasta ahora tu web vive en tu ordenador: la abres con Live Server y la ves en localhost. Para que cualquiera pueda visitarla tienes que publicarla: copiar sus archivos a un servidor que esté siempre encendido y conectado a Internet, y darle una dirección fácil de recordar. En esta lección verás qué es un dominio y un hosting, cómo organizar las carpetas antes de subir nada, las formas más habituales de publicar (subir archivos por SFTP, GitHub Pages, Netlify y Vercel), cómo activar HTTPS y cómo crear una página de error 404.

Si no tienes claro qué es un servidor, una IP o el DNS, repasa antes cómo funciona la web.

Las piezas: dominio, DNS y hosting

Para publicar una web necesitas dos cosas que a menudo se contratan juntas, pero son distintas:

• Hosting (alojamiento): un servidor donde se guardan tus archivos y que los envía a quien los pida. Es el “local” de tu web.
• Dominio: el nombre de la web, como lafisura.es. Es la “dirección” que la gente escribe.

Entre los dos está el DNS, que traduce el dominio a la dirección IP del servidor. Cuando contratas un dominio, en su panel de control configuras sus registros DNS para que apunten a tu hosting.

El dominio

Se compra en un registrador (una empresa autorizada para venderlos) y se paga por años; no es tuyo para siempre: si no lo renuevas, otro puede quedárselo. Un .es o un .com cuesta normalmente entre 10 y 20 euros al año.

Consejos para elegirlo:

• Corto, fácil de decir y de escribir. Evita guiones y números si puedes.
• Sin tildes ni eñes: técnicamente se pueden usar, pero dan problemas en correos y enlaces.
• .es si tu público está en España; .com si es internacional. Hay muchos más (.dev, .io, .shop…).
• Activa la renovación automática para no perderlo por un despiste.

Nota: para practicar no necesitas comprar nada. GitHub Pages, Netlify y Vercel te dan una dirección gratuita del tipo tu-usuario.github.io o tu-proyecto.netlify.app. Puedes añadir un dominio propio más adelante.

Los registros DNS que vas a tocar

Registro	Qué hace	Ejemplo
A	Apunta el dominio a una dirección IPv4	lafisura.es → 185.199.108.153
AAAA	Lo mismo con IPv6	lafisura.es → 2606:50c0:8000::153
CNAME	Hace que un subdominio sea un alias de otro nombre	www.lafisura.es → usuario.github.io
MX	Indica el servidor de correo del dominio	Lo configura tu proveedor de correo
TXT	Texto libre; se usa para verificar que el dominio es tuyo	google-site-verification=...

Cada servicio de hosting te dice exactamente qué registros crear. Los cambios de DNS pueden tardar desde unos minutos hasta, en casos raros, 48 horas en llegar a todo el mundo: es lo que se llama propagación.

Tipos de hosting

Tipo	Qué es	Para qué
Hosting estático (GitHub Pages, Netlify, Vercel, Cloudflare Pages)	Solo sirve archivos: HTML, CSS, JS, imágenes	Webs hechas con HTML, CSS y JavaScript, portfolios, documentación. Suele tener plan gratuito
Hosting compartido	Un servidor que compartes con otros clientes, con panel de control (cPanel, Plesk)	Webs con PHP y MySQL, WordPress. Unos pocos euros al mes
VPS (servidor privado virtual)	Un servidor para ti, que administras tú	Aplicaciones a medida con Node.js, Java, bases de datos… Requiere saber de sistemas

Para todo lo que llevas aprendido en este curso (HTML, CSS y algo de JavaScript) un hosting estático es suficiente, gratuito y muy rápido. Si más adelante haces una web con PHP, necesitarás un hosting compartido o un VPS.

Antes de subir: organiza las carpetas

El servidor sirve tus archivos tal cual. Si en tu ordenador están desordenados, en Internet también. Una estructura típica:

mi-web/
├── index.html
├── 404.html
├── horarios.html
├── contacto.html
├── css/
│   └── estilos.css
├── js/
│   └── app.js
├── img/
│   ├── logo.svg
│   └── portada.avif
└── favicon.ico

index.html es la portada

Cuando alguien visita https://lafisura.es/, sin nombre de archivo, el servidor busca en esa carpeta un archivo llamado index.html y lo envía. Por eso la página de inicio tiene que llamarse así, en minúsculas, y estar en la raíz.

Funciona igual en las subcarpetas. Puedes organizar la web así para tener direcciones limpias:

mi-web/
├── index.html          →  https://lafisura.es/
├── horarios/
│   └── index.html      →  https://lafisura.es/horarios/
└── contacto/
    └── index.html      →  https://lafisura.es/contacto/

Nombres de archivo seguros

• Todo en minúsculas. Los servidores suelen funcionar con Linux, que distingue mayúsculas de minúsculas: Portada.jpg y portada.jpg son archivos distintos. En tu Windows o Mac puede funcionar y, al publicar, la imagen no aparece.
• Sin espacios, tildes ni eñes. Usa guiones: clases-ninos.html, no Clases niños.html.
• Rutas relativas o absolutas desde la raíz, nunca rutas de tu disco (C:\Users\... o file:///). Lo viste en rutas.

Cuidado: antes de publicar, prueba la web con Live Server y no abriendo el archivo con doble clic. Así compruebas las rutas en condiciones parecidas a las de un servidor real.

Opción 1: subir archivos a un hosting por SFTP

Es la forma clásica, la que usarás con un hosting compartido. El proveedor te da unos datos de acceso: servidor (host), usuario, contraseña y puerto.

Con un cliente SFTP

FTP (File Transfer Protocol) es un protocolo para copiar archivos a un servidor. Su versión segura es SFTP, que va cifrada. Usa SFTP siempre que tu hosting lo permita: con el FTP normal, la contraseña viaja sin cifrar.

El programa más conocido es FileZilla (gratuito). Los pasos:

1. Abre FileZilla y rellena arriba: servidor (sftp://lafisura.es o el que te indiquen), usuario, contraseña y puerto (normalmente 22 para SFTP; el 21 es FTP sin cifrar).
2. Pulsa Conexión rápida. A la izquierda verás tus archivos; a la derecha, los del servidor.
3. En el servidor, entra en la carpeta pública. Según el hosting se llama public_html, htdocs, www o httpdocs. Lo que pongas ahí es lo que se ve en la web.
4. Arrastra el contenido de tu carpeta mi-web (no la carpeta en sí) a la carpeta pública.
5. Visita tu dominio y comprueba que todo carga.

Si arrastras la carpeta entera, tu portada quedará en lafisura.es/mi-web/ en lugar de en lafisura.es/.

Con el administrador de archivos

Casi todos los paneles de control (cPanel, Plesk y los paneles propios de cada empresa) tienen un administrador de archivos en el navegador. Para webs pequeñas es lo más cómodo:

1. Comprime tu web en un .zip (el contenido, no la carpeta).
2. En el administrador, entra en public_html y sube el .zip.
3. Usa la opción Extraer para descomprimirlo allí.
4. Borra el .zip del servidor.

Para actualizar la web, sube de nuevo solo los archivos que hayas cambiado.

Opción 2: GitHub Pages

GitHub Pages publica gratis una web estática directamente desde un repositorio de GitHub (un proyecto guardado con Git). Es ideal para portfolios y prácticas, y cada vez que subes cambios al repositorio, la web se actualiza sola.

1. Crea una cuenta en GitHub y un repositorio público nuevo, por ejemplo rocodromo.
2. Sube tus archivos con index.html en la raíz. Puedes hacerlo desde la web (Add file → Upload files) o con Git:

git init
git add .
git commit -m "Primera versión de la web"
git branch -M main
git remote add origin https://github.com/tu-usuario/rocodromo.git
git push -u origin main

3. En el repositorio, ve a Settings → Pages.
4. En Source, elige Deploy from a branch; en Branch, main y la carpeta / (root). Guarda.
5. En uno o dos minutos tendrás la web en https://tu-usuario.github.io/rocodromo/.

Si llamas al repositorio exactamente tu-usuario.github.io, la web queda en la raíz: https://tu-usuario.github.io/. Es la opción típica para un portfolio personal.

Cuidado: en una web de proyecto, la dirección incluye el nombre del repositorio (/rocodromo/). Una ruta que empieza por /, como href="/css/estilos.css", busca en tu-usuario.github.io/css/estilos.css y no la encuentra. En este caso usa rutas relativas: href="css/estilos.css".

Para usar tu propio dominio, en Settings → Pages → Custom domain escribe www.lafisura.es y crea en tu registrador el registro CNAME que te indica GitHub.

Opción 3: Netlify y Vercel

Netlify y Vercel son servicios de hosting estático con plan gratuito para proyectos personales. Van un paso más allá que GitHub Pages: vista previa de cada cambio, redirecciones, formularios (Netlify), funciones de servidor y soporte directo para herramientas como Vite, Astro o Next.js.

Netlify Drop: arrastrar y publicar

La forma más rápida de publicar algo, sin Git:

1. Entra en app.netlify.com/drop e inicia sesión con una cuenta gratuita (sin cuenta también funciona, pero el sitio se borra al poco tiempo).
2. Arrastra la carpeta de tu web a la página.
3. En segundos tienes una dirección del tipo https://nombre-aleatorio.netlify.app, que puedes cambiar en la configuración.

Para actualizar, vuelves a arrastrar la carpeta en la sección Deploys del sitio.

Conectar un repositorio

La forma habitual en proyectos reales, tanto en Netlify como en Vercel:

1. Sube tu web a GitHub (como en la opción 2).
2. En Netlify (Add new site → Import an existing project) o en Vercel (Add New → Project), conecta tu cuenta de GitHub y elige el repositorio.
3. Si es HTML puro, deja vacío el comando de construcción (build command) y pon como carpeta de publicación la raíz. Si usas Vite u otra herramienta, normalmente lo detectan solos.
4. Pulsa Deploy.

A partir de ahí, cada git push publica una versión nueva automáticamente. Esto se llama despliegue continuo.

Servicio	Punto fuerte	Dirección gratuita
GitHub Pages	Integrado en GitHub, muy sencillo	usuario.github.io/repo/
Netlify	Arrastrar y soltar, formularios, redirecciones fáciles	nombre.netlify.app
Vercel	Muy bueno con frameworks de JavaScript (Next.js)	nombre.vercel.app
Cloudflare Pages	Red muy rápida en todo el mundo	nombre.pages.dev

HTTPS: el candado

HTTPS es HTTP cifrado. Hoy es obligatorio en la práctica: los navegadores marcan las webs sin HTTPS como “No segura”, muchas funciones de JavaScript (geolocalización, cámara, service workers) solo funcionan con HTTPS, y Google lo tiene en cuenta para posicionar.

Para tener HTTPS el servidor necesita un certificado que demuestre que el dominio es tuyo. Hoy son gratuitos gracias a Let’s Encrypt, una autoridad que los emite y renueva automáticamente.

• GitHub Pages, Netlify y Vercel lo activan solos, también con tu dominio propio. En GitHub Pages, marca Enforce HTTPS en la configuración.
• En un hosting compartido, busca en el panel la opción “SSL” o “Let’s Encrypt” y actívala para tu dominio.

Una vez activado, asegúrate de que la versión http:// redirige a https://. Los servicios estáticos lo hacen solos. En un hosting con Apache, se añade al archivo .htaccess de la carpeta pública:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Cuidado: si tu página es HTTPS pero carga una imagen o un script con http://, el navegador lo bloquea o muestra un aviso. Es el contenido mixto (mixed content). Usa siempre https:// o rutas relativas.

La página 404

Cuando alguien visita una dirección que no existe, el servidor responde con el código 404 Not Found. Si no has preparado nada, verá una página fea y genérica del servidor, y lo más probable es que se vaya.

Una buena página 404:

• Mantiene la cabecera y el estilo de tu web, para que el usuario sepa que sigue en el mismo sitio.
• Explica en una frase qué ha pasado, sin tecnicismos.
• Ofrece salidas: enlace a la portada, a las secciones principales o un buscador.

Mira el ejemplo de la lección.

Dónde ponerla

Hosting	Qué hacer
GitHub Pages	Un archivo 404.html en la raíz del repositorio
Netlify	Un archivo 404.html en la carpeta publicada
Vercel	Un archivo 404.html en la raíz del proyecto
Apache (hosting compartido)	ErrorDocument 404 /404.html en el .htaccess

Cuidado: la página 404 se muestra en cualquier dirección que falle, por ejemplo lafisura.es/cursos/viejo/pagina.html. Si dentro usas rutas relativas como css/estilos.css, el navegador las buscará en /cursos/viejo/css/ y la página saldrá sin estilos. En la 404 usa rutas desde la raíz: /css/estilos.css. (En una web de proyecto de GitHub Pages, incluye el nombre del repositorio: /rocodromo/css/estilos.css.)

Añade también en su <head> la etiqueta <meta name="robots" content="noindex"> si tu hosting no devuelve el código 404 correctamente, para que Google no la guarde como una página más.

Lista de comprobación antes de publicar

1. index.html en la raíz, en minúsculas.
2. Todos los nombres de archivo en minúsculas, sin espacios ni tildes.
3. Rutas relativas o desde la raíz, sin rutas de tu disco.
4. Cada página con su <title> y su <meta name="description"> (lo viste en el head).
5. Favicon y lang="es" en el <html>.
6. HTML validado con el validador del W3C.
7. Imágenes optimizadas (ver rendimiento).
8. Página 404.html preparada.
9. Después de publicar: prueba en un móvil real, revisa que HTTPS funciona y pasa Lighthouse.

Errores frecuentes

• La portada no se llama index.html. Se llama Index.html, inicio.html o home.html, y el servidor muestra un listado de archivos o un error.
• Mayúsculas en los nombres. En tu ordenador funciona y en el servidor no. Pon todo en minúsculas.
• Subir la carpeta en lugar de su contenido. La web queda en /mi-web/ y la raíz sale vacía.
• Rutas que empiezan por / en GitHub Pages de proyecto. Apuntan fuera del repositorio. Usa rutas relativas.
• Usar FTP sin cifrar. Tu contraseña viaja en claro. Usa SFTP.
• Contenido mixto. Recursos con http:// en una página https://.
• Dejar caducar el dominio. Activa la renovación automática.
• Rutas relativas en la página 404. Se rompen en direcciones con varias carpetas.

Resumen

Concepto	Qué es
Dominio	El nombre de la web; se alquila por años a un registrador
DNS	Traduce el dominio a la IP del servidor (registros A, AAAA, CNAME)
Hosting estático	Solo sirve archivos; gratis en GitHub Pages, Netlify, Vercel
Hosting compartido	Servidor con panel, PHP y MySQL; de pago
index.html	Archivo que se sirve al visitar una carpeta
SFTP / FileZilla	Subir archivos a un hosting de forma cifrada
Carpeta pública	public_html, htdocs o www: lo que se ve en la web
GitHub Pages	Publica un repositorio en usuario.github.io/repo/
Netlify / Vercel	Arrastrar y publicar o despliegue automático en cada git push
HTTPS	Certificado gratuito de Let’s Encrypt; redirige siempre http a https
404.html	Página para direcciones que no existen, con rutas desde la raíz

Ya sabes todo lo necesario para construir y publicar una web completa. Ponlo en práctica en el siguiente paso: proyecto: tu web.