Don’t you fed-up with the long URLs and sometimes you need to use dynamic URLs in apps. Keeping in mind that we don’t want to use many resources but we need these dynamic and short URLs for sharing and storing. For example, you are making an app and you are providing your website link in it. After some time you changed your website URL and paying for the redirection. Paying?! What!! Noo.
In this article, I’ll show you the easiest way to make a static site redirector and static means no back-end, only front-end. And only front-end means that we are working on javascript.
Requirements
- Github account
- Basic knowledge of HTML and javascript
Step 1
Create a repository with any name. In this example, I'll be using redirector as my repo name. Create index.html, redirector.js and copy this code in it.
Visit this for latest code.
Replace my github username ghostdart with your in redirector.js. Then the links in the file will be something like this
https://<yourusername>.github.io/redirector/
Step 2
Now create a data.json file in the same repo. And put some data in it like this
{
"google": "https://www.google.com/",
"github":"https://github.com/ghostdart",
"mail":"mailto:hunzlahmalik@outlook.com",
"sdalms":"https://github.com/ghostdart/SDA_LMS",
"elizajs": "https://ghostdart.github.io/ElizaJS/eliza.html",
"eren" : "https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdna.artstation.com%2Fp%2Fassets%2Fimages%2Fimages%2F032%2F962%2F206%2Flarge%2Fwill-gwasera-renderwithtag.jpg%3F1607995055&imgrefurl=https%3A%2F%2Fwww.artstation.com%2Fartwork%2Fd83a1A&tbnid=taF0iaitFb59OM&vet=1&docid=9111Etf_WKMMEM&w=1920&h=1080&source=sh%2Fx%2Fim"
}
On left, you can put the small link/name and on right there should be the original link. The javascript will load this file and search for key and value. If found it will be redirected to the original link.
Step 4
Now the last step is to make your site public. Fortunately, the GitHub pages will do that for you in one click. Just go to your repository setting and turn on Github pages.
You'll get a notification of your site is public. You can share the short link with others like this.
https://ghostdart.github.io/redirector?github
OR
https://ghostdart.github.io/redirector?<your key in data.json>
Now everything is done. And in future, if you want to add more links just edit the data.json file and it'll be online 😃
👋 That's All Folks!
If you have any questions feel free to ask me in the comments and I will do my best to answer them. Feel free to read some of my other blogs @ghostdart. Till then, thanks for reading, and happy coding! 😊
Top comments (0)