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
- Create a new repository from this template.
- Edit
redirects.yml. - Deploy to Vercel.
Features
For more features please visits vercel-shorturl.
Support me
Top comments (4)
Didn't know you could do this with yaml!
Will check this out! Thanks 🙏
It's possible because it parses the yaml and create a serverless function to handle the request.
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
At the build step, it reads
redirects.ymland generate a Vercel serverless function fileapi/redirect.jswhich contains parsed configuration. Template literal is forapi/redirect.jsgeneration.