Build Your Own Music Links Page with Hugo

Many artists use services like Linktree to create a single page that aggregates all their important links - social media, music platforms, and other content. However, you can create your own customized version using Hugo. This tutorial will show you how to build a beautiful, responsive music links page that you can host anywhere. It will mirror the changes I made to create a link page for Activ8te at https://activ8te.io/links.

The Final Result

Final page showing avatar, social links, and platform links

Prerequisites

Hugo installed on your system
Basic Hugo website set up
Basic understanding of HTML and CSS
Tailwind CSS set up in your Hugo project
Font Awesome for social icons

File Structure

We’ll create two main components:

A content file (links.md) containing all our links and page data
A layout template (links.html) that styles and displays the content

The Content File

Create a new file at content/links.md:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
---
title: "Artist Name's Music Links"
date: "2024-11-29"
layout: links
hideHeader: true
avatar: "/images/artist-logo.png"
bio: "Your artist bio goes here. Make it compelling and brief."
social:
  - name: Instagram
    url: https://www.instagram.com/yourhandle/
    icon: fab fa-instagram
  - name: Facebook
    url: https://www.facebook.com/yourpage/
    icon: fab fa-facebook
  - name: YouTube
    url: https://www.youtube.com/@yourchannel
    icon: fab fa-youtube
links:
  - name: Bandcamp
    url: https://yourbandcamp.com/
  - name: Spotify
    url: https://open.spotify.com/artist/yourid
  - name: Youtube Music
    url: https://music.youtube.com/channel/yourid
  - name: Soundcloud
    url: https://soundcloud.com/yourprofile
  - name: Apple Music
    url: https://music.apple.com/us/artist/yourname/yourid
---

The Layout Template

Create a new file at layouts/_default/links.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
{{ define "main" }}
<div class="min-h-[calc(100vh-theme(space.64))] w-full bg-gradient flex flex-col items-center px-8 py-4">
    <div class="max-w-2xl w-full flex flex-col items-center relative z-10">
        <!-- Avatar -->
        <div class="w-32 h-32 rounded-full overflow-hidden mt-4 sm:w-40 sm:h-40">
            <img src="{{ .Params.avatar }}" alt="{{ .Title }}" class="w-full h-full object-cover">
        </div>

        <!-- Title -->
        <h1 class="text-xl font-bold text-white mt-3 text-center">
            {{ .Title }}
        </h1>

        <!-- Bio -->
        <p class="text-white/75 text-center mt-1.5 whitespace-pre-line">
            {{ .Params.bio }}
        </p>

        <!-- Social Links -->
        <div class="flex flex-wrap gap-3 mt-4 mb-4">
            {{ range .Params.social }}
            <a href="{{ .url }}" target="_blank" rel="noopener"
               class="w-8 h-8 rounded-full bg-black/80 text-white flex items-center justify-center hover:shadow-lg transition-shadow">
                <i class="{{ .icon }}"></i>
            </a>
            {{ end }}
        </div>

        <!-- Main Links -->
        <div class="flex flex-col gap-3 w-full mt-4 mb-4">
            {{ range .Params.links }}
            <a href="{{ .url }}" target="_blank" rel="noopener"
               class="w-full min-h-12 bg-black/80 text-white rounded flex items-center justify-center px-2 py-2 hover:shadow-lg transition-shadow">
                <span class="text-center">{{ .name }}</span>
            </a>
            {{ end }}
        </div>
    </div>
</div>
{{ end }}

Styling with Tailwind

Add these custom styles to your main.css:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
@layer components {
    .bg-gradient {
        @apply bg-black bg-opacity-50 flex-1;
        background-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.7),
            rgba(0, 0, 0, 0.5)
        ),
        url('/images/background.webp');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

Base Template Modifications

If you want to hide your default site header for a simpler layout, you’ll need to modify your baseof.html template to handle the hideHeader parameter:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!doctype html>
<html lang="{{ .Language.Lang }}" class="scroll-smooth">
  <head>
    {{ partial "head.html" . }}
  </head>
  <body class="bg-black min-h-screen flex flex-col">
    {{ if not .Params.hideHeader }}
      {{ partial "header.html" . }}
    {{ end }}
    <main class="flex-1">
      {{ block "main" . }}{{ end }}
    </main>
    {{ partial "footer.html" . }}
  </body>
</html>

Background Image

Place your background image in static/images/background.webp and it will automatically be used as the page background. Choose an image that:

Has good contrast with white text
Isn’t too busy or distracting
Loads quickly (optimize for web)

You can use AI image generators to create an initial image and then blur and mask it with Photoshop.

Conclusion

With this setup, you have a professional-looking link hub that’s fully customizable and integrated with your Hugo site. You can easily update links by modifying the markdown file, and the layout ensures everything stays properly organized and styled.

Remember to:

Optimize your images
Test on multiple devices
Ensure all links work correctly
Keep your bio concise and engaging

Have you created a link page using this tutorial? Share your results in the comments below!