Skip to content
Content Island logo Content Island logo Docs

Get Started Personal Site — 2. Deploy to Vercel

00:00 / 00:00

Deploying on Vercel and Connecting a Webhook

Complete guide to deploy your Astro site on Vercel and automate deployments using Content Island.

Here we will work on two parts:

  1. Upload your project to GitHub
  2. Deploy on Vercel + configure automatic webhook

1. Upload to GitHub

Before deploying the project, we need to have it in a remote repository.

1.1 Create the repository

  1. Go to GitHub and create a repo named mi-sitio.

01-github.jpeg

  1. Copy the repo URL.

1.2 Initialize Git in your local project

In the project folder:

git init
git add .
git commit -m "Uploading my site to GitHub"

1.3 Connect to the remote and push

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

2. Deploy on Vercel

2.1 Create project on Vercel

  1. Go to https://vercel.com.

02-vercel.jpeg

  1. Click New Project.

  2. Select Import Git Repository.

  3. Choose GitHub as the provider.

03-import-git-repository.jpeg

  1. Authorize only the necessary repo (mi-sitio) for security.

  2. Click Import.

04-import-my-sitio.jpeg

2.2 Configure Astro build

Vercel automatically detects Astro:

  • Build Command: astro build
  • Output Directory: dist

05-astro-detected.jpeg

2.3 Add environment variable

We need to give access to Content Island content:

CONTENT_ISLAND_ACCESS_TOKEN=YOUR_API_KEY

06-environment-variables.jpeg

⚠ Never share this token.

2.4 Perform the deployment

  1. Click Deploy.

07-deploy.jpeg

  1. Wait a few seconds while Vercel builds the project.

  2. Click Continue to Dashboard.

  3. Upon entering, you will see your site live with a domain like:

mi-sitio.vercel.app

08-web-deploy.jpeg

2.5 Custom domains (optional)

Official guide:
https://vercel.com/docs/domains/working-with-domains/add-a-domain

3. Configure a webhook in Content Island (for automatic deployments)

We want that when you publish new content, Vercel deploys automatically.

3.1 Create webhook in Vercel

  1. Go to the project Dashboard in Vercel.
  2. Go to settings.
  3. In the sidebar, open Git.
  4. Scroll down to Deploy Hooks.
  5. Create a new hook:
    • Name: Content Island Deploy
    • Branch: main

Vercel will generate a URL like:

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

09-deploy-hook.jpeg

3.2 Configure webhook in Content Island

  1. In Content Island, enter the project.
  2. Navigate to Webhooks.

10-en-add-newhook.jpeg

  1. Create a webhook:
    • Name: Content Island Deploy
    • Type: Vercel
    • URL: paste the URL generated by Vercel.

11-en-hook.jpeg

From now on, every time you publish content, Content Island will notify Vercel to rebuild your site.

4. Testing the webhook

  1. Edit the title of a post.
  2. Click Publish in Content Island.

11-modify-post.jpeg

  1. Go to the Deployments tab in Vercel.
    You will see that a new deployment has started automatically.

  2. Wait a few seconds and reload your site:

12-post-updated.jpeg

The post change is reflected in production.

🎉 Conclusion

With this you already have:

✔ The project deployed on Vercel
✔ Integration with GitHub
✔ Automatic webhooks to refresh your site
✔ A complete publishing workflow without worrying about deployment

From now on, just focus on creating content! ✨