DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

Cover image for How to create your own custom URL shortener in 10 minutes for free & deploy to GitHub ๐Ÿš€
Liyas Thomas
Liyas Thomas

Posted on • Updated on

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!

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

Top comments (22)

Collapse
 
jacobbrokaw profile image
Jacob Brokaw

There are so many things I love about this post! To name a few, it's:

  • Easy to read
  • Get's to the code right away
  • Gives a simple story/explanation
  • Looks beautiful
  • And it's free?!

I just made this and it took maybe 3 minutes at max. I'm definitely going to play with the code and see what cool things can be done. Thank you for sharing this!

Collapse
 
liyasthomas profile image
Liyas Thomas

Thats exactly what I had in mind while writing this one. Check out my other posts on Dev.to and projects on GitHub. I'm sure you'll be surprised ๐Ÿคช

Collapse
 
nelsonvassalo profile image
nelsonvassalo • Edited on

Hi, I might be missing something but how does the shortener work after instalaltion and deployment? Because I only see my shortener attached to my URL as an hash. I though the purpose was to have something like nl.sn redirect to my site and instead I get the whole URL, like www.dummysite.com/mnml/src/#sn Am I misunderstanding the concept? Thanks

Collapse
 
liyasthomas profile image
Liyas Thomas • Edited on

Concept is to map one custom (and preferably a short domain like goo.gl, bit.do etc) URL say dummysite.com#abc to this_is_a_very_very_long_and_ugly_URL.com/still_long/blah_blah_blah.

That's pretty much all about a URL shorter.

You can make your URL shortener like dummysite.com#abc after moving contents from src to root of your hosting site to remove mnmlurl/src extension from your domain. 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.

Shortened URL is a branded one and users can easily get what this URL is for. Sites like Twitter have a character limit on posts that wont allow users to post long URLs. So URLs must be short and concise.

Collapse
 
anonimoconiglio profile image
Santiago

Sorry for the noobness but do I need to build it first right? Because following your tutorial gets me the readme page online (with github pages)

Collapse
 
liyasthomas profile image
Liyas Thomas

Thanks for the patience.

EDIT 0: Minimal URL can be hosted on any website hosting services like GitHub/GitLab pages, Firebase/Heroku hosting, etc. Hosting on GitHub pages was just for proof of concept.

If you followed this post and used GitHub pages for hosting, the site will be hosted on your_github_username.github.io/mnmlurl/src I forgot the /src, sorry.

Alternatively you can npm build the project and host the contents from output folder on any other hosting services like Firebase/Heroku etc.

EDIT 1: If you want to take development further, consider contributing on GitHub.

EDIT 2: Minimal URL is an experimental project. Don't shorten sensitive contents/URLs with it.

Collapse
 
anonimoconiglio profile image
Santiago • Edited on

Thanks a lot, I confirm it works! ;)
Don't worry this let me understand better how github pages works.

Do you think this could have some basic analytics in the future (like those that tinyurl has?). It would be amazing to know how much people click on the link ;)

Besides, is it possible to shorten urls with the shell using this app?
I don't know how to do it but I'm thinking in something like creating an npm package that one can then install globally on the system, so then do a command like:

mnm <url> --custom-alias chosen-alias 

That would be really amazing!

Thread Thread
 
liyasthomas profile image
Liyas Thomas

A CLI is planned for future. Watch project on GitHub for updates.

Thread Thread
 
anonimoconiglio profile image
Santiago

๐Ÿคฉ๐Ÿ˜๐Ÿคฉ

Collapse
 
liyasthomas profile image
Liyas Thomas

You're right. I forgot the build step. Let me update my post with little more clarity. Sorry for the confusion, my bad.

Collapse
 
liyasthomas profile image
Liyas Thomas • Edited on

Fixed relative path issues. Don't forget to force refresh [Ctrl + Shift + R] the page to update changes. โญ Star the project on GitHub show some โค love!

Collapse
 
kienoiinc profile image
Kien (William) Tran

The jsonstore.io is not working in my country. Can you recomment me another side or how to create it by own.

Collapse
 
liyasthomas profile image
Liyas Thomas

Sorry, I'm not maintaining this project anymore. But you can make use of any other CMS services which support CRUD operations through APIs and it should work.

Collapse
 
liyasthomas profile image
Liyas Thomas • Edited on

โญ Star the project on GitHub show some โค love!

Collapse
 
liyasthomas profile image
Liyas Thomas

Oh. That's good! Fix comin' in 5 minutes ๐Ÿค—

Collapse
 
yogeswaran79 profile image
Yogeswaran

Hey there! I shared your article here t.me/theprogrammersclub and check out the group if you haven't already!

Collapse
 
liyasthomas profile image
Liyas Thomas • Edited on

I appreciate that โœจ btw, I'm on Telegram @liyasthomas ๐Ÿ’โ€โ™‚๏ธ

Collapse
 
atulcodex profile image
๐Ÿšฉ Atul Prajapati ๐Ÿ‡ฎ๐Ÿ‡ณ

Hey, liyas can you make a video on how to make this URL shortener with the scratch so we can learn a lot with your efforts. It's a request please :)

Collapse
 
liyasthomas profile image
Liyas Thomas • Edited on

I'm not good with making videos nor I haven't done or even thought about it in the first place. Source is available on GitHub, please go through it. For queries, contact me via twitter or dev.to messages. I wouldn't mind you making a video about this with credits.

Collapse
 
antoinerousseau profile image
Antoine Rousseau

I don't understand, I tried to go to the demo at mnmlurl.ml/ and pasted a long URL, but it gives me for example mnmlurl.ml/#4hJhX which does not redirect me anywhere...

Collapse
 
liyasthomas profile image
Liyas Thomas • Edited on

~Well then, that short URL has been deleted somehow.~
EDIT 0: There's been a problem with server. Thanks for notifying the issue. Will get into it.

๐ŸŒš Friends don't let friends browse without dark mode.

Sorry, it's true.