How to Create Your Custom Link in Bio Landing Page in Hugo Under 10 Mins

Link in Bio landing pages became very popular since Instagram limited only single URL per profile info. Luckily, Hugo makes creating those social landing pages a walk in the park. It’s so simple, that in just under 10 minutes, you’ll have your own custom Link in Bio page up and running.

Shortcode in Hugo

For building custom UI templates (in our case it’s a custom Link in Bio), Hugo provides shortcodes .

A shortcode is a simple snippet inside a content file that Hugo will render using a predefined template.

Hugo already comes with neat built-in shortcodes that you can use to embed videos, images, tweets, etc.

Shortcode structure and parameters

In a nutshell, shortcode is a HTML file with a custom layout. So it’s structured the same way as any html file. Shortcodes can be updated anytime to reflect new classes, techniques, or standards. At the point of site generation, Hugo shortcodes will easily merge the changes together.

In Shortcode, there are three types of parameters that can be utilized:

1. Named parameters, which are parameters with custom names given by you. While using shortcode, the amount of parameters you create can add up. So it’s always best to name them to avoid confusion down the road.
2. Positional parameter, which is a parameter based on the position.
3. Flexible parameter, which is used whenever you’d like to set a default value to a parameter that can be later overridden by others.

How to access a parameter in shortcode

In a shortcode file(html file), all of its parameters can be accessed via the .Get method. To access a named parameter, call:

1{{ .Get "name" }}

To access a second positional parameter, call:

1{{ .Get 1 }}

For the first positional parameter - 0 should be passed, and so on.

Custom shortcode in Hugo

To create own custom shortcode follow the steps:

Step 1:

Create a shortcodes folder inside the layouts folder: layouts/shortcodes

Step 2:

Inside the shortcodes folder, create a HTML file with the desired UI elements; The name of the HTML file will be the name of the custom shortcode(without the .html extension) .

Custom html:

 1{{- $msg := .Get 0 -}}
 2
 3<div class="social-link" >
 4  <img style="max-width: 100%" src="/images/social_background.jpg">
 5  <div class="button-container" >
 6
 7    <a class="social-button main-color">✨ {{ $msg }} ✨</a>
 8
 9    <a class="social-button dark-accent">💯 Text 2 💯</a>
10
11    <a class="social-button dark-shade">🎉 Text 3 🎉</a>
12
13    <div class="social-media-container" >
14      <a class="social-button light-shade">📹 Text 4 📹</a>
15      <a class="social-button light-shade">📸 Text 5 📸</a>
16    </div>
17  </div>
18
19</div>

Note: $msg is a variable and the value of it is a shortcode parameter at position 0.

Step 3:

Provide custom css properties in assets/css or assets/scss to the html elements.

Step 4:

Create a content file(.md). If you’d like to place the social landing page right after your domain name (veryCoolWebsite.com/social), then the content file should be placed in the contents folder.

Step 5:

Use a newly created shortcode in your content file( .md)

1{{< nameOfTheShortCodeFromFolder parameters >}}

Shortcode parameters are space delimited, and parameters with internal spaces can be quoted.

Example:

1{{< social_link "Read my latest blog post" >}}

Step 6:

Save the changes and check the results on your localhost. You might need to tweak css here and there, however at this point, you’ve completed creating your custom Bio Link page 👏👏👏!

Embed Bio Link from Canva

If creating an html file, positioning the elements, and applying css values is not your cup of tea; you can always opt-in to design solutions out there. For example, Canva has a list of great templates for Bio Link. And you can publish any of the templates as a website.

Now here is a neat little trick on Canva: after publishing, you can copy the embed code and place it in your custom shortcode file(step 2). To do so, follow the steps:

1. Click on the “Create Design” button on the top right corner of Canva ’s homepage, and search for “Bio Link”.
2. Choose a template and edit as you desire.
3. Click on “Publish as Website” on the top right corner (the website should be published at this point).
4. Click on Three Dots on the top right corner.
5. Search for “embed” and select it.
6. Copy “HTML embed code”.
7. Place the copied snippet into the custom shortcode html file.

With this solution you don’t need to worry about colors, text, etc. Plus you don’t need to deploy anything, you can just edit your canva file.

Just like Canva, there are millions of other solutions out there that can be used for your unique design.

Hugo shortcode template result

If you’d like to see the final result of my custom Link in Bio, check out my social page .

Gotchas

Although the actual building and deploying took less than 10 minutes, there were obviously some gotchas that made me go through rabbit hole of issues on the web:

1. Shortcodes will not work in template files . They work in content files (inside the content folder)
2. background-image that I set on my parent container div unfortunately wasn’t picked up by mobile browsers(Google chrome or mobile Safari) on either iOS or Android. Found online, some people using hugo reported the issue that is basically linked all the way to browsers' issue . Apparently this has been a known issue in the web community since the bug was opened more than 10 years ago. I tried to override background-attachment, set background-position, modify background-size , but nothing worked. The image still refused to appear on mobile devices.

Instead of setting background-image on container, I decided to add img child to my container:

1<div class="container">
2
3<img src="/images/social_background.jpg">
4
5.... buttons....
6
7</div>

In css set the height of the container to be 100%:

1.container {
2  position: relative;
3  height: 100%;
4  width: 100%;
5}

And it worked 🎉!

Lesson learned: In Hugo (I assume everywhere in web as well) if you want to apply custom background image to your container, DON’T go for the obvious solution to set background-image property - create a separate img element inside the container.

Conclusion

Shortcodes are code snippets that can be instrumental in creating eye-catching and interactive UI elements for your content. And by following the above steps, you’ll be able to have your Link in Bio up and running in no time.