My approach to a "link in bio" site

A couple of weeks back, I got nudged by this email marketing campaign to create my “link in bio” site.

I peeked at the content and even clicked through to see the pitch. Frankly, the “business card” alternative type of mini website holds a fond place in my heart (more on that later). Still, I didn’t much care to re-hitch myself to WordPress.

Fortunately, this kind of site is super straightforward to build. Here’s the quick assessment I did and the path, platforms I used, and path I took in case you want to do the same. You're also in store for a bit of internet nostalgia.

What is a “link in bio” site?

I first ran across this term because of Instagram, where users couldn’t post clickable links in their posts, but could include a single website link in their account’s “bio” page.

That page could include many links^[1] and act as a launchpad to find more related content. Literally, there would be a post with “link in the bio” as a signal of how to take a next step.

These have become more widespread and there are SaaS offerings from Linktree, Squarespace, and (as advertised to me…) WordPress among others.

Also, these aren’t new. At all. I was using flavors.me back in 2010 (now defunct, but here's an old review with some screenshots if you're interested), which did pretty much the same thing for free (premium was $20 annually, but their business model didn’t pan out…).

Whether 2010 or 2023…there are a pretty foundational set of characteristics:

• Name at the top along with a bit of personalization
• Collection of links unique to the individual/organization
• Page loads quickly and looks good on any device

For mine, added few additional things:

• Want to use my own custom domain
• Want to use few resources (KISS)

I also didn’t want to be tied to a SaaS platform (even though Wordpress/ Squarespace will have more staying power than flavors.me had). At the same time, I didn’t want to completely roll my own site on a virtual server, like I also did in 2010^[2]. Yeah, back then I was trying SaaS and IaaS for to meet this need. But in 2023 I went PaaS (more on that below).

Today, these sites purposefully link-out instead of trying to aggregate content. This also works well for me, because the last thing I want to do is have to keep up on what changes/limitations I'll have in working with [insert service name here]'s API nuances. I'll just link out and keep my site simple, thanks.

This decision makes the site very static. I considered whether I simply redirect the custom domain to a custom page on this site. As I write this, it’s still a really tempting option, but NO! It will be a separate site. My deciding factor was that I didn’t want this site to include my blog site header and “Subscribe” button^[3]…I wanted it more like a plain business card.

Doing the work

For a simple static site, I like working with Jekyll, which as I’ve noted before can be easily hosted on the Azure Static Web Apps PaaS offering. It easily supports my custom domain (and handles CDN, as well as the https certificate, score!). In this scenario, I can leverage the free hosting tier on Azure, another bonus!

I did a search for a jekyll template that would suit this purpose, and I found pglevy/linkinbio-template (github.com) almost immediately.

I like it because it:

• it is super lightweight, serving up a static HTML site built using Jekyll
• lets me update content in dedicated files which are _included when the site builds
• supports light/dark theme matching based on the user’s device settings
• is something that I could tweak the formatting of later if I cared to

I wasn't deterred that it's intended for use with GitHub Pages. Those use Jekyll, and for a site as simple as this it should be minimal if any effort to use apart from Pages.

Next, I used the “create from template” feature on GitHub to start my repo^[4] and got to work adding my details to the interests.yml and links.yml files.

The icons are the text name of bootstrap icons, which scale nicely. There is enough of a selection to find appropriate ones to compliment my links.

A few other "little things" that I tweaked were:

• created a favicon using this favicon generator, which I also added to this site (matching colors of course).
• tweaked the footer text, keeping credit to the original repo
• added my own headshot, though I did consider dynamically linking this to my GitHub profile avatar

The final step was to set up the build and deployment using Azure Static Web Apps based on the main branch my repo. The Deploy Your Web App section of this tutorial is the process I use. Then I added my domain.

You can interact with the final product here:

Link to Matthew Anderson

Links to connect with Matt.

Let me know if you have any questions!

1. often these links are affiliate tracking links in the case of “influencers”. ↩︎
2. fun fact, a project like this called lifehacker.me, is the reason why I first joined GitHub. Seriously. This post by Adam Dachis on Lifehacker, links to his lifehacker.me GitHub repo, which was enough reason to create my GitHub account that same day^[2a], September 27, 2010. What’s old is new again. ↩︎
• [2a] for what it’s worth, I joined GitHub because it was amazing to me that we could find, share, and collaborate on code online. Seemed like the kind of thing I should explore more^[2b]. ↩︎
• [2b] I then promptly downloaded the zip file instead of learning how to clone the repo 🤦 I had a site to build! ↩︎
3. though I do want you to subscribe if you haven’t already 😀 Subscribers were teased in my August update that a post about this was coming. You, too, can be gripped with anticipation the next time I drop hints about upcoming posts. ↩︎
4. no, I didn’t download a zip (remember 2b above). Apparently I’ve learned better habits in the last 13 years. Also note, this one isn’t PHP 😁 ↩︎