How to create your own custom URL shortener in 10 minutes for free & deploy to GitHub ๐
sorry for the long post title - that's tldr;
๐ mnml URL - Modern URL shortener with support for custom alias
(short form for minimal URL ๐คฆโโ๏ธ)
Feel free to contribute on GitHub
While the rest of us were copy-and-pasting mumbo-jumbo from URL shorteners into our Twitter accounts, sites like The New York Times were smugly tweeting their links using shortened URLs like "nyti.ms." Frankly, this made me a little jealous ๐โโ๏ธ
That's why I created my own freaking url shortener with pure JavaScript + HTML + CSS โค
Did I mention this is all free of charge and 100% open source? Yes.
mnml URL makes it easy for the average Joe developer to create a custom URL shortener for free and deploy it to GitHub ๐ You don't even need to own a site that gets about 17 million unique visitors per month ๐
Let's get started.
step 0: Goto jsonstore.io Click the purple COPY button to copy your endpoint.
step 1: Fork/clone mnml url repo on GitHub and optionally โญ star the project - show some โค love!
step 2: IMPORTANT: Find var endpoint
on src/head.js
file and replace it with your own endpoint which you copied from step 0
.
var endpoint = "https://www.jsonstore.io/6b6xxxxxxxxxxxxxxxxxxxxxxxa98";
replace it with your endpoint ๐
step 3: Goto your repo settings > GitHub pages. Select master branch
as source for deployment.
That's it! Site will be hosted on your_github_username.github.io/mnmlurl/src
EDIT 0: Minimal URL can be hosted on any website hosting services like GitHub/GitLab pages, Firebase/Heroku hosting, yoursite.com, etc. For hosting in such custom domains, Its advised to npm build
and upload output
folder. Hosting on GitHub pages was just for proof of concept.
EDIT 1: If you want to take development further, consider contributing on GitHub.
EDIT 2: IMPORTANT: Minimal URL is an experimental project. Don't shorten sensitive contents/URLs with it. jsonstore.io endpoints are always public making shortened URLs visible for everyone.
Here's some screenshots of mnmlurl
Bonus: I also created a Cross browser extension โจ for mnmlurl.
Demo ๐
Feel free to contribute on GitHub
If you want a heads up on my next projects, or just want to chat about the web, make sure to follow me @liyasthomas ๐.
This post's banner is made with Banner generator โจ