Imagen destacada del artículo cómo agregar un dominio personalizado a vercel

cómo agregar un dominio personalizado a vercel

vercel svg
actualizado: 14 / 02 / 2023

¿Estás listo para llevar tu proyecto al siguiente nivel un y pasar de un subdominio de Vercel (nombre.vercel.app) a una dirección de dominio personalizado?.

En este post, te mostraremos cómo agregar un dominio personalizado a Vercel para que tu proyecto tenga una dirección web única, segura y sin problemas.

Para este tutorial doy por echo que ya estas familiarizado con la plataforma y tienes desplegado tu proyecto. Aclarado esto vamos a empezar

Comprar un Dominio

Este punto puede parecer obvio pero para tener un dominio personalizado en vercel debes antes registrar el dominio en la plataforma de tu preferencia. Así que debes hace una minima inversión, normalmente el primer año es muy barato así que tampoco es demasiado.

Consejo dondé comprar tú dominio

Personalmente uso Nominalia (tranquilo no es un enlace afiliado) ya que sus precios de oferta son realmente buenos e incluso ofrece algunas extensiones como las .online totalmente gratis.

Nota importante:

Algunas extensiones estan en oferta el primeraño gratis pero el costo de renovación es bastante alto, así que antes lo mejor es mirar los precios de renovación que ofrece la empresa.

Nota importante:

No te recomiendo adquirir dominios gratuitos de plataformas como freenom.com ya que normalmente vienen cargados de mucho span que seguramente te arrepentirás en el futuro.

Preparar tu proyecto en vercel para asignarle un dominio

Para este ejemplo compre el dominio juneikerc.com ese será mi sitio personal, ahora esta realmente en pañales así que no prestes demasiada atención al diseño y estructura.

Para agregar un dominio personalizado en tu proyecto de Vercel, debes seguir los siguientes pasos:

  1. Selecciona tu proyecto

  2. Haz clic en el botón "Settings" (Ajustes) en la barra de navegación.

  3. En la barra lateral selecciona la opción Domains

    Panel dentro de vercel para agregar un dominio
    Panel dentro de vercel para agregar un dominio

  4. Escribe el nombre del dominio y pincha el botón Add. A continuación aparecerá un Modal con algunas reglas de redirecciones, selecciona la que prefieras, to prefiero la segunda en este caso redireccionar desde www. a juneikerc.com

    Modal para seleccionar las reglas de redireccionamientos
    Modal para seleccionar las reglas de redireccionamientos
    Panel para configurar los dns en vercel
    Panel para configurar los dns en vercel

Configurar los dns desde tu proveedor para apuntar a vercel

  1. Inicia sesión en la cuenta del registrador donde compraste el dominio.

  2. Busca la configuración DNS del dominio. Esto suele estar en una sección llamada "DNS", "Gestionar DNS" o "Dominio y DNS"

  3. Aparecerán un listado en el que debes buscar la opcón para agregar un registro de tipo A,

  4. Al registro que acabas de crear debes asignarle el nombre @ o el mismo nombre de dominio, con el valor de dirección IP que te otorga vercel, en este caso es 76.76.21.21

    Nota importante:

    En caso de tener un registro de tipo A previamente difeinido vercel te indicará que hay conflictos y debes eliminarlo el primero

Porpagación de los DNS en Vercel

Ahora ya toda la configuración esta terminada solo resta esperar a que los dns se propagen para poder visitar la web en tú nuevo dominio, este proeceso en vercel según mi expercienca personal no debería tardar más de 5 minutos.

DNS propagados correctamente en vercel
DNS propagados correctamente en vercel

Artículos relacionados:
Input css: personalizar estilos de campos de entrada en css

Imagen destacada del artículo Input css: personalizar estilos de campos de entrada en css

Cómo centrar un botón con css

Imagen destacada del artículo Cómo centrar un botón con css

CodeGPT: ChatGPT dentro de vscode

Imagen destacada del artículo CodeGPT: ChatGPT dentro de vscode

Cómo insertar imágenes en HTML

Imagen destacada del artículo Cómo insertar imágenes en HTML

Lista desplegable en HTML (etiqueta select)

Imagen destacada del artículo Lista desplegable en HTML (etiqueta select)

Headless cms (cms sin cabeza)

Imagen destacada del artículo Headless cms (cms sin cabeza)

Strapi cms: headless cms multipropósito de código abierto

Imagen destacada del artículo Strapi cms: headless cms multipropósito de código abierto

como hacer una tabla en html

Imagen destacada del artículo como hacer una tabla en html