Shortening my URL shortener

In my presentation slides, I would like to refer people with easy-to-remember URLs. So I created an URL shortener (and shortened the use of it even more).
digital transformation
Author

Piet Stam

Published

September 4, 2022

Use case

In my presentation slides, I would like to refer people to the site where they can find the slides, but avoid those very long URLs that nobody can remember. So, instead of:

https://github.com/pjastam/talks/subdirectory/with/a/very/long/name/for/these/nice/slides

I want to have something like this:

https://pst.am/nice-presentation

Inspired by Andrew Heiss1, Kent C. Dodds2 and Adrian Henry3, I managed to do so and will tell you how. In addition, since I was in the mood to make my workflow as short as possible, I went on to shorten the keystrokes in my local browser. There is a bonus section about this.

1 The shortened personal URL at this slide triggered me

2 GitHub repository for netlify-shortener

3 Blog on building your own link shortener with Netlify

Prerequisites

  • A GitHub account (to set up a _redirects file)

  • A Netlify account (to execute the _redirects file)

  • A Brave/Chrome browser

Step-by-step guide: URL shortener

  • Purchase a domain to use as your short link domain

  • Make up a very, very domain name (in my case, I imagined pst.am would be nice)

  • Set up a new site at Netlify

  • Buy your domain name from Netlify during this set up

  • Alternatively, buy your domain name from another registrar, which is what I did

  • Create a private git repository called url-shortener at GitHub

  • Create a _redirects file and add some initial configuration lines to map short links to full URLs

  • Login to Netlify and connect the GitHub repo

  • Enable automatic TLS certificates with Let’s Encrypt for your short domain name at Netlify

  • Wait until the domain name is served by Netlify’s DNS

    • This may take up to 24 hours, depending on your registrar processing the change in nameservers

  • The first line of code in the _redirects file is a helper function for easily editing the _redirects file in your GitHub repository online

    • Open your browser
    • Type pst.am/edit
    • Commit your changes

  • The second line of code in the _redirects file links to a default page, in this case the homepage of my website, if you type the short domain name without extension

    • Open your browser
    • Type pst.am
    • Hit the enter key

  • To add new redirects, start editing the _redirects file and add a line of code starting with a \ followed by a short word or abbreviation, then at least one space, and finally the URL to which the short word or abbreviation should redirect.

Step-by-step guide: Keystrokes-shortener

  • Open your Brave/Chrome browser

  • Navigate to: Settings -> Search Engine -> Manage Search Engines and Safe Search -> Site Search -> Click the Add button

  • Fill out pst.am as the search engine, :x as the shortcut and the URL https://pst.am/%s

  • Click the Add button

  • Note that in this guide I use :x as a shortcut, you can use this too or replace it by another shortcut if you like

  • You can now edit the _redirects file in your GitHub repository online as follows

    • Open your browser
    • Type :x
    • Press space bar or tab key
    • Type edit
    • Hit return key

  • Or, if you want to go to my homepage

    • Open your browser
    • Type :x
    • Hit return key

A next step?

I occasionally use my workflow to shorten a URL for a new presentation. Setting up new presentation slides does not happen every day in my case, so editing the _redirects file online at GitHub every now and then is no bother.

But you may like to automate this part of the workflow if you need to shorten URLs on a more frequent basis, for example in case of creating your daily posts. Kent C. Dodds shows you how in his video at YouTube. The downside of this is that those links will be rather cryptic. Like the ones you get if you use the bit.ly shortened URLs, for example. This makes the shortened URL difficult to remember.

Citation

BibTeX citation:
@online{stam2022,
  author = {Stam, Piet},
  title = {Shortening My {URL} Shortener},
  date = {2022-09-04},
  url = {https://www.pietstam.nl/posts/2022-09-04-url-shortener},
  langid = {en}
}
For attribution, please cite this work as:
Stam, Piet. 2022. “Shortening My URL Shortener.” September 4, 2022. https://www.pietstam.nl/posts/2022-09-04-url-shortener.