Hugo Module - Pretty Link

When linking to internal or external resources in Hugo, only plain links were possible. Links are just simple text without any meaningful information, and this always bothered me. After searching and searching again, I couldn’t find the feature I wanted. (Could it be hidden somewhere?)

So, I decided to create it.

Examples #

Let’s take a look at some examples.

Internal Links

Articles on the CraftGears blog are written in a directory structure like this:

{{< pretty-link href="/posts/2024/12-17__Hugo_Theme_Part1/" >}}

Creating a Hugo Theme - Part 1: With TailwindCSS v4

Building a blog has been on my mind for a long time, and I finally decided to take the plunge. I had always wanted to create a blog with Hugo, and I spent hours browsing through the list of themes, trying to choose the perfect one. After much deliberation, I thought, “Why not create my own?” This would make for a great blog post topic as well. Let’s get started.

/posts/creating-a-hugo-theme-part-1-with-tailwindcss-v4/

External Links

Here are examples of various external links.

Hugo Blog

It looks like an internal link, but it’s an external link accessed via https.

{{< pretty-link href="https://craftgears.com/posts/creating-a-hugo-theme-part-5-header-and-footer/" >}}

Creating a Hugo Theme - Part 5: Header and Footer

Improving the header and footer.

https://craftgears.com/posts/creating-a-hugo-theme-part-5-header-and-footer/

TailwindCSS

{{< pretty-link href="https://tailwindcss.com/docs/v4-beta#css-first-configuration" >}}

Tailwind CSS v4.0 Beta - Tailwind CSS

Preview what's coming in the next version of Tailwind CSS.

https://tailwindcss.com/docs/v4-beta#css-first-configuration

Medium

{{< pretty-link href="https://medium.com/@magstherdev/hugo-in-10-minutes-2dc4ac70ee11" >}}

Hugo in 10 minutes

Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again. Hugo is a static site generator. Unlike systems…

https://medium.com/@magstherdev/hugo-in-10-minutes-2dc4ac70ee11

Gatsby

{{< pretty-link href="https://www.gatsbyjs.com/blog/launch-week-the-latest-updates-to-gatsby-cloud-and-the-gatsby-framework" >}}

Gatsby Github

Principal Product Manager Patrick Sullivan outlines all the exciting new features being introduced for Gatsby Cloud and the Gatsby Framework this week.

https://www.gatsbyjs.com/blog/launch-week-the-latest-updates-to-gatsby-cloud-and-the-gatsby-framework

Github

{{< pretty-link href="https://github.com/gohugoio/hugo" >}}

GitHub - gohugoio/hugo: The world’s fastest framework for building websites.

The world’s fastest framework for building websites. - gohugoio/hugo

https://github.com/gohugoio/hugo

Stackoverflow

{{< pretty-link href="https://stackoverflow.com/questions/71452466/how-to-make-a-paragraph-in-hugo" >}}

html - How to make a paragraph in Hugo? - Stack Overflow

I've built a website with Hugo. In the config.toml, there are a few lines as below: [params] name = "My name" description = "Blog Description" bio = "Data Analy...

https://stackoverflow.com/questions/71452466/how-to-make-a-paragraph-in-hugo

Youtube

{{< pretty-link href="https://www.youtube.com/watch?v=ekr2nIex040" >}}

ROSÉ & Bruno Mars - APT. (Official Music Video) - YouTube

ROSÉ & Bruno Mars - APT.Download/stream: https://rosesarerosie.lnk.to/APTIDOrder APT. single CD: https://rosesarerosie.lnk.to/APT-CDID'rosie' - the first st...

https://www.youtube.com/watch?v=ekr2nIex040

Google Docs

{{< pretty-link href="https://docs.google.com/document/d/15-8b3s50bNu-OIcbkhOnT6Icyr-pC2NWBthQAwEEZOg/edit?pli=1&tab=t.0#heading=h.uwtpzkmp9874" >}}

Cycling Blog: Tour de Self Edition 3 - Google Docs

Tour de Self Edition 3 October 27, 2024 and October 28, 2024 My First 200 km Bikepacking: Bangalore- Yercaud- Salem by Chandra Prakash Agarwal with inputs from Saurabh Mittal During one of our weekend off-roading rides (we do many such trips in Sarjapur, Bannerghatta and South Bangalore), our ...

https://docs.google.com/document/d/15-8b3s50bNu-OIcbkhOnT6Icyr-pC2NWBthQAwEEZOg/edit?pli=1&tab=t.0#heading=h.uwtpzkmp9874

AWS Documents

In cases where there is no thumbnail, only the content will be displayed.

{{< pretty-link href="https://docs.aws.amazon.com/eks/latest/userguide/what-is-eks.html" >}}

What is Amazon EKS? - Amazon EKS

Learn to manage containerized applications with Amazon EKS

https://docs.aws.amazon.com/eks/latest/userguide/what-is-eks.html

How to use #

Detailed instructions can be found at the link below.

hugo-modules/pretty-link at main · craftgears/hugo-modules · GitHub

Sharing Additional Modules Developed for the Craft Theme - hugo-modules/pretty-link at main · craftgears/hugo-modules

https://github.com/craftgears/hugo-modules/tree/main/pretty-link

Add the following code to your module list in the config/_default/module.toml file.

[[imports]]
path = "github.com/craftgears/hugo-modules/pretty-link"

Pretty Link Implementation

Add the following code to your assets/scss/main.scss file.

@import 'pretty-link';

The href argument is the sole parameter for this shortcode. Here’s how to use it:

{{< pretty-link href="/blog/post-1" >}}

{{< pretty-link href="https://github.com/gohugoio/hugo" >}}

• href
  • internal: Use a directory structure like /posts/<path>
  • external: Use a full URL like https://example.org

Conclusion #

While working on this, I noticed many sites do not adhere to standards. As a result, some sites do not display properly. I will do my best to provide support upon request. Please think of pretty-link.scss as fully customizable since the appearance can vary greatly depending on the theme. Honestly, I am not a CSS expert, so that file is a bit messy. I simply converted it from TailwindCSS.

This module will likely require continuous updates. I’ll make sure to update this post accordingly.