How to create your own custom URL shortener in 10 minutes for free & deploy to GitHub πŸš€

Liyas Thomas - Jul 11 '19 - - Dev Community

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!

GitHub logo liyasthomas / mnmlurl

πŸ”— Minimal URL - Modern URL shortener with support for custom alias & can be hosted even in GitHub pages [DEPRECATED]

When I wrote this, only God and I understood what I was doing. Now, only God knows
Liyas Thomas

Liyas Thomas

Built with ❀︎ by liyasthomas and contributors

Build Status GitHub release repo size license contributions welcome Website Donate

mnmlurl mnmlurl

πŸ”— Minimal URL is a modern URL shortener with support for custom alias by Liyas Thomas

Follow this tutorial to create your own URL shortener with support for custom alias & can be hosted even in GitHub pages: How to create your own custom URL shortener in 10 minutes for free & deploy to GitHub πŸš€


mnmlurl mnmlurl

Features ✨

😍 URL shortning made simple: mnmlurl uses jsonstore.io to store data on an endpoint JSON file using HTTPS requests. It works on any url.

❀️ No server side logging: Your privacy is important for us. We never log, collect or prompt to sell your data to anyone.

πŸ”₯ Custom and random alias support: Add your own custom alias or generate a random…

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 πŸ‘†
Enter fullscreen mode Exit fullscreen mode

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
UI

UI

Bonus: I also created a Cross browser extension ✨ for mnmlurl.

Feel free to contribute on GitHub


If you want a heads up on my next projects, or just want to chat about the web, life and happiness make sure to follow me @liyasthomas on Twitter πŸ’™. If any of my projects helped you please consider making a donation.

yep

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .