Any ideas on how I could convert 3 custom Jekyll plugins to Hugo?

support
1

Hi,

I’m starting to feel a little pain with Jekyll on a site with 300+ posts and I’m thinking about moving to Hugo.

A move like this would be a big undertaking (rewriting a ton of templates, etc.) and I think most of the features of the site will be doable, but these 3 custom plugins concern me because I don’t know how to implement them in Hugo.

I’d really appreciate some guidance on how to do what’s explained below if it’s possible.

The Jekyll site is open source so I’m going to be linking to fully working code examples, so hopefully that’ll give a better idea of what I’m trying to do without having to come up with contrived examples.

I had to include the rest of the post in a gist because the moderators of this forum don’t let new users post more than 2 links: post.md · GitHub

2

The last 2 should be straight forward:

  1. A link render hook Configure Markup | Hugo
  2. Taxonomies

The first is not obvious. You could probably do this via regexp search replace. One other option may be to use Markdown attributes (but remember to configure it to enable it for blocks) for this.

3

Thanks.

How does Hugo know it’s an external link btw? I see no reference to that in the docs in relation to the hooks.

Here’s a few use cases and expectations. Let’s say I own example.com:

  • /hello would be seen as an internal link and not be marked with the rel attr
  • <https://example.com/hello> would be seen as an internal link and not be marked with the rel attr
  • <https://gohugo.io> would be seen as an external link and be marked with the rel attr
  • <a href="gohugo.io" rel="nofollow">gohugo.io</a> would be seen as an external link but wouldn’t get the custom rel attr because this link is already marked with a custom attr, but it would still get the target="_blank" attached to it
4

See Configure Markup | Hugo

5

On the link that @divinerites posted there is the sample template for layouts/_default/_markup/render-link.html
which contains the following snippet that does exactly what you ask:

{{ if strings.HasPrefix .Destination "http" }} target="_blank" rel="noopener"{{ end }}

6

Hugo does not, you need to do something ala: https://github.com/bep/portable-hugo-links/blob/faf83040f898c4b6d38fe11205eb3abec353aa76/layouts/_default/_markup/render-link.html#L2

7

Wouldn’t that fail in the case where I have an absolute link to my own domain? That would be the test in the 2nd bullet point in my previous reply, since it begins with http too.

Oh. I do see there’s a baseURL config option. Maybe I could add additional logic to check if it doesn’t begin with that as a second condition.

8

I don’t know your setup, but if you have absolute local URLs in your markdown, you need to expand that logic. You can do something ala

{{ $link := .Destination | relURL }}
{{ $isRemote := strings.HasPrefix $link "http" }}

relURL will make any absolute local URLs relative.

2 Likes
9

@nickjanetakis Excuse me for the off topic. Have you read this article?

It was useful to me when I was starting up. :+1:

10

Funny enough I have that in my “moving to Hugo” notes. I planned to tackle the migration once I know for sure the components of my current Jekyll site can be ported to Hugo.

Right now it seems like one missing bit of functionality would be the first plugin listed in the gist in my OP where it parses out YouTube style timestamps from a markdown list under a specific header, and converts them to data attributes that contain the total number of seconds.

The custom Jekyll plugin converted this:

- 5:00 -- Hey this is a timestamp note

to:

<li><a href="#" data-audio-seek="300" class="audio-seek">5:00</a> -- Hey this is a timestamp note</li>

The gist has the full details of how it’s implemented in Jekyll. It required using Nokogiri to parse the DOM and modify each link it found that matches the criteria.

11

You could create your own shortcode and use something like sed once on your sources to replace all your timestamp list items with something like

{{< timestamp_link at="5:00" label="Hey this is a timestamp note" >}}

Not as convenient to write, maybe, but hopefully more efficient (no searching through the source and parsing of the line).

12

Thanks, what would the shortcode look like to do such processing?

Also, often times the label portion ends up having markdown in them too (for links and formatting). That would be a big quality of life hit if I had to embed HTML or Markdown into a string variable like that.

Fortunately while the Jekyll site does take a while to build it’s not too bad when writing. It takes about 1 human second to see the changes in a live reload due to incremental updates, but I’d still like to switch to Hugo just for faster site builds, also my personal site with 300+ posts is starting to get sluggish even with incremental updates.