Cómo publicar una página web HTML, CSS y JavaScript en internet

Publicar una página web en internet es uno de los pasos más importantes después de crear un proyecto con HTML, CSS y JavaScript.

Muchos desarrolladores crean su portafolio, preparan sus proyectos, agregan información de contacto y diseñan una web completa, pero luego no saben cómo subirla a internet para que otras personas puedan visitarla.

En este artículo veremos cómo publicar una página web estática paso a paso usando un hosting, un dominio, FTP y FileZilla.

Qué necesitas para publicar una página web

Para publicar una página web hecha con HTML, CSS y JavaScript necesitas algunos elementos básicos:

• Los archivos de tu sitio web.
• Un hosting o alojamiento web.
• Un dominio.
• Un cliente FTP como FileZilla.
• Acceso a la carpeta pública del servidor.

Con estos elementos podrás subir tu proyecto a internet y dejarlo disponible para que cualquier persona pueda acceder desde un navegador.

Qué tipo de web puedes publicar con este método

Este proceso sirve para páginas web estáticas creadas con tecnologías como:

• HTML.
• CSS.
• JavaScript.
• Imágenes.
• Fuentes.
• Archivos estáticos.

Por ejemplo, puedes publicar un portafolio web, una landing page, una página personal, una web de presentación para un cliente o un sitio simple de una agencia.

Preparar los archivos del proyecto

Antes de subir la web al hosting, es importante revisar que el proyecto esté bien organizado.

Normalmente, una página web estática puede tener una estructura parecida a esta:

mi-web/ ├── index.html ├── css/ │ └── styles.css ├── js/ │ └── main.js └── assets/ └── imagenes/

El archivo más importante suele ser index.html, porque es el archivo que se carga por defecto cuando alguien entra al dominio.

Si tu proyecto no tiene un archivo index.html, es posible que la web no se muestre correctamente al entrar al dominio principal.

Contratar un hosting

El hosting es el espacio donde se guardan los archivos de tu página web.

Cuando alguien entra a tu dominio, el navegador solicita los archivos al servidor donde está alojada la web.

Para una página hecha con HTML, CSS y JavaScript, normalmente basta con un hosting compartido. Este tipo de alojamiento es suficiente para portafolios, webs estáticas y proyectos pequeños o medianos.

Configurar el hosting

Después de contratar el hosting, normalmente el proveedor mostrará un asistente de configuración.

Durante este proceso puede pedir información como:

• Para quién estás creando el sitio web.
• Qué tipo de sitio quieres crear.
• Si quieres usar WordPress u otro sistema.
• Si quieres crear un sitio vacío.
• Si deseas usar un dominio nuevo o uno existente.

Si ya tienes tu web hecha con HTML, CSS y JavaScript, puedes elegir la opción de crear un sitio vacío, porque no necesitas que el hosting instale WordPress ni genere una web automáticamente.

Registrar o conectar un dominio

El dominio es la dirección que las personas escribirán en el navegador para visitar tu sitio web.

Por ejemplo:

midominio.com

Algunos servicios de hosting permiten registrar un dominio nuevo durante la configuración. También puedes usar un dominio que ya tengas comprado en otro proveedor.

Después de conectar el dominio al hosting, puede tardar algunos minutos o incluso algunas horas en funcionar correctamente debido a la propagación DNS.

Ver el sitio web antes de subir archivos

Cuando el hosting queda configurado, puede aparecer una página de bienvenida o una vista previa del proveedor.

Esto ocurre porque todavía no has subido tus propios archivos.

Cuando subas tu sitio web, esa página por defecto será reemplazada por tu proyecto.

Usar el administrador de archivos del hosting

Muchos servicios de hosting incluyen un administrador de archivos desde el panel de control.

Desde ahí puedes entrar a la carpeta pública del sitio, crear carpetas, subir archivos y eliminar archivos existentes.

La carpeta más importante normalmente se llama:

public_html

Todo lo que coloques dentro de esa carpeta será accesible desde internet.

Por qué usar FTP

Aunque puedes subir archivos desde el administrador del hosting, una forma más profesional y cómoda es usar FTP.

FTP permite conectarte al servidor remoto desde tu computadora y transferir archivos directamente.

Para eso puedes usar un cliente FTP como FileZilla.

Qué es FileZilla

FileZilla es un cliente FTP que permite conectarse a un servidor remoto para subir, descargar o administrar archivos.

Con FileZilla puedes ver los archivos de tu computadora en un lado y los archivos del servidor en otro.

Esto facilita arrastrar los archivos de tu proyecto hacia la carpeta del hosting.

Obtener los datos FTP

Para conectarte por FTP necesitas los datos que aparecen en el panel de tu hosting.

Normalmente necesitas:

• Servidor o host FTP.
• Nombre de usuario FTP.
• Contraseña FTP.
• Puerto FTP.

El puerto FTP suele ser 21, aunque puede variar según el proveedor.

Si acabas de crear el hosting y el dominio, puede que el nombre del host todavía no funcione correctamente. En ese caso, a veces se puede usar la IP del servidor.

Conectarse al servidor con FileZilla

Después de instalar FileZilla, puedes completar los campos de conexión rápida:

• Servidor: host FTP o IP del servidor.
• Nombre de usuario: usuario FTP.
• Contraseña: contraseña FTP.
• Puerto: normalmente 21.

Luego haces clic en conexión rápida.

Si aparece una advertencia de certificado o confianza del servidor, puedes revisarla y aceptar si estás seguro de que los datos pertenecen a tu hosting.

