How to create a fancy Link-in-Bio page in less than 5 minutes

Now let's see Paul Allen's card. Look at that subtle off-white coloring. The tasteful thickness of it. Oh, my God. It even has a watermark.

Okay, let's be real. How many times have you rolled your eyes at those “professional” link-in-bio tools? They promise the world, deliver a clunky interface drowning in affiliate links (theirs, not yours), and then hit you with a paywall for basic features. Seriously? I was done. Done with the bloat, done with the upselling, and definitely done with paying for something so ridiculously simple.

So, like any seasoned front end developer, I channeled my inner rebel and built my own. A clean, mean, link-slinging machine of pure, unadulterated simplicity. And guess what? It's free. Because the internet shouldn't charge you an arm and a leg for a digital business card. If you're tired of the link-in-bio nonsense, too, stick around. I'm about to spill the tea (and the code).

Quick deployment

So, you're ready to unleash your online persona upon the unsuspecting internet? Excellent. Here's the lowdown on getting your digital business card up and running faster than you can say "link-in-bio alternative" in Traditional Chinese.

First things first, you'll need a GitHub account, a rizz picture of yourself (or a logo, if you're feeling corporate), and, naturally, the links you want the world to click.

Head over to Next Card repo and hit that glorious Use this template button. GitHub will then offer to clone the repository to your own account.

Change ./next.config.js basePath to contain your chosen repository name. This is needed for GitHub pages or other non-index page deployment.

/** @type {import('next').NextConfig} */
module.exports = {
    // ...
    basePath: '/your-repository',
};

Go to Settings > Pages section and enable deployment via GitHub action.

Fill your info

Now, swap out ./card-image.jpg with your picture (or logo, you get the idea) and dive into ./config.ts to customize the details.

Here are the available settings:

• title: Your name or company name. Keep it classy.

• bio: A short and sweet description.

• background: Pick a vibe. fresh, strict, bold, gradient, rainbow.

• cardImage: Set the image to be used at the header of the card.

• gaId: Set your Google Analytics ID to enable tracking. More on this later.

• shareTitle: Localize the sharing link title.
  

export const config: Config = {
    title: 'Patrick Bateman',
    bio: 'Specialist in mergers and acquisitions',
    background: 'gradient',
    cardImage: image,
    gaId: 'G-XXXXXXXXX',
    shareTitle: 'Share link',
    // ...
}

Add contact links

In the same ./config.ts file, populate the headerLinks array with your contact info and the mainLinks section with your main links. Each entry needs a title (what people see), an id (a unique identifier), a url (where the link goes), and an icon to make it even more graphical. You can get icons from the Phosphor icons collection.

import {
    Envelope,
    GithubLogo,
} from '@phosphor-icons/react/dist/ssr';

export const config: Config = {
    // ...
    headerLinks: [
        {
            title: 'Email',
            id: 'email',
            url: 'mailto:[e-mail]',
            icon: Envelope,
        },
    ],
    mainLinks: [
        {
            id: 'github',
            title: 'GitHub',
            url: 'https://github.com/user-name',
            icon: GithubLogo,
        },
    ],
}

Attach vCard file

A vCard, also known as a VCF (Virtual Contact File), serves as a standardized file format for electronic business cards. This file can be attached to your page, allowing visitors to easily import your contact info into their smartphones, Outlook, and other calendar applications without having to copy/paste. You can configure this at ./config.ts. You can also enable isOrganization to display contact as a company.

export const config: Config = {
    // ...
    vCard: {
        firstName: 'Patrick',
        lastName: 'Bateman',
        organization: 'Pierce & Pierce',
        title: 'Vice President',
        birthday: new Date(1961, 9, 23),
        workPhone: '[phone]',
        email: '[e-mail]',
        // isOrganization: true,
    },
}

Deploy website

Commit your changes, push to the main branch and wait until .github/workflows/pages.yml is done. Your Next Card is available at https://<user-name>.github.io/<repo-name>/.

Set up analytics

Next Card plays nice with Google Analytics. Just drop your property ID into the config, and you'll be tracking your visitors' activity and two custom events: link_click and contact_click. Each event reports the link id as a value parameter.

Custom domain

You can even set up a custom domain if you want to get really serious. Check out the GitHub docs for the how-to. And don't forget to remove basePath from ./next.config.js.

Remember, though, even with all these bells and whistles, the Paul Allen business card is still the gold standard. And while you're at it, a star on the repo wouldn't hurt. Don't make me get all American Psycho on you.