DEV Community

Cover image for CodeCraze🚀 - create your own blog in Django | Part 0 | Project Setup
Shiva R
Shiva R

Posted on

CodeCraze🚀 - create your own blog in Django | Part 0 | Project Setup

#python #django #beginners #website

Hola Amigos!!

In this Article, we create our own blog called CodeCraze using Django, a popular web framework written in python. Django is designed to help developers to rapidly build their web applications from concept to completion in an efficient way. Its a batteries included framework which provides out of the box functionalities such as ORM, API Integration, authentication, form handling & many more...

Django follows MVC (Model View Controller) Architecture which focuses on

✅ reusability
✅ scalability &
✅ maintainability

The most exciting part is, its completely open-source! 🥳

During this journey, we will build our blog step by step which covers important topics such as CRUD, authentication, profile creation, API Integration, comment section and others, to familiarize ourselves with the concepts.

For Part 0, we focus on project setup before actual coding, so without getting further delay let's get started...

Ingredients:

📌 python 3
📌 git
📌 virtualenv
📌 django

Creating virtual env

The importance of building our project in virtual environment is to isolate & manage python packages for different projects without interfering globally installed packages at OS level. We will be creating our blog on linux (ubuntu distro), I highly recommend you to work on linux or linux image installed in WSL.

  • Before diving, lets create an alias for python3 command to eliminate typing whole word. In my case I'm using fish shell,

for fish shell,

echo "alias py=python3" >> $HOME/.config/fish/config.fish
Enter fullscreen mode Exit fullscreen mode

for bash,

echo "alias py=python3" >> ~/.bashrc
Enter fullscreen mode Exit fullscreen mode
  • Firstly we install our virtualenv package via pip 
py -m pip install --user virtualenv
Enter fullscreen mode Exit fullscreen mode
  • Once the respective package has been installed, we create a virtual environment by specifying the directory of your choice and install django 
mkdir -p $HOME/tutorial/pyenv
Enter fullscreen mode Exit fullscreen mode 

py -m venv $HOME/tutorial/pyenv
Enter fullscreen mode Exit fullscreen mode

Project Directory Creation

  • when our setup got created, activate the virtual env, run the below command

for fish

cd $HOME/tutorial/pyenv && source bin/activate.fish
Enter fullscreen mode Exit fullscreen mode

for bash,

cd $HOME/tutorial/pyenv && source bin/activate
Enter fullscreen mode Exit fullscreen mode
  • To verify whether you have correctly created virtual env is by seeing pyenv in your prompt

virtualenv setup

  • Now we install django package 
pip install django
Enter fullscreen mode Exit fullscreen mode
  • Check the version of the installed django 
py -m django --version
Enter fullscreen mode Exit fullscreen mode

Django Installation

Django Project setup

  • Now lets create a django project under $HOME/tutorial/pyenv/ path 
django-admin startproject codecraze .
Enter fullscreen mode Exit fullscreen mode
  • Now let's create a requirement.txt file to store our dependencies as a best practice, so that the correct packages can be installed on other machine for collaborating with others. Also make sure to update requirements.txt whenever you install any new packages for your project. 
cd codecraze && pip freeze > requirement.txt
Enter fullscreen mode Exit fullscreen mode

creating requirements.txt file

  • Initialize the pyenv directoy as git repository
    Initializing git repo

  • Lets create .gitignore file, to ignore library files while doing our commit. Check out this website gitignore.io to create your .gitignore file, search for django, python, venv and copy the output into the created .gitignore file.

touch .gitignore
Enter fullscreen mode Exit fullscreen mode

Adding .gitignore file

  • To check whether our setup is working or not, let's run our django development server by running the below command. 
py manage.py runserver
Enter fullscreen mode Exit fullscreen mode

  • After running, you should see our development server started at localhost:8000, you will get a warning message that you have 18 unapplied migration(s), for now ignore it.
    Running Django dev server

  • Press ctrl + click on https://127.0.0.1:8000, it automatically opens a browser window, you should see the below screen.
    Our website is up & running!

  • Hooray 🥳!! you have successfully done with django setup. To stop the running server press ctrl+c in your terminal.

Running our first webpage

  • Before starting, firstly we must know some basic Django terminologies

    views

    1. They are python classes or functions that receives web request as one of its argument and returns web response.
    2. Response can be a simple HTTP request or HTML template response or HTTP redirect response that redirects user to specific webpage
    3. we write our business logic inside view and put all the views under views.py

    URLs

    1. we request the specific resource to Django server in terms of URLs
    2. we keep all our URLs under urls.py

    Template

    1. It is used to render HTML dynamically on our web page along with values passed over the response
    2. It is handled by powerful template engine
  • Go to codecraze directory, create a new file called views.py where we can put views which serves the respective webpage. 
touch views.py
Enter fullscreen mode Exit fullscreen mode

Project files

  • Now open your favourite code editor in that folder, search for views.py & open it. Lets write our first view which returns our homepage of the website. 
#views.py
from django.http import HttpResponse
def index(request):
    """returns a simple HTTP response as homepage of our codecraze site"""
    return HttpResponse("<h1>CoDeCrAzE</h1><br><h3>Hi!! There 👋</h3>")
Enter fullscreen mode Exit fullscreen mode
  • search for urls.py & open it. Add the below URL which routes our request to the homepage of our website. Make sure you import views.py, so that we can request to that view which returns our homepage 
# open urls.py under codecraze folder
from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index, name="home-page"), #homepage of CodeCraze site
]
Enter fullscreen mode Exit fullscreen mode

  • Once everything is done, Lets start our development server to see our changes, run python3 manage.py runserver and type localhost:8000/ in your new tab of the browser.
    Our Homepage

  • Cheers 🥂, you have successfully created your homepage.

  • Now let's apply migrations to convert Django models which has been created already for us into DB schema, run py manage.py showmigrations to view the migrations to be applied

showmigrations

  • Then run py manage.py migrate to migrate already defined Django models. So next time when you start development server, you won't see the migration warnings.
    migrate

  • Make sure you commit all yours changes 😁.

In the upcoming article, we will implement CRUD functionality where we can create, read, update & delete posts for our blog

Finally I request you to cover up the basics of Templates in Django, which will used be in the next section.

Until then, Peace!!✌🏻

Top comments (2)

Collapse
 
foxycoder123 profile image
Shiva R •

Thanks @coderatul 🤝🏻for your warm welcome!
It really means a lot, Looking forward to sharing more and continuing this blogging journey. Happy blogging to you too!!

Collapse
 
coderatul profile image
Atul Kushwaha •

hey @foxycoder123
welcome to the community, it is nice to see that you put a great effort in your blogs ! i believe you'd do great ahead; happy blogging

Read next

msnmongare profile image

How to SSH into a Server Using IP Address, Username, and Password

Sospeter Mong'are -

elinav profile image

How to Learn Python From Scratch in 2025: An Expert Guide

Ellis Velly -

szabgab profile image

Rust Source Code Reading: The thousands crate

Gabor Szabo -

vladislav_v_75b0533bb1e3 profile image

WebAssembly + JavaScript: Building a Real-Time Image Processing Tool

Vladislav V. -