Cómo publicar tu app con dominio propio en Netlify

Tu app funciona en tu ordenador y no sabes cómo sacarla al mundo. Con Netlify la pones online con tu dominio en diez minutos.

Ya la tienes. Le has pedido a una IA que te monte una web o una aplicación pequeña, has ido corrigiendo cosas, y funciona. En tu ordenador.

Y ahí se queda mucha gente. Porque el salto de "funciona en mi carpeta" a "está en internet con mi dominio" parece que requiere saber de servidores, y no.

Con Netlify son diez minutos. Literalmente hay una forma de hacerlo que consiste en arrastrar una carpeta a una página web. Te cuento las dos rutas, la de arrastrar y la buena, y luego cómo enchufar tu dominio.

¿Qué es Netlify y por qué esta y no otra?

Netlify es un sitio donde dejas los archivos de tu web y ellos se encargan de servirla al mundo: el servidor, el certificado de seguridad, la velocidad y la disponibilidad.

Lo que a ti te importa de todo eso es que el plan gratuito da para muchísimo. Sitios ilimitados, certificado de seguridad incluido, dominio propio incluido. Para un proyecto personal, una landing, una herramienta pequeña o el portfolio de un cliente, no vas a pagar nada.

¿Es la única? No. La comparación con la otra grande la tengo hecha en Netlify frente a Vercel, y hay más opciones según lo que necesites, como cuento en desplegar una app hecha con IA en Hostinger cuando lo que buscas es alojamiento con todo incluido.

Para lo que vamos a hacer aquí, Netlify es la más rápida sin discusión.

Antes de empezar: ¿qué tipo de app tienes?

Esto decide si esto te va a servir o no, así que aclarémoslo en dos líneas.

Sitio estático. HTML, CSS y JavaScript que se ejecuta en el navegador. También lo que sale de la mayoría de generadores modernos si haces una construcción previa. Netlify sirve esto perfectamente.

App con servidor propio y base de datos. Si tu aplicación necesita un proceso corriendo todo el rato y una base de datos, Netlify por sí solo no es la respuesta directa. Puedes usar sus funciones para la parte de servidor y una base de datos externa, pero eso ya es otro tutorial.

Si le pediste a una IA "hazme una web con estas secciones" o "una calculadora que haga esto", casi seguro tienes lo primero. Sigue leyendo.

Ruta 1: arrastrar la carpeta (para probar en dos minutos)

Entras en Netlify, te creas una cuenta gratuita con tu correo, y en el panel te aparece una zona que dice algo así como "arrastra aquí tu carpeta".

Coges la carpeta de tu proyecto, la que tiene dentro el archivo index.html, y la sueltas ahí.

Espera unos segundos. Y ya está publicada. Te da una dirección tipo nombre-raro-12345.netlify.app y esa web ya la puede abrir cualquiera en el mundo.

Sirve para enseñársela a alguien hoy. Pero tiene un problema gordo: cada vez que cambies algo tienes que volver a arrastrar la carpeta entera. Y en la tercera vez que lo hagas te vas a hartar.

Ruta 2: conectarlo a un repositorio (la buena)

Esta es la que quieres si el proyecto va a seguir vivo.

La idea: tu código vive en un repositorio (GitHub, por ejemplo), y cada vez que subes un cambio, Netlify lo detecta y republica la web sola. Tú no vuelves a tocar Netlify nunca más.

Suena a cosa de programadores y es de las pocas cosas técnicas que de verdad merece la pena aprender aunque no programes. Y si trabajas con una IA que te escribe el código, se lo puedes pedir a ella: "sube esto a un repositorio nuevo de GitHub" y lo hace.

Los pasos en Netlify:

1. En el panel, botón de añadir un sitio nuevo, opción de importar desde Git. 2. Eliges tu proveedor y le das permiso para leer tus repositorios. 3. Seleccionas el repositorio. 4. Te pregunta el comando de construcción y el directorio de publicación.

Ese cuarto punto es el único que confunde. Si tu web es HTML puro, el comando de construcción se deja vacío y el directorio de publicación es la carpeta donde está el index.html (muchas veces es la raíz, un punto). Si usaste algún generador o framework, tanto el comando como la carpeta te los dice la documentación de esa herramienta, y Netlify además intenta detectarlos solo.

