Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Convert Amazon Links In A Hugo Site To Affiliate Links With Gulp

TwitterFacebookRedditLinkedInHacker News

As you may already know, The Polyglot Developer is a statically generated website built with Hugo. That means that there are no databases involved, no server side languages, only HTML, CSS, and JavaScript.

In the past I shared the automated Gulp workflow that I use when building my blog to maintain performance and a solid standing with search engine optimization (SEO).

I received a request from a subscriber recently around affiliate link generation on a Hugo website and I figured it would be an interesting topic to tackle. Typically a WordPress plugin or similar would handle the job, but since we’re working with a static website, we have to be inventive with our build scripts.

In this tutorial we’re going to see how to build a Gulp task that will replace all Amazon links with Amazon Associates links, which is another name for their affiliate program.

Going forward, I need to make it clear that I have not extensively tested what we’re about to see. I’ve tried it and I’ve validated the links in the Amazon portal and everything seems to check out. That doesn’t mean that there won’t be problems of some sort. If you catch anything, let me know in the comments.

Hugo is a beast in its own, so for the first step, to keep things simple, we’re going to build a separate project for handling HTML and link parsing. Assuming you have Node.js installed, create a new directory and within it, execute the following:

npm init -y
mkdir src
touch src/index.html
touch gulpfile.js

The above commands will initialize the Node.js project, create a sample HTML file within a source code directory, and create a file for holding our Gulp workflow.

There are a few dependencies that we’ll need to be successful. From the command line, execute the following:

npm install gulp --save-dev
npm install gulp-cheerio --save-dev

Instead of relying on Gulp to be installed globally, we’re going to install it as a development dependency. We’re going to be using Cheerio for our HTML processing and lucky for us, there exists a Gulp package for it.

With our dependencies in place, go ahead and add the following sample HTML code to the project’s src/index.html file:

<html>
    <head></head>
    <body>
        <p>
            This is a test <a href="https://www.amazon.com/gp/product/B078Y4FR14?test=something">Amazon</a> link.
        </p>
        <p>
            This is a <a href="https://www.thepolyglotdeveloper.com">link</a> that should not be changed.
        </p>
    </body>
</html>

Notice that the Amazon link has no reference to the affiliate and it also includes some query parameters. We have a second link in there as a safety measure to make sure we don’t wipe out all links.

The next step is to look at our gulpfile.js file. Open it and include the following:

const Gulp = require("gulp");
const URL = require("url");
const Cheerio = require("gulp-cheerio");

var tag = "nraboy-20";

Gulp.task("affiliate-links", () => {
    return Gulp.src(["src/**/*.html"])
    .pipe(Cheerio(function($, file) {
        var url;
        $("a").each(function() {
            var a = $(this);
            url = URL.parse(a.attr("href"));
            if(a.attr("href").startsWith("https://www.amazon.com/gp/product/")) {
                a.attr("href", url.protocol + "//" + url.hostname + url.pathname + "?tag=" + tag);
            }
        });
    }))
    .pipe(Gulp.dest('dist/'));
});

Gulp.task("build", Gulp.series("affiliate-links"));

It may seem like there is a lot to take in when it comes to the above code, but there really isn’t. First we’re importing our dependencies that we had previously downloaded. Next we’re defining our affiliate id, the one that Amazon gave us when we set up our account.

Our single task will be responsible for changing relevant links.

In our task, we load any and all HTML files that might exist in our src directory and the nested directories beneath it. For our sample project, we only have a single HTML file. The next step is to pipe the files into Cheerio and find all the <a> tags within the file. Depending on your website and the amount of links you have, this could be quite a few. While looping through the <a> tags, we check to see if it is an Amazon product link. If it is an Amazon product link, we reformat it to include our affiliate tag and strip out everything else.

The new files will be placed in a dist directory.

Try to run either the build task or the affiliate-links task with Gulp and you should have a new HTML file, not a replacement, that contains the new Amazon affiliate links.

Experiencing this link formatting in a fresh project is nice, but we came here for Hugo, correct? The process really isn’t any different than what we just saw.

Within your Hugo project, create a gulpfile.js file with the following:

const Gulp = require("gulp");
const URL = require("url");
const Cheerio = require("gulp-cheerio");

const config = require("./config.json");

Gulp.task("affiliate-links", () => {
    return Gulp.src(["src/**/*.html"])
    .pipe(Cheerio(function($, file) {
        var url;
        $("a").each(function() {
            var a = $(this);
            url = URL.parse(a.attr("href"));
            if(a.attr("href").startsWith("https://www.amazon.com/gp/product/")) {
                a.attr("href", url.protocol + "//" + url.hostname + url.pathname + "?tag=" + config.params.amazon_associates);
            }
        });
    }))
    .pipe(Gulp.dest('./public/'));
});

Gulp.task("build", Gulp.series("affiliate-links"));

Notice that we’ve replaced the constant tag variable with config.params.amazon_associates? This is where something specific comes into play. My Hugo configuration file is in JSON format, not TOML or YAML. This means that I’ve set a new value in the params object within that file. I don’t know the effort level of retrieving it with JavaScript. Also, depending on your configuration, you’re either using a public directory or a dist directory. Make sure to alter the command as appropriate. Just make sure you don’t set the destination directory as your source. The goal is to not mess up any of your source files.

Once your gulpfile.js file is ready to go, make sure you download the gulp and gulp-cheerio dependencies as mentioned in the previous step. I also add my Gulp information to my package.json file like so:

"scripts": {
    "affiliate": "./node_modules/gulp/bin/gulp.js affiliate-links",
    "build": "./node_modules/gulp/bin/gulp.js build",
},

With our workflow script ready to go, we can start a pipeline like the following in the Terminal:

hugo
npm run affiliate

The above commands will first build the Hugo site, then replace all the Amazon links with our affiliate information for Amazon Associates.

Conclusion

You just saw how to leverage Gulp to create a build workflow for Hugo that includes replacing all standard Amazon product links with Amazon Associates links for affiliate referrals. If you haven’t seen my previous article on the topic of Gulp SEO optimizations, I strongly encourage you to. Hugo is great at building fast sites, but that doesn’t mean we can’t make them faster with a post-processing workflow.

If you think I made an error somewhere or you think that this affiliate link conversion can be done better, let me know in the comments.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Support This Site