Publicar tu primera página web gratis es posible hoy mismo, sin pagar un solo peso, usando herramientas que funcionan desde cualquier ciudad de México.
¿Recuerdas cuándo empezaste este curso? Solo sabías que HTML existía. Ahora tienes una página con estructura, estilos y diseño responsivo. Hoy la sacas al mundo.
La historia de Rodrigo, el mecánico de Monterrey
Rodrigo tiene un taller de autos en Monterrey. Sus clientes lo encuentran solo por recomendación. Un día decidió hacer su propia página web para aparecer en Google.
No tenía dinero para pagar hosting. Buscó opciones gratuitas y encontró GitHub Pages. En dos horas, su página estaba en internet con una dirección real.
Ahora sus clientes comparten el enlace por WhatsApp. Rodrigo no gastó nada. Solo aprendió lo que tú ya sabes.
¿Qué opciones gratuitas existen?
Hay tres herramientas populares para publicar gratis. Todas funcionan desde México sin necesidad de tarjeta de crédito.
GitHub Pages
Es la opción más usada por desarrolladores. Te da una dirección como tunombre.github.io. Es gratis, rápida y confiable.
Netlify
Permite arrastrar y soltar tu carpeta de archivos. En menos de un minuto tienes tu página publicada. También es completamente gratuita.
Vercel
Es muy popular para proyectos más avanzados. Para una página simple de HTML y CSS también funciona perfecto. Tiene plan gratuito sin límite de tiempo.
En esta lección nos enfocamos en Netlify porque es la más fácil para principiantes. No necesitas saber usar la terminal ni Git.
Cómo publicar con Netlify paso a paso
Antes de empezar, asegúrate de tener tu carpeta de proyecto lista. Debe contener al menos dos archivos: index.html y estilos.css.
Paso 1: Prepara tu carpeta
Tu carpeta debe verse así:
mi-sitio/
├── index.html
└── estilos.css
Si tienes imágenes, agrégalas dentro de una carpeta llamada imagenes/. Mantén todo organizado desde el inicio.
Paso 2: Crea una cuenta en Netlify
Entra a netlify.com. Haz clic en Sign up. Puedes registrarte con tu correo de Gmail, sin costo.
No necesitas ingresar datos de pago. El plan gratuito es suficiente para una página personal o de portafolio.
Paso 3: Arrastra tu carpeta
Una vez dentro de tu cuenta, verás una pantalla con un área que dice "Drop your site's output folder here". Tradúcelo así: arrastra aquí tu carpeta.
Toma la carpeta mi-sitio/ desde tu computadora y suéltala en esa área. Netlify sube todos tus archivos automáticamente.
Paso 4: Obtén tu URL
En menos de 30 segundos, Netlify te da una dirección web. Se ve algo así: https://luminous-panda-49382.netlify.app. No es la más bonita, pero funciona.
Puedes cambiarla a algo como https://rodrigo-taller.netlify.app desde la configuración. Es gratis también.
Paso 5: Comparte tu página
Copia esa URL y compártela con quien quieras. Ya está en internet. Cualquier persona en el mundo puede verla.
La historia de Valeria, diseñadora freelance en CDMX
Valeria terminó un curso de diseño web y quería mostrar su trabajo a clientes potenciales. Necesitaba un portafolio en línea, pero no tenía presupuesto.
Usó Netlify para publicar su página en 20 minutos. Puso su nombre como subdominio: valeria-diseño.netlify.app. Lo compartió en LinkedIn y en su perfil de Instagram.
En dos semanas, una agencia en Polanco la contactó. Le ofrecieron un proyecto freelance de $8,500 solo por ver su portafolio. Todo empezó con una página gratuita.
¿Qué pasa cuando actualizas tu página?
Aquí viene una pregunta importante: ¿cómo subes los cambios después?
Con Netlify es igual de fácil. Vuelves a entrar a tu proyecto dentro de la plataforma. Buscas la opción Deploys y arrastras tu carpeta actualizada otra vez.
Netlify reemplaza los archivos viejos con los nuevos. Tu URL sigue siendo la misma. No necesitas hacer nada más.
Errores comunes al publicar
Muchos principiantes cometen estos errores. Conócelos antes para no perder tiempo.
El archivo principal no se llama index.html
Este es el error número uno. Si tu archivo se llama pagina.html o home.html, Netlify no sabe cuál mostrar primero. Siempre nombra tu archivo principal index.html.
Las rutas de los archivos están mal escritas
Si en tu HTML escribes <link rel="stylesheet" href="Estilos.css"> con mayúscula, pero tu archivo se llama estilos.css con minúscula, el navegador no lo encuentra en internet. En tu computadora sí funciona porque Windows no distingue mayúsculas. En los servidores de Netlify sí importa. Escribe siempre en minúsculas.
Subir la carpeta equivocada
Algunos suben la carpeta que contiene su proyecto, no la carpeta del proyecto. Por ejemplo, suben Documentos/ en lugar de Documentos/mi-sitio/. Revisa que dentro de lo que subes esté directamente el index.html.
Imágenes que no cargan
Si tus imágenes están en otra carpeta de tu computadora y no dentro de tu proyecto, no se subirán. Mueve todas tus imágenes dentro de la carpeta mi-sitio/imagenes/ antes de publicar.
¿Y si quiero un dominio propio?
Netlify te permite conectar un dominio personalizado como www.rodrigotaller.com. Los dominios .com en México cuestan entre $150 y $300 al año en proveedores como Namecheap o GoDaddy.
Pero para empezar, el subdominio gratuito de Netlify es más que suficiente. Primero publica, después mejora.
Lo que aprendiste en este curso
Llegaste hasta aquí. Eso ya dice mucho de ti. Repasemos el camino que recorriste.
Aprendiste que HTML da estructura y CSS da estilo. Sin HTML no hay contenido. Sin CSS no hay diseño.
Conociste las etiquetas esenciales: <h1>, <p>, <a>, <img>, <div>. Con ellas puedes construir cualquier página básica. Son el vocabulario del desarrollo web.
Entendiste el modelo de caja. Cada elemento es una caja con margen, borde, relleno y contenido. Controlar esas cuatro propiedades es controlar el diseño.
Usaste Flexbox para alinear elementos. Con display: flex y unas pocas propiedades, puedes hacer layouts que antes tomaban horas. Es la herramienta más útil del CSS moderno.
Finalmente, hiciste tu página responsiva. Agregaste la meta viewport, usaste porcentajes y rem, y escribiste media queries para que tu sitio se vea bien en celulares. Eso es lo que hacen los profesionales.
La historia final: tú
Tal vez eres como Rodrigo, que tiene un negocio y quiere presencia en internet. Tal vez eres como Valeria, que quiere mostrar su trabajo y conseguir clientes.
O tal vez eres alguien que simplemente quiso aprender algo nuevo. Y lo lograste.
Publicar hoy tu página es el paso más importante. No esperes a que sea perfecta. Una página publicada imperfecta vale más que un proyecto perfecto que nadie ve.
Tus próximos pasos
Ya tienes las bases. ¿Qué sigue? Aquí van tres caminos concretos.
Practica con proyectos reales. Haz la página de tu negocio, tu portafolio o una página para un familiar. Aprendes más construyendo que leyendo.
Aprende JavaScript. HTML y CSS dan forma y estilo. JavaScript da interacción. Con los tres puedes construir casi cualquier cosa en internet.
Explora frameworks de CSS. Herramientas como Tailwind CSS o Bootstrap te ayudan a diseñar más rápido. Pero primero entiende CSS puro, como lo hiciste aquí.
El desarrollo web es una habilidad que se paga bien en México. Muchos proyectos freelance empiezan en $3,000 y llegan fácilmente a $15,000 o más por sitio. Vale la pena seguir.
Hoy publicaste tu primera página. Eso no lo puede quitar nadie.