How to Create Your URL Shortener Using Python

How to Create Your URL Shortener Using Python

by

How to Create Your URL Shortener Using Python

Hello coders, welcome to Our Blog Codewithrandom. In today’s digital world, we often come across very long and complicated URLs. These URLs are not easy to share, remember, or type. This is where URL shorteners come in. They take a long link and turn it into a short, clean, and easy-to-share link.

In this article, I will show you how to build your own URL shortener using only HTML for the frontend and Python for the backend. This project is simple enough for beginners but also useful enough to use in real life.

Live Demo:
How to Create Your URL Shortener Using Python


You can check out the live working version of this URL shortener here: [URL Shortener].
This project is hosted on Render, with the backend and frontend both running from the same codebase.

What is a URL Shortener?

A URL shortener is a tool that takes a long web address and converts it into a short link that redirects to the original URL when someone clicks it.

For example:

Long URL:

https://www.example.com/products/category/item-name-with-very-long-title

Short URL:

https://short.ly/abc123

When the user clicks the short URL, they are redirected to the original long URL.

Why Build Your Own URL Shortener?
  • Customization – You can choose your own short link format.
  • No ads – Most free URL shorteners show ads.
  • Learning – You will learn HTML, Python, and basic backend logic.
  • Privacy – Your data stays with you.

Step 1: Project Setup

We will need:

  • Python 3 installed on your computer
  • Flask (Python web framework)
  • Basic knowledge of HTML and Python
  • A code editor like VS Code or PyCharm

Install Flask

Open your terminal or command prompt and run:

pip install flask

Flask will help us create the backend server that handles the URL shortening.

Step 2: Create the Project Files

Our project will have:

  1. app.py → The Python backend file
  2. templates/index.html → The HTML frontend page

Folder Structure

url-shortener/
│
├── app.py
└── templates/
    └── index.html

Step 3: Create the HTML Frontend

We will design a simple HTML form where users can enter their long URL.

templates/index.html

<!DOCTYPE html>
<html>
<head>
    <title>URL Shortener</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #f8f9fa;
            padding: 50px;
        }
        .container {
            background: white;
            padding: 20px;
            max-width: 400px;
            margin: auto;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        input[type="text"] {
            padding: 10px;
            width: 80%;
            margin: 10px 0;
        }
        input[type="submit"] {
            padding: 10px 20px;
            background: #007BFF;
            color: white;
            border: none;
            cursor: pointer;
        }
        input[type="submit"]:hover {
            background: #0056b3;
        }
        p {
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>URL Shortener</h1>
        <form method="POST">
            <input type="text" name="long_url" placeholder="Enter your long URL" required>
            <br>
            <input type="submit" value="Shorten">
        </form>
        {% if short_url %}
            <p>Short URL: <a href="{{ short_url }}" target="_blank">{{ short_url }}</a></p>
        {% endif %}
    </div>
</body>
</html>

Step 4: Create the Python Backend

We will use Flask to:

  • Receive the long URL from the HTML form
  • Generate a short code
  • Store it in a dictionary
  • Redirect the short link to the original URL

app.py

from flask import Flask, render_template, request, redirect
import random
import string

app = Flask(__name__)

# Dictionary to store URLs
url_database = {}

# Function to generate a short code
def generate_short_code():
    return ''.join(random.choices(string.ascii_letters + string.digits, k=6))

@app.route('/', methods=['GET', 'POST'])
def home():
    if request.method == 'POST':
        long_url = request.form['long_url']
        short_code = generate_short_code()
        url_database[short_code] = long_url
        short_url = request.host_url + short_code
        return render_template('index.html', short_url=short_url)
    return render_template('index.html', short_url=None)

@app.route('/<short_code>')
def redirect_to_url(short_code):
    long_url = url_database.get(short_code)
    if long_url:
        return redirect(long_url)
    return "URL not found!", 404

if __name__ == '__main__':
    app.run(debug=True)

Step 5: Run the Application

In your terminal, run:

python app.py

You will see something like:

Running on http://127.0.0.1:5000/

Open the link in your browser and try shortening a URL.

How to Create Your URL Shortener Using Python

Step 6: How It Works

  1. User enters a long URL in the form.
  2. Flask receives the request and generates a random short code.
  3. The short code and the original URL are stored in a Python dictionary.
  4. Flask returns a short URL.
  5. When the short URL is visited, Flask redirects to the original URL.

Step 7: Improvements You Can Make

  • Save URLs in a database (SQLite, MySQL, etc.)
  • Allow custom short codes
  • Add analytics to track clicks
  • Add a copy button for easy copying
  • Deploy to Heroku, PythonAnywhere, or Render

Conclusion

Creating your own URL shortener using HTML and Python is a great beginner project to understand how the backend and frontend work together.
You learned:

  • How to create a simple HTML form
  • How to use Flask for routing and redirection
  • How to generate random short codes
  • How to store and retrieve data in Python

This project can be the base for something bigger—like a full-fledged link management system.

Here is a Github Repository : URL SHORTNER

Stay connected with CodeWithRandom for more such cool Python projects.

Thanks For Reading the Blog!

 

 

FAQs

1. What is a URL shortener?
A URL shortener is a tool that takes a long web address (URL) and converts it into a short, easy-to-share link that redirects to the original page.

2. Why should I use this URL shortener?
It’s simple, fast, and built with only HTML and Python, making it lightweight and beginner-friendly.

3. Does this URL shortener require a database?
In this basic version, no external database is required. URLs are stored in a Python dictionary or local file for quick testing. However, you can integrate a database like SQLite or PostgreSQL for production use.

Leave a Comment