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

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

Example:

• https://vercel-shorturl-starter.vercel.app/me
• https://vercel-shorturl-starter.vercel.app/google/recursion
• https://vercel-shorturl-starter.vercel.app/vercel/solutions/nextjs
• https://vercel-shorturl-starter.vercel.app/dev?u=thewbear

Submission Category:

DIY Deployments

Yaml File or Link to Code

ThewApp / vercel-shorturl-starter

Template for vercel-shorturl.

vercel-shorturl starter

Template for vercel-shorturl

Demo

Demo is deployed with the example redirects.yml.

Usage

1. Create a new repository from this template.
2. Edit redirects.yml.
3. Deploy to Vercel.

Features

For more features please visits vercel-shorturl.

View on GitHub

Support me

Comments

[Scott Spence]

Didn't know you could do this with yaml!

Will check this out! Thanks 🙏

[Thew]

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

[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

[Thew]

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.