Creating Amazon Affiliate Shortcodes in Hugo

Until now, I’ve been directly pasting Amazon affiliate links.

However, since I’m now able to earn pocket money from Amazon affiliate links, I decided to create Hugo shortcodes for Amazon Affiliate, Rakuten Affiliate, and honto Affiliate.

I searched for existing Hugo shortcodes for Amazon Affiliate links, but most required implementing APIs and seemed overly complex. Also, those approaches wouldn’t work for Rakuten Affiliate and honto Affiliate, so I gave up on implementing my own API. I wanted to avoid losing potential earnings from Rakuten and honto users!!!

The method I came up with was to use Hugo’s Data Template.

The structure is super simple.

I created a custom layout for affiliate shortcodes and have it reference affiliate links stored in Data Template.

This is simpler than creating an API and can also handle multiple affiliate programs.

Creating the Shortcode Layout

First, I created a shortcode layout.

What is a Shortcode

In my case, I structured the shortcodes directory under layouts like this:

shortcodes
├── affiliates
│   ├── appliances
│   │   ├── B075MY5KCR.html
│   │   └── template.html
│   ├── books
│   │   ├── 4295002356.html
│   │   └── template.html
│   └── medicines
│       ├── 4580101200906.html
│       └── template.html

I created folders by category and prepared a template.html in each folder as a template.

This is what template.html looks like. It uses tailwindcss.

<div class="p-4 border-4 max-w-lg my-7">
  <p class="mb-4">
    {{.Site.Data.affiliates.books.isbnTemplate.Title}}
  </p>
  <div class="grid grid-cols-3">
    <a href="{{.Site.Data.affiliates.books.isbnTemplate.Amazon}}" target="_blank">
      <div class="col-span-1 mr-4">
        <img src="{{.Site.Data.affiliates.books.isbnTemplate.ImagePath}}">
      </div>
    </a>
    <div class="flex flex-col justify-around col-span-2 gap-4">
      <a href="{{.Site.Data.affiliates.books.isbnTemplate.Amazon}}" target="_blank">
        <div class="text-center rounded-full py-1 px-3 bg-yellow-200">
          Amazon
        </div>
      </a>
      <a href="{{.Site.Data.affiliates.books.isbnTemplate.Rakuten}}" target="_blank">
        <div class="text-center rounded-full py-1 px-3 bg-red-400">
          Rakuten
        </div>
      </a>
      <a href="{{.Site.Data.affiliates.books.isbnTemplate.Honto}}" target="_blank">
        <div class="text-center rounded-full py-1 px-3 bg-blue-400">
          Honto
        </div>
      </a>
    </div>
  </div>
</div>

That’s it for the layout part.

Creating Data Templates

When using Data Templates, you place YAML, JSON, TOML, etc. under the data folder.

In my case, I structured the folders similar to the layout:

data
├── affiliates
│   ├── appliances
│   │   ├── asinB075MY5KCR.toml
│   │   └── template.toml
│   ├── books
│   │   ├── isbn4295002356.toml
│   │   └── template.toml
│   └── medicines
│       ├── jancode4580101200906.toml
│       └── template.toml

The {{.Site.Data.affiliates.books.isbnTemplate.Title}} in the layout we created earlier reads values from data/affiliates/books/isbn4295002356. And in asinB075MY5KCR.toml, I’ve added values like this:

Title = "Paperback - Snowball: Warren Buffett Biography"
Amazon = "link"
Rakuten = "link"
Honto = "link"
ImagePath = ""

This way, Hugo assembles the HTML based on these data values at build time.

That completes it.

Now, you can embed the affiliate link in an article with {{< affiliates/books/4295002356 >}} and it will display like this:

文庫・スノーボールウォーレン・バフェット伝

Amazon

楽天

The downside to this method is that you need to create data and layout files each time you add a new product, which can be a bit tedious.

So, I created template samples and organized them in a Makefile. Since I don’t introduce products in my blog every day, this is fine for now.

ISBN:= 12345

############### affiliates ###############################################################

.PHONY: create-book
create-book:
	@cp data/affiliates/books/template.toml data/affiliates/books/isbn${ISBN}.toml
	@cp layouts/shortcodes/affiliates/books/template.html layouts/shortcodes/affiliates/books/${ISBN}.html