Link Posts in Hugo

Most popular blogging platforms or themes made for them support some kind of link post format as an alternative to a regular, “this is my own original content” post. The idea is that you can link to something somewhere else on the web, and add your comments in your own post. Typically the link post title links to another site, and there is a permalink URL to your own post.

I don’t plan to write a lot of link posts, that’s not the point of my site, but I knew it would be nice to do so whenever I like without having to step outside my blog post shortcuts and blog post template archetypes and manually edit things. To support this, I added the ability in all my section and home list and single article pages to check for a front matter variable called “linkurl”.

Here’s what it looks like in my list page:

<header>
<div class="post-title">
	<a href="{{ .Params.linkurl | default .RelPermalink }}"><h1 class="title">{{- if .Params.linkurl -}}<i class="fas fa-link fa-sm"></i>&ensp;{{- end -}}{{ .Title }}{{- if .Params.linkurl -}}&emsp;<i class="fas fa-external-link-alt fa-xs"></i>{{- end -}}</h1></a>
</div>
<div class="post-meta">
	<div class="date">
		<span class="posted-on">
			<i class="fas fa-calendar"></i>
			<time datetime='{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}'>
				{{- if .Params.linkurl -}}<a href="{{ .RelPermalink }}">{{- end -}}{{ .Date.Format (.Site.Params.dateFormat | default "January 2, 2006" ) }}{{- if .Params.linkurl -}}</a>{{- end -}}
			</time>
		</span>
	</div>
</div>
</header>
		<div>
		{{ .Content | truncate .Site.Params.truncateLength }}
		{{ if gt (len .Content) .Site.Params.truncateLength }}
<i>(<a href="{{ .RelPermalink }}">Read More</a>)</i>
		{{ if .Params.linkurl }}<br />{{ end }}
		{{ end }}
		{{- if .Params.linkurl -}}<br /><a href="{{ .RelPermalink }}"><i class="fas fa-level-down-alt fa-xs"></i>&ensp;Permalink</a>{{- end -}}
		</div>
</article>
{{ end }}
</section>

If linkurl exists and has a URL, then the post is rendered as a link post. This is done by taking the URL in the linkurl variable and creating a link to it from the title, as well as adding a permalink to my link post.

Side note: you may be wondering why I’m handling post preview truncation myself with .Site.Params.truncateLength and checking to see if the post meets that length. The answer is that the built-in Hugo .Summary function wasn’t showing line breaks and paragraphs for me, and I also didn’t realize at the time that I could specify how many words it should show in the summary. I may have to revisit it and see if I can get it to show paragraphs as usual up to the desired word count.

Back to the link posts: what I came up with is a format that links the post title to the destination article my post refers to, with both a Font Awesome link icon and Font Awesome external link icon on each side of the title, respectively. Then I have the post date link to my post’s single page itself, as does a “permalink” link that I only show under my post summary if it is indeed a link post.

My link post code in action

In short: the link post title takes the reader to the target web page. The date and the permalink link takes them to my link post.

Hugo makes a lot of things very simple, whether through native functions or just by allowing easy customization of templates by providing so much information back to the developer through front matter and other Hugo variables.