When using services like GitHub pages, you won’t have access to tools that allow you to redirect using HTTP status codes. This means you need to improvise. A good solution for this is a client side redirect done in JavaScript. Combined with some additional GET parameters, you can redirect to a choice of pages.
I’ve used this method in the past when writing guides on GitHub gists. The URLs are extremely long and impossible to remember. So I added a page to my GitHub pages site which I could remember by heart when I needed it. I strongly recommend you do this on a dedicated page, not to cause bad user experience and have better security.
It goes without saying this is a JavaScript redirect. And not all browsers will have JavaScript enabled, so make your page more than a blank page with two links. Or at least give those two links descriptive anchor text. It won’t work for bots either since bots won’t run the JavaScript. After all, this is a hack.
Here are some examples :
https://comhad.github.io/webhook.html?page=serverless will redirect to https://gist.github.com/comhad/bd42b56a0399dbfa645aa83fe3cf4c8a
And https://comhad.github.io/webhook.html?page=dedicated will redirect to https://gist.github.com/comhad/fb08abc2edc29af80ceb1bf3f433bb08.
The code
Getting straight to the point for those who want it, the code is here. Some code taken from this stackoverflow post.
But before you add this to your site, you need to add a ID attribute to the links you want to be redirected to.
<a href="https://obscure.blog/advanced-cloud-rickrolling/" id="rickroll">Rickroll blog post</a>I still recommend putting some kind of descriptive anchor text in there. Since this will only show up as a regular link to google, it will still count to SEO. If it bothers you, you can always ‘nofollow’ the link.
Once you’ve done this, navigate to your page URL with ?page=link-id you want to redirect people to. You should see a small flash of the page and then be redirected to the relative page.
You can add more links with a different ID attribute and redirect to those in the same document.
How does it work?
When the page loads, the JavaScript loads all the GET parameters into an array. It holds these in memory while the browser renders the rest of the page.
It’s crucial that the JavaScript waits for the page to render because it won’t be able to find the links otherwise. Though this is usually split seconds.
Once the page has rendered, JavaScript looks for the ID that matches the contents of the page GET variable. If it finds one, it simulates a user clicking on it to take them to that page.
However, if it doesn’t find a link, it just logs a console message. This is another reason why it’s important to have a page that isn’t a blank.
There’s also a security issue that this can cause any link to be clicked by the user, which is why I recommend doing it on its own page. That way that page can be free from user input that might cause problems. (That being said, if you web service is capable of using user input, there’s probably a better redirect method than this.)
If you want to see the original page for this method, it’s on GitHub in my GitHub pages repo.
Well that’s how you perform a redirect in JavaScript. What kind of pages do you plan to redirect to?
An easy way to use JavaScript to redirect to a relative URL based on a GET parameter Click To Tweet