Build your own BioLink page

Hauke Jung

Hauke Jung

— 3 min read

BioLink pages like Linktree charge monthly fees for features you can build yourself in an afternoon. This guide shows you how to create your own custom BioLink page and host it for free on GitHub Pages.

What You'll Build

A simple, responsive landing page with:

  • Profile photo and bio
  • Links to your social profiles and projects
  • Custom styling with Tailwind CSS and DaisyUI
  • Free hosting via GitHub Pages

Prerequisites

  • GitHub account
  • Claude Code (or any text editor)
  • Basic HTML knowledge (helpful but not required)

Step 1: Create the HTML Structure

Create an index.html file with this basic structure:

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Name - Links</title>
    
    <!– Tailwind CSS + DaisyUI -->
    <link href="https://cdn.jsdelivr.net/npm/daisyui@4.4.19/dist/full.min.css" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-base-200">
    <div class="container mx-auto px-4 py-8 max-w-2xl">
        <!– Profile Section -->
        <div class="flex flex-col items-center mb-8">
            <div class="avatar mb-4">
                <div class="w-32 rounded-full ring ring-primary ring-offset-base-100 ring-offset-2">
                    <img src="your-photo.jpg" alt="Profile" />
                </div>
            </div>
            <h1 class="text-3xl font-bold mb-2">Your Name</h1>
            <p class="text-base-content/70 text-center">Software Developer | Open Source Enthusiast</p>
        </div>

        <!– Links Section -->
        <div class="space-y-4">
            <a href="https://github.com/yourusername" 
               class="btn btn-lg btn-block btn-primary">
                GitHub
            </a>
            
            <a href="https://twitter.com/yourusername" 
               class="btn btn-lg btn-block btn-secondary">
                Twitter
            </a>
            
            <a href="https://your-blog.com" 
               class="btn btn-lg btn-block btn-accent">
                Blog
            </a>
            
            <a href="mailto:you@example.com" 
               class="btn btn-lg btn-block btn-ghost">
                Email
            </a>
        </div>
    </div>
</body>
</html>

Step 2: Customize with Claude Code

You can use Claude Code to generate variations or add features:

# Ask Claude Code to customize your page
claude "Add a projects section with cards showing my GitHub repos"
claude "Change the theme to light mode with custom colors"
claude "Add icons from Heroicons to each link button"

Claude Code can help you:

  • Add custom sections (projects, skills, testimonials)
  • Implement dark/light theme toggle
  • Add animations or transitions
  • Integrate analytics

Step 3: Customize Styling

DaisyUI provides several built-in themes. Change the data-theme attribute:

<html lang="en" data-theme="cyberpunk">

Available themes: light, dark, cupcake, cyberpunk, valentine, synthwave, retro, and many more.

You can also create custom color schemes by adding a config:

<script>
    tailwind.config = {
        daisyui: {
            themes: [
                {
                    mytheme: {
                        "primary": "#your-color",
                        "secondary": "#your-color",
                        "accent": "#your-color",
                    },
                },
            ],
        },
    }
</script>

Step 4: Setup GitHub Repository

  1. Create a new repository named username.github.io (replace with your GitHub username)
  2. Clone the repository locally
  3. Add your index.html file
  4. Commit and push:
git add .
git commit -m "Initial biolink page"
git push origin main

Step 5: Enable GitHub Pages

  1. Go to your repository on GitHub
  2. Click Settings → Pages
  3. Under "Source", select "Deploy from a branch"
  4. Select "main" branch and "/ (root)" folder
  5. Click Save

Your site will be live at https://username.github.io within a few minutes.

Step 6: Add Custom Domain (Optional)

If you own a domain:

  1. In your repository, create a file named CNAME with your domain:
yourdomain.com
  1. Add DNS records at your domain provider:
Type: A
Name: @
Value: 185.199.108.153

Type: A
Name: @
Value: 185.199.109.153

Type: A
Name: @
Value: 185.199.110.153

Type: A
Name: @
Value: 185.199.111.153
  1. In GitHub Pages settings, enter your custom domain and enable HTTPS

Advanced Features You Can Add

Use Claude Code to implement:

  • Analytics: Track visitors with Plausible or Google Analytics
  • Dynamic content: Fetch GitHub stars or latest blog posts via API
  • Contact form: Use Formspree or Web3Forms for free form handling
  • SEO optimization: Meta tags for better social media sharing
  • QR code: Generate a QR code linking to your page

Example Implementation

Check out a complete example on GitHub.

Conclusion

You now have a completely free, customizable BioLink page that you control. No monthly fees, no feature limits, and you can modify it however you want. Update it by editing the HTML and pushing to GitHub - changes go live in seconds.

Read more