Vercel

00:00 / 00:00

Desplegando en Vercel

Vercel es una plataforma de alojamiento y automatización que permite a los desarrolladores desplegar aplicaciones web estáticas de forma sencilla y rápida.

Además, Vercel ofrece un plan gratuito que incluye:

Alojamiento de sitios web estáticos.
Certificado SSL.
Integración continua.
Etc.

En este ejemplo, vamos a ver cómo desplegar el proyecto "Get Started Nextjs" de Content Island en Vercel.

Paso 1: Crear un repositorio

Lo primero que necesitamos para desplegar este proyecto es un repositorio de GitHub:

Abrimos nuestra cuenta en Github y le damos a crear uno nuevo.
Le damos un nombre. get-started-deploy-vercel
Podemos crearlo público o privado, como queramos. Porque después vamos a darle permisos a Vercel para que se conecte al repositorio.
Y le damos directamente al botón de crear sin añadir ningún fichero.

Copiamos la URL del repositorio que acabamos de crear y lo clonamos en nuestro ordenador, en una carpeta vacía utilizando el siguiente comando:

git clone <URL del repositorio> .

Ponemos un punto al final para que git no añada una carpeta extra con el nombre del repositorio.

Ahora, teniendo clonado el repositorio con el proyecto de Nextjs en nuestro ordenador, simplemente copiamos todo el contenido y lo pegamos al proyecto que acabamos de crear y lo subimos al repositorio con los siguientes comandos:

git add .
git commit -m "Initial commit"
git push

Comprobamos que ahora ya esta subido el proyecto a nuestro repositorio de GitHub.

Paso 2: Configurar despliegue

Para configurar el despliegue en Vercel, necesitamos tener una cuenta en la plataforma.

Una vez logados, en la página principal, le damos al botón de Add new y seleccionamos la opción Project.

Añadir nuevo proyecto Vercel

Si es la primera vez que lo hacemos, tenemos que darle permisos a Vercel para acceder a nuestra cuenta de GitHub (o puedes elegir otro proveedor de Git).

Configurar Vercel con GitHub

Podemos seleccionar todos los repositorios o solo los que queramos. En este caso, seleccionamos el repositorio que acabamos de crear.

Una vez configurado, ya podemos seleccionar el repositorio que queremos desplegar y nos aparecerán las opciones de configuración.

Automaticamente ha cogido el mismo nombre del repositorio para la aplicación, si queremos podemos cambiarlo:

Nombre de aplicación

Por defecto nos ha elegido el framework que estamos usando. Si lo necesitamos, podemos cambiar las settings de compilación, pero en este caso podemos dejar las que vienen por defecto.

Opciones de compilación

Vamos a añadir una nueva variable de entorno porque recordemos que cuando se ejecuta la build del proyecto, se conecta con nuestro proyecto de Content Island para recuperar los datos de cada Post

Añadir nueva variable de entorno

Por lo que necesitamos configurar la variable de entorno CONTENT_ISLAND_SECRET_TOKEN y obtenemos el valor que nos proporciona Content Island en la pestaña General.

Añadir Content Island Token

Y le damos a Deploy.

¡Y listo! Ya tenemos nuestro proyecto con Content Island y Nextjs desplegado en Vercel.