Saltearse al contenido
Content Island logo Content Island logo Docs

Get Started Personal Site — 2. Desplegar a vercel

00:00 / 00:00

Desplegando en Vercel y conectando un webhook

Guía completa para desplegar tu sitio de Astro en Vercel y automatizar despliegues usando Content Island.

Aquí trabajaremos dos partes:

  1. Subir tu proyecto a GitHub
  2. Desplegar en Vercel + configurar webhook automático

1. Subida a GitHub

Antes de desplegar el proyecto, necesitamos tenerlo en un repositorio remoto.

1.1 Crear el repositorio

  1. Ve a GitHub y crea un repo llamado mi-sitio.

01-github.jpeg

  1. Copia la URL del repo.

1.2 Inicializar Git en tu proyecto local

En la carpeta del proyecto:

git init
git add .
git commit -m "Subiendo mi sitio a GitHub"

1.3 Conectar con el remoto y hacer push

git remote add origin https://github.com/brauliodiez/mi-sitio.git
git push -u origin main

2. Desplegar en Vercel

2.1 Crear proyecto en Vercel

  1. Entra en https://vercel.com.

02-vercel.jpeg

  1. Pulsa New Project.

  2. Selecciona Import Git Repository.

  3. Elige GitHub como proveedor.

03-import-git-repository.jpeg

  1. Autoriza solo el repo necesario (mi-sitio) por seguridad.

  2. Pulsa Import.

04-import-my-sitio.jpeg

2.2 Configurar build de Astro

Vercel detecta automáticamente Astro:

  • Build Command: astro build
  • Output Directory: dist

05-astro-detected.jpeg

2.3 Añadir variable de entorno

Necesitamos darle acceso al contenido de Content Island:

CONTENT_ISLAND_ACCESS_TOKEN=TU_API_KEY

06-environment-variables.jpeg

⚠ Nunca compartas este token.

2.4 Realizar el despliegue

  1. Pulsa Deploy.

07-deploy.jpeg

  1. Espera unos segundos mientras Vercel construye el proyecto.

  2. Pulsa Continue to Dashboard.

  3. Al entrar verás tu sitio live con un dominio tipo:

mi-sitio.vercel.app

08-web-deploy.jpeg

2.5 Dominios personalizados (opcional)

Guía oficial:
https://vercel.com/docs/domains/working-with-domains/add-a-domain

3. Configurar un webhook en Content Island (para despliegues automáticos)

Queremos que cuando publiques nuevo contenido, Vercel despliegue automáticamente.

3.1 Crear webhook en Vercel

  1. Ve al Dashboard del proyecto en Vercel.
  2. Ve a settings.
  3. En el sidebar, abre Git.
  4. Baja hasta Deploy Hooks.
  5. Crea un nuevo hook:
    • Nombre: Content Island Deploy
    • Branch: main

Vercel generará una URL del tipo:

https://api.vercel.com/v1/integrations/deploy/prj_xxxxxx/xxxx

09-deploy-hook.jpeg

3.2 Configurar webhook en Content Island

  1. En Content Island, entra al proyecto.
  2. Navega a Webhooks.

10-es-add-new-hook.jpeg

  1. Crea un webhook:
    • Nombre: Content Island Deploy
    • Tipo: Vercel
    • URL: pega la URL generada por Vercel.

11-es-hook.jpeg

A partir de ahora, cada vez que publiques contenido, Content Island notificará a Vercel para reconstruir tu sitio.

4. Probando el webhook

  1. Edita el título de un post.
  2. Pulsa Publish en Content Island.

11-modify-post.jpeg

  1. Ve a la pestaña Deployments en Vercel.
    Verás que se ha iniciado automáticamente un nuevo despliegue.

  2. Espera unos segundos y recarga tu sitio:

12-post-updated.jpeg

El cambio del post aparece reflejado en producción.

🎉 Conclusión

Con esto ya tienes:

✔ El proyecto desplegado en Vercel
✔ La integración con GitHub
✔ Webhooks automáticos para refrescar tu sitio
✔ Un flujo completo de publicación sin preocuparte por el despliegue

A partir de ahora, ¡solo céntrate en crear contenido! ✨