DEV Community


Create your personal shorturl with Vercel + GitHub Actions

Thew Dhanat
Medical student · Software engineer · Learning Machine learning
・2 min read

My Workflow

Easily create your personal short url and deploy to Vercel with GitHub Actions.

Just create a new repository with this template, add your Vercel Secrets, then edit redirects.yml to suit your need.

There is an existing solution for this but it is configuring through routes or redirects properties in vercel.json. My solution uses yaml which is easier to work with and also supports dynamic path/querystring.

Here is an example of all configurable features.

- from: /me
  status: 308 # Change status code ex. 301, 302, 307 (Default), 308
- from: /google/:q # Match exactly one ex. /google/recursion
- from: /vercel/:slug* # Match zero or more ex. /vercel /vercel/docs /vercel/solutions/nextjs
- from: /twitter/:slug? # Match Zero or one ex. /twitter /twitter/thewdhanat
- from: /github/:slug+ # One or more ex. /github/ThewApp github/ThewApp/vercel-shorturl
- from: /dev/:slug1/:slug2 # Multiple match ex. /dev/p/information
- from: /google
    action: search # Must have this exact query
    q: :q # And this match in query ex. /google?action=search&q=recursion
- from: /dev
    u: :user? # Optional match ex. /dev /dev?u=thewbear

The example configuration is deployed here:


Submission Category:

DIY Deployments

Yaml File or Link to Code

GitHub logo ThewApp / vercel-shorturl-starter

Template for vercel-shorturl that automatically deploys using GitHub Actions.

vercel-shorturl starter

Template for vercel-shorturl that automatically deploys using GitHub Actions.


Demo is deployed with the example redirects.yml.


  1. Create a new repository from this template
  2. Add the following secrets to your repository:
    • VERCEL_TOKEN: You vercel account token obtained from
    • VERCEL_PROJECT: Content of the .vercel/project.json file generated by running vc link command in any empty directory.
  3. Edit redirects.yml

Then GitHub Actions will deploy to Vercel every time you make a change and every 5 days to prevent VERCEL_TOKEN expiration

Custom page

You can override home page and 404 page by placing index.html and 404.html in project root.

Support me

Buy Me A Coffee

Discussion (4)

spences10 profile image
Scott Spence

Didn't know you could do this with yaml!

Will check this out! Thanks 🙏

thewdhanat profile image
Thew Dhanat Author

It's possible because it parses the yaml and create a serverless function to handle the request.

spences10 profile image
Scott Spence


I took a look at the package used in it, I got a little lost when I saw template literals of code modules

Do you think you could detail how the package works or would that be too much?

It looks like a fair bit of work went into it

Thread Thread
thewdhanat profile image
Thew Dhanat Author

At the build step, it reads redirects.yml and generate a Vercel serverless function file api/redirect.js which contains parsed configuration. Template literal is for api/redirect.js generation.

Forem Open with the Forem app