Making a URL Shortener With Django

Making a URL Shortener With Django

You might have used a URL shortener like Bitly or TinyURL before. If you haven’t, a URL shortener is a simple tool that takes a long URL and turns it into a small one. Yup, as simple as that. And that’s exactly what we’ll be doing today. Why pay for a service if you can do it by yourself? So, tag along with me, and by the end, you’ll have your own URL Shortener.

In this blog post, we will discuss making a URL Shortener With Django with complete source code so you can just copy and paste them into your own project. Happy exploring and learning !!

Making a URL Shortener With Django


To do this project, I’ll be using HTML and CSS for the looks and Django to work behind the stage. I’ll assume you’re aware of the basics of all three. And of course, as always here comes my unwanted advice part. V. S. Code. Get it! Get VS Code and it will make your life so much better! Or at least the coding part of it. With that out of the way, let’s get into it right away.

In the folder you’ll be working in, open the terminal and type:

Django-admin start project your_project_name

I chose URLshortener. It should create a folder by the project name. Inside the folder, you’ll find a folder with the same name. I wonder why Django thought this was cool, it gets really confusing man!

We also have to make an ‘app’ that will do the work we need. To make the app, change your directory in the terminal to the URL shortener folder, the first one, and type

django-admin startapp app_name

Restaurant Website Using HTML and CSS

I named it a shortener, because, you know, it shortens the URL. How creative!

Open the ‘’ file in URL shortener and add ‘shortener’ in the INSTALLED_APPS list.

Now add ‘templates’ and True in the TEMPLATES list.

See that’s the cool thing about Django. Half your code is already generated, just needs customizations here and there. Now in the ‘’, add:

from Django.URLs.conf import include

and add a path like this in the URL patterns list:

This way, when the site runs, it will look in the ‘’ of the shortener app to return a page to display. But you’ll notice that there is no ‘’ in the app directory. Well, not yet. So let’s make a file ‘’ in the folder and write the following code.

from django.urls import path
from .import views
urlpatterns = [
path('',views.index,name="home page"),

How to design Bootstrap ribbon | Bootstrap 4 Corner Ribbon &Codewithandom

Now since we’re looking for the ‘index’ function in ‘’, let’s define the function. Write the following code in the ‘’.

from django import http
from django.shortcuts import render
from .models import Url
from django.http import HttpResponse
def index(request):
return render(request,"shortenerindex.html")

All the imports are necessary and you’ll realize why they are needed when you go through the code.

So we’ve specified that we want to display the ‘index.html’ file, but that does not exist yet. Let’s make the HTML file then. In your app folder, like the one named ‘shortener’ in my case, make two more folders namely ‘templates’ and ‘static’, which would contain our HTML and CSS files respectively. Now in the templates folder, make a ‘basic.html’ and enter the following code.

<!doctype html>
<html lang="en">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'indexstyles.css' %}">
<title>{% block title %}{% endblock %}</title>
{% comment %} <h1>Hello, world</h1> {% endcomment %}
{% block body %} {% endblock %}
In this blog post, we will discuss Making a URL Shortener With Django with complete source code so you can just copy and paste them into your own project.
Thank You And Keep Learning!!!

This Post Has One Comment

  1. Anonymous

    me interesa el proyecto, espero arregles pronto la info, se ve genial

Leave a Reply