Entrar a la carpeta public_html

Una vez conectado al servidor, debes buscar la carpeta pública del sitio web.

Normalmente se llama:

public_html

Dentro de esta carpeta debes subir los archivos de tu página web.

Si el hosting tiene un archivo por defecto, como default.html o default.php, puedes eliminarlo para que no aparezca la página de bienvenida del proveedor.

Subir los archivos de la web

Para subir tu web con FileZilla, localiza en tu computadora la carpeta donde tienes el proyecto.

Luego selecciona todos los archivos y carpetas del proyecto, por ejemplo:

• index.html
• Carpeta css
• Carpeta js
• Carpeta assets
• Imágenes y otros recursos

Después arrástralos hacia la carpeta public_html del servidor.

FileZilla comenzará a transferir los archivos.

Qué hacer si aparece una advertencia de sobrescribir

Si ya existe un archivo con el mismo nombre en el servidor, FileZilla puede preguntar si quieres sobrescribirlo.

En ese caso, si estás actualizando tu web, puedes elegir sobrescribir.

También puedes marcar la opción para aplicar la misma acción a la cola actual de subida.

Revisar transferencias fallidas

Cuando termine la subida, es importante revisar si hubo transferencias fallidas.

FileZilla suele mostrar una pestaña con archivos que no se subieron correctamente.

Si aparece algún archivo fallido, puedes hacer clic derecho y elegir reintentar.

Esto ayuda a evitar que la web cargue incompleta o sin imágenes, estilos o scripts.

Comprobar que la web funciona

Después de subir los archivos, abre tu dominio en el navegador.

Si todo está correcto, deberías ver tu página web publicada.

Por ejemplo:

midominio.com

Si no aparece de inmediato, puede ser por caché del navegador, propagación del dominio o porque los archivos no están en la carpeta correcta.

Publicar varias webs en el mismo hosting

En un mismo hosting puedes tener más de un sitio web.

Una forma sencilla es crear carpetas dentro de public_html.

Por ejemplo:

public_html/ ├── web1/ │ └── index.html └── web2/ └── index.html

En ese caso, podrías acceder a cada proyecto usando una URL como:

midominio.com/web1/ midominio.com/web2/

Sin embargo, esta opción puede no ser la más profesional para proyectos importantes.

Crear un subdominio

Otra opción más ordenada es crear un subdominio.

Un subdominio es una dirección adicional dentro del mismo dominio principal.

Por ejemplo:

agencia.midominio.com

Esto permite alojar otra web distinta dentro del mismo hosting, pero con una dirección más limpia.

Configurar la carpeta del subdominio

Cuando creas un subdominio desde el panel del hosting, normalmente puedes asignarle una carpeta propia.

Por ejemplo, puedes crear un subdominio llamado agencia y asociarlo a una carpeta llamada agencia.

Luego, desde FileZilla, esa carpeta aparecerá dentro del servidor y podrás subir ahí los archivos de la segunda web.

Subir una web a un subdominio

Para subir una web a un subdominio, el proceso es parecido al del dominio principal.

1. Crear el subdominio desde el panel del hosting.
2. Asignar una carpeta específica para ese subdominio.
3. Entrar por FTP con FileZilla.
4. Abrir la carpeta del subdominio.
5. Eliminar archivos por defecto si existen.
6. Subir los archivos de la nueva web.
7. Entrar al subdominio desde el navegador para comprobar que funciona.

Cuándo usar hosting y cuándo usar VPS

Para páginas estáticas hechas con HTML, CSS y JavaScript, un hosting compartido suele ser suficiente.

Este tipo de proyecto no necesita una configuración avanzada de servidor.

En cambio, si el proyecto usa tecnologías backend como Python, Node.js, bases de datos personalizadas, procesos del servidor o configuraciones más avanzadas, puede ser necesario usar un VPS.

Un VPS ofrece mayor control sobre el servidor, pero también requiere más conocimientos técnicos para configurarlo correctamente.

Problemas comunes al publicar una web

Al subir una página web a internet pueden aparecer algunos problemas comunes.

• El dominio todavía no apunta correctamente al hosting.
• Los archivos no están dentro de public_html.
• No existe un archivo index.html.
• Algunos archivos no se subieron por completo.
• Las rutas de CSS, JavaScript o imágenes están mal escritas.
• El navegador está mostrando una versión en caché.

Revisar estos puntos suele resolver la mayoría de problemas iniciales.

Resumen del proceso

• Preparar los archivos HTML, CSS y JavaScript.
• Contratar o configurar un hosting.
• Registrar o conectar un dominio.
• Obtener los datos FTP.
• Instalar FileZilla.
• Conectarse al servidor por FTP.
• Entrar a la carpeta public_html.
• Eliminar archivos por defecto del hosting.
• Subir los archivos del proyecto.
• Comprobar el dominio en el navegador.
• Crear subdominios si quieres publicar más webs.

Conclusión

Publicar una página web hecha con HTML, CSS y JavaScript no es complicado si entiendes el proceso.

Primero necesitas un hosting y un dominio. Luego debes conectarte al servidor, entrar a la carpeta pública y subir todos los archivos de tu proyecto.

Con herramientas como FileZilla, puedes transferir los archivos de forma sencilla y comprobar el resultado entrando al dominio desde el navegador.

Este mismo procedimiento sirve para publicar portafolios, páginas personales, webs de clientes, landings y otros proyectos estáticos.

Si necesitas publicar un proyecto más avanzado con backend, bases de datos o configuración personalizada del servidor, entonces puede ser mejor usar un VPS.