Grant Glidewell | Blog

Making a URL shortener

cinquecento in the city by Adam Griffith

Initial Project Setup

This was inspired by this post from Kent C Dodds.

Create a github repo, the only file it needs is a _redirects file containing something along these lines:

/youtube   https://www.youtube.com/channel/UCTUuyVBYiopWoTEJu6ptDbg
/github    https://github.com/grantglidewell/
/twitter   https://twitter.com/GrantGlidewell
/blog      https://blogwell.io

/*         https://grantglidewell.com

Set Up Netlify

Make an account and connect that repository. No need to select build options, just deploy that thing! The default behavior of Netlify is to re-deploy your repo every time the master branch is updated, this is exactly the behavior we want. If you have a custom domain (preferably a short one) follow the documentation in netlify to make that connection.

Automate

This is where things diverge a bit. Kent created a package that allows you to use an npm script to add a redirect to the URL shortener. Install it, and add this script to your package.json

"scripts": {
    "shorten": "netlify-shortener"
  }

Now if you run yarn shorten http://whatever.com whatever the package will write a new line to your redirects, and then push that change to your github repo. This is great and getting more useful.

Add your baseUrl to that package.json so you get a useful clipboard copy of your shortened url after it is pushed.

But I want to run this from anywhere! Kent has a solution for that, he make an alias in his bash profile. It looks like this:

alias shorten="pushd ~/code/shortner-repo/ && npm run shorten \"{$1}\" \"{$2}\" && popd"

However, Us ZSH users trying to implement that same functionality needed to do something a bit different:

function shorten() {
  pushd ~/code/shortner-repo/
  yarn shorten $1 $2
  popd
}

now anywhere on the command line you can run shorten url name!

Grant Glidewell | Blog