Personal URL shortener & Dynamic QR Codes with Jekyll and GitHub Pages

Pascal Andermatt — Sat, 27 Jan 2024 17:26:05 +0000

Ever wondered how to create your very own URL shortener or generate dynamic QR codes? You might be surprised to learn that it's not only possible but also quite simple with GitHub Pages. In this post, I'll walk you through the steps to achieve this.

Setting Up Your GitHub Repository

Begin by creating a new repository on GitHub. I named mine u for a short and sweet URL like pandermatt.ch/u/. This naming trick can really personalize your links!

Don't have a custom domain? No worries! GitHub has got you covered with a default hosting option at pandermatt.github.io/u/. Of course, if you have a custom domain, you can direct it to something catchy like qr.pandermatt.ch.

Dynamic QR Codes

Here’s where the fun begins. Imagine you’ve created a link such as pandermatt.ch/u/123. Convert this into a QR code. The cool part? You can change where this QR code points to at any time!

Create Essential Files

Now that we've set the stage, it's time to create the magic. You'll need to add a couple of essential files to your GitHub repository. You can find the final code at https://github.com/pandermatt/u_public.

_layouts/redirect.html

This HTML file will handle the redirection logic for your custom URLs and QR codes.

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>{{ page.redirect }}</title>
    <meta http-equiv="refresh" content="0;URL='{{ page.redirect }}'" />
  </head>
 <body>
 </body>
</html>

Gemfile

source "https://rubygems.org"

gem "jekyll"

_config.yml

permalink: :title.html

exclude: [Url]

index.md

This file redirects your base URL (in this case, pandermatt.ch/u) to a custom 404 page.

---
layout: redirect
redirect: '<YOUR-DOMAIN>/404'
---

The `_posts` folder

Here, each entry corresponds to a specific redirect. For instance, to redirect pandermatt.ch/u/github to your GitHub profile, you'd create a markdown file named 2024-01-27-github.md in the _posts folder. This file contains similar front matter, directing users to the specified URL, which in this case is your GitHub page.

_posts/2024-01-27-github.md

---
layout: redirect
redirect: 'https://github.com/pandermatt'
---

Deploy Your Changes

Once you've created these files, push them to your GitHub repository. Then navigate to the GitHub Pages settings of your repository and configure it to build from the main branch.

🥳 Enjoy

And that's it! With these simple steps, you've successfully transformed your GitHub Pages into a versatile platform for your custom URL shortener and dynamic QR code generator.

Congratulations! You now have a powerful tool at your fingertips. Whether it's for personal branding, business, or just for fun, the possibilities are endless. Enjoy your new custom URL and dynamic QR code setup!

DEV Community: Pascal Andermatt