Le das a desplegar. Un minuto. Publicada.

Y desde ese momento, cada cambio que subas al repositorio se publica solo en menos de un minuto. Esa es la diferencia real entre las dos rutas.

¿Cómo pongo mi web con mi propio dominio?

Ahora la parte que a todo el mundo le da respeto. Son tres pasos.

Paso 1: ten un dominio. Si no lo tienes, lo compras en cualquier registrador. Cuesta lo que cuesta un café al mes, aproximadamente, según la extensión.

Paso 2: añádelo en Netlify. En tu sitio, sección de dominios, "add a domain". Escribes tu dominio tal cual: tudominio.com. Netlify comprueba que existe y te dice qué tienes que configurar.

Paso 3: apunta el dominio a Netlify. Aquí hay dos caminos.

El fácil: dejar que Netlify gestione tus DNS. Te da cuatro direcciones de servidores de nombres y tú las pones en el panel de tu registrador, sustituyendo las que hubiera. A partir de ahí todo lo del dominio se configura desde Netlify.

El manual: mantener los DNS en tu registrador y añadir dos registros. Uno de tipo A para el dominio sin www, apuntando a la dirección IP que te indica Netlify. Y uno de tipo CNAME para el www, apuntando a tu dirección .netlify.app.

¿Cuál elegir? Si el dominio solo lo usas para esta web, el fácil. Si ese dominio también tiene el correo corporativo configurado, ten cuidado: cambiar los servidores de nombres sin migrar bien los registros del correo te deja sin correo. En ese caso, ruta manual y toca solo los dos registros que hacen falta.

El certificado de seguridad. No hay que hacer nada. Cuando el dominio apunta bien, Netlify emite el certificado solo y tu web pasa a cargar con el candado. Tarda entre unos minutos y unas horas.

Lo que se te va a atascar

La propagación de DNS. Cambias los registros y la web no carga. No has hecho nada mal: los cambios de DNS tardan en extenderse por internet, desde unos minutos hasta un día entero. Y tu navegador guarda la versión vieja, así que pruébalo en una ventana de incógnito o desde el móvil con datos.

Te has cargado el correo. Si cambiaste los servidores de nombres y tenías correo en ese dominio, revisa que los registros MX estén copiados en Netlify. Es el error caro de este proceso.

Las rutas rotas. Si tu web tiene varias páginas y al entrar directamente a una da error 404, necesitas un archivo de redirecciones. Es un archivo de texto que se llama _redirects en la carpeta de publicación. Si usas una aplicación de una sola página, la regla que necesitas es la que manda todo a index.html con código 200. Si no sabes escribirla, pídesela a la IA con la que montaste la web: es una línea.

Las claves de API en el código. Si tu app llama a algún servicio con una clave, esa clave no puede estar en el código del navegador, porque cualquiera la ve con dos clics. Netlify tiene variables de entorno para esto, pero solo funcionan en la parte de servidor. Si tu app es puramente de navegador y necesita una clave secreta, tienes un problema de diseño, no de despliegue.

Los formularios. Netlify tiene formularios integrados gratis: añades un atributo al formulario de tu HTML y los envíos te llegan al panel. Está muy bien para una landing y te ahorra montar nada más.

¿Y ahora qué?

Con la web publicada y el dominio apuntando, ya tienes algo real que enseñar. Y lo importante es lo que se abre después: cada cambio que hagas está online en un minuto, sin que tengas que acordarte de subir nada.

A partir de aquí, lo que suele venir es querer que la web haga cosas: recoger correos, cobrar, mostrar contenido distinto a cada usuario. Ese camino lo tengo mapeado entero en crear apps sin programar.

Algunos enlaces de este artículo son de afiliado: si contratas la herramienta, me llevo una comisión sin que a ti te cueste más.

Si no sabes por dónde empezar a montar cosas con IA ni qué herramientas te encajan, tengo un test corto que te lo aclara.

Hacer el test de IA

Relacionado

Sigue leyendo