Creating a VIP zone in Hugo

As I’m starting my business I’m hitting all these new and interesting problems. One of the problems I faced was figuring out a way to give users limited access without simply handing them a basic URL. Initially I thought a simple URL would be best, easy to access but I forgot the user experience. If you pay for something it needs to feel special, you get access to something exclusive. So, let me walk you through the solution I came up with!

The Quest for an Access Solution

I’m a fan of static Hugo sites, and I really wanted to keep using Hugo for this project. That meant I had to find a solution that would work within my existing setup. I explored a couple of options, including using Netlify’s authentication scheme, but with 100 dollar per month the cost was just too high for my small-scale project. I needed something more elegant.

Enter the Rewrites

After some research and brainstorming, I stumbled upon the concept of netlify _redirects. With this, I could create a unique page for each user while still providing them with the latest version of the content. This was the perfect way to give them a sense of exclusivity without increasing the complexity of the site. By much.

Here’s how it works: You create a file called _redirects and specify the URL with License key and point it towards a single hidden URL. It would look like this.

/license/LONG-LICENSE-KEY-1 /lsfp_SECRET 200
/license/LONG-LICENSE-KEY-2 /lsfp_SECRET 200
/license/LONG-LICENSE-KEY-3 /lsfp_SECRET 200

Thanks to the 200 the URL doesn’t get rewritten and as a bonus, I can revoke a license by removing them and even in my analytics see if a license is suddenly getting a lot of use.

Great, now I could do this by hand, but I don’t want people that make an order sit there and wait till I’m awake and got time to add them to the site. So how to automate this?

The Automation Conundrum

So time to start automating the whole process. there where a couple of problems I would need to solve.

Get the license key from Lemon Squeezy on purchase
Find a way to update the code repository of my static site
Generate the _redirects
Update the static site
Email my new Awesome Squad member
Make.com not supporting Lemon Squeezy nor file updates in Github

Easy

Getting the License key

Luckily Lemon Squeezy does have support for webhooks, so all I needed to do was use the Webhooks module from Make.com and make sure that when a new license key is created it get’s called by Lemon Squeezy.

Go to make.com
Add Webhook module
Copy the URL
Add in Lemonsqueezy as webhook for license_key_created event
Test mode purchase to get the data

So that’s step 1 done, luckily in test mode I can buy items as much as I want. If only my production side had this many sales.

Getting the key in Hugo

While I could probably use the api to update the _redirects file, that would require me to read content, update the lines and send it out. It would be complex and error prone. So I made a different approach.

I make a files in /licenses and name it KEY, that way all I need to do is add an empty file to the repository, and let Hugo handle the generation. And adding/removing keys is as simple as making or removing a file and letting the build run.

Quick look through the Github api documentation and I got this CURL call. Note that contents here is part of the Github API and NOT the contents directory in Hugo. This makes empty files in /licenses

1curl -L \
2  -X PUT \
3  -H "Accept: application/vnd.github+json" \
4  -H "Authorization: Bearer Token"\
5  -H "X-GitHub-Api-Version: 2022-11-28" \
6  https://api.github.com/repos/bgrolleman/statictoolsontech/contents/licenses/$1.md \
7  -d '{"message":"Add License","committer":{"name":"Bas Grolleman","email":"[email protected]"},"content":""}'

And turn it into a HTTP call in Make.com, make sure you use a nice limited token for this.

Once the license file was in place, Netlify’s automatic build and deployment process kicked in. The site was rebuilt and redeployed, but Hugo is not going to do anything with these files. So that’s another problem to solve.

Getting Hugo to generate the _redirect

I’m no Hugo master, so the first step was to google it and I found this article that was a great help.

Generating Netlify _redirects from Hugo

I then modified the code so it would use a file path, initially I tried putting the files in the content folder so I could use a .pages setup but in the end just reading a directory was much cleaner and didn’t get the license files in the export.

Added this to my index.redir

{{ range os.ReadDir "licenses/lsfp"}}
/license/{{ .Name }} /lsfp_SECRETURL 200
{{ end }}

Simple enough, read the licenses/lsfp directory and create lines that point to the pwgenerated secret page without showing it in the URL

Debugging and Security

Of course, things didn’t go perfectly right away. I used the wrong rewrites, forgot the 200 code, made files in the contents folder and spend way to many times going through the sales process just to generate a test in Make.com but that’s part of the process.

And while it runs fine now, I’m always wondering if it’s secure enough. Maybe not but the site has no moving parts and no personal data from my Awesome Squad so it’s mostly hacking your way into access to my Logseq for Professionals course. If you manage that, let me know so I can patch it and provide you with a free license.

Closing words

This was fun to build, though it’s too bad these functions wheren’t part of Make.com then again it’s a good moment to learn and experiment with the universal tools like HTTP and Webhook. It should run fine now and I did a few other tricks like waiting a bit before emailing to make sure the Netlify build would be finished or at least well on it’s way before posting the link.

And if you want to see it in action, then join my Awesome Squad and get the Logseq for Professionals package