DEV Community

Thew Dhanat
Thew Dhanat

Posted on

Create your personal shorturl with Vercel + GitHub Actions

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

The example configuration is deployed here: https://vercel-shorturl-starter.vercel.app

Example:

Submission Category:

DIY Deployments

Yaml File or Link to Code

GitHub logo ThewApp / vercel-shorturl-starter

Template for vercel-shorturl.

Support me

Buy Me A Coffee

Discussion (4)

Collapse
spences10 profile image
Scott Spence

Didn't know you could do this with yaml!

Will check this out! Thanks 馃檹

Collapse
thewdhanat profile image
Thew Dhanat Author

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

Collapse
spences10 profile image
Scott Spence

Genius!

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.