Intro
En el vídeo anterior personalizamos nuestro sitio desarrollado con Astro. Ya está listo para ponerlo en producción. ¿Lo subimos a Vercel?
Aquí hay dos temas importantes:
- Uno es realizar la primera configuración del proyecto en Vercel.\
- Otro, como estamos trabajando en modo SSG (es decir, construimos el sitio en tiempo de despliegue y servimos HTML y CSS estático), es cómo hacer para que cuando publiquemos nuevo contenido en Content Island se lance un nuevo despliegue automáticamente.
Si lo prefieres, en este vídeo te explicamos paso a paso como hacerlo.
Vamos a ver como realizar esto paso a paso.
Subida a Github
El primer paso para poder desplegar es tener el proyecto en GitHub. Para ello:
Creamos un repo en github, vamos al apartado de Repositories
Y le damos al botón de New.
Vamos a llamar a nuestro repositorio mi-sitio.
Para que veas que lo podemos crear tanto para repositorios públicos como privados, vamos a crearlo como privado.
Y pulsamos sobre el botón de Create repository.
En la página principal copiamos la URL del repositorio.
Nos vamos a nuestro proyecto local, paramos la ejecución e inicializamos un repositorio de Git en nuestra carpeta de proyecto:
git init
Añadimos los nuevos cambios:
git add .
Hacemos commit:
git commit -m "Subiendo mi sitio a GitHub"
Vinculamos el repositorio local con el remoto:
git remote add origin
Creamos la rama main:
git branch -M main
Y hacemos push:
git push -u origin main
Si vamos a nuestro repositorio y refrescamos, podemos ver que el código ya está subido.
Desplegando en Vercel
Navegamos a Vercel. En caso de que no tengas cuenta, puedes crear una gratuita.
Pinchamos en Add New... → Project.
Si es la primera vez que usas Vercel, te pedirá que elijas la plataforma donde tienes tus repositorios, ya sea GitHub, Bitbucket o GitLab.
Seleccionamos nuestra cuenta.
Si es la primera vez que integramos GitHub con Vercel, tendremos que darle permiso. Le indicamos únicamente el repositorio con el que vamos a trabajar (mi-sitio). Es buena idea, por seguridad, no darle permiso a todos los repositorios, sino solo a los que vayamos a usar.
Instalamos.
Y confirmamos nuestra contraseña.
Aquí ya tenemos nuestro sitio. Ahora pinchamos en Import.
Vercel detecta automáticamente que es un proyecto de Astro y nos preconfigura los comandos de build y la carpeta de salida. También podemos configurarlo si necesitamos hacer algún ajuste.
IMPORTANTE: En nuestro caso necesitamos configurar la variable de entorno CONTENT_ISLAND_ACCESS_TOKEN con la API Key que hemos generado en Content Island para que Vercel pueda acceder a nuestro contenido.
Nos vamos a nuestro proyecto en Content Island y copiamos el valor de nuestro token.
Y lo añadimos como variable en Vercel. Ojo: no compartas este token con nadie.
Y pinchamos en Deploy.
Si esperamos un momento, nuestro sitio estará desplegado.
Le damos a Continue to Dashboard.
Y aquí podemos ver que se ha generado nuestro dominio.
Si pinchamos sobre la imagen del proyecto, ya estamos live. En mi caso, con un dominio del tipo .vercel.app.
También puedes tener un dominio personalizado, en este post del propio Vercel te explican cómo hacerlo.
Configurando el webhook en Content Island
Todo genial, pero... queremos que cuando publiquemos nuevos posts estos se vean reflejados automáticamente en nuestro sitio web.
Para ello, vamos a configurar un webhook que permita a Content Island notificar a Vercel que debe lanzar un nuevo despliegue cuando se publique contenido.
Nos vamos a los settings del proyecto de Vercel.
Elegimos Git en el sidebar.
En Deploy Hook, le damos un nombre al webhook (por ejemplo, Content Island Deploy), seleccionamos la rama (main) y pulsamos sobre Create Hook.
Esto nos dará una URL de webhook.
Ahora vamos al proyecto de Content Island y, en la pestaña de webhooks, creamos uno nuevo de Vercel.
Le damos un nombre, pegamos la URL del webhook y guardamos.
Volvemos y comprobamos que se ha creado correctamente.
A partir de ahora, cada vez que publiquemos nuevas entradas en Content Island, se lanzará automáticamente un nuevo despliegue en Vercel y nuestro sitio web se actualizará con el contenido más reciente.
Probando el webhook
Vamos a hacer una prueba...
Cambiamos el título de un post y lo publicamos.
Si vamos a la pestaña de Deployments en Vercel, veremos cómo se ha lanzado un nuevo despliegue automáticamente.
Si esperamos un poco puedes ver que el sitio se ha actualizado con el nuevo título del post.
Si vamos a vercel vemos que se ha actualizado la web.
Y a partir de ahora, solo tienes que preocuparte de crear buen contenido en Content Island. El resto se hace solo.