DEV Community

loading...

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
  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:

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

Demo is deployed with the example redirects.yml.

Usage

  1. Create a new repository from this template
  2. Add the following secrets to your repository:
    • VERCEL_TOKEN: You vercel account token obtained from https://vercel.com/account/tokens
    • 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)

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.

Forem Open with the Forem app