Events Feb. 18, 2021 By Vikramjeet

Build Your Own Blog with Django — Part 1

With all this shelter-in-place going on, a lot of people (myself included) are re-assessing their pastimes and finding new and old hobbies alike. I decided to start blogging again, but also wanted to make my own blog on a powerful framework that could be built out even more substantially in the future.

To achieve this goal, I used Django, an extensible web framework that is built on top of Python, which I’m already familiar with. This article is for people with similar goals who are new to Django, Python, and or web frameworks, who are looking for projects to build out in the new reality we are finding ourselves in.

Takeaways of this article:

• Build your own blog super quick
• Learn the basics of Django through building a simple blog

Outside the scope of this article:

We will not be covering how to save data to the backend from forms rendered on the front-end (outward, enduser facing). To keep things simple and basic, you can set up a blog super quick if you rely on Django Admin to manage your own posts for anonymous users to see.

This article assumes you are familiar with terminal commands for navigating and creating directories. For a refresher, see this article.

1.1— The Setup

In this section, we’ll set up Django, your project directory, and your virtual environment. You’ll need the following in the following versions:

pipenv (version 2018.11.26)
python (version 3.6.5)

You can download pipenv here. If you are working off a brand new set of installs, you can download Python here, and pip (package handler that installs packages for Python) here. Note: you need to download all these first for any further steps to work.

1.1.1 Setting up your project directory and virtual environment

Navigate to the folder on your computer you want your blog’s project folder to live in and run the command mkdir Your_Blog, naming it whatever you like of course, but I’ll commit to that name for illustration purposes throughout. cd into that folder and type the following command to get a virtual environment with the appropriate versions:

pipenv --python 3.6.5 install django==3.0.6

This will install that version of Django into your virtual environment using that version of Python.

To run this virtual environment, simply type pipenv shell in the terminal now.

1.1.2 Setting up Django and Running Your Server

Now that you have your development environment, in the terminal with that environment active, make another folder now called src where all your project folders will live and run the following command in there:

django-admin startproject Your_Blog .

Navigate to that folder in the terminal and ls to verify you’re in the right place. You should see manage.py, a key file in Django projects.

Run the following to migrate changes, a necessary command to sync your project files in Django: python manage.py migrate. You should see in the terminal a bunch of files are committing. Don’t worry about that for now. Next run python manage.py runserver to get it up and running.

You should see in the terminal the URL is http://127.0.0.1:8000/. Go there in your browser and see for yourself that your project is initialized! You should see this default screen:

 

 

Django default launch page

If you see that it worked and you’re well on your way to customizing your project! If you don’t see that, please comment and I can answer any questions you have.

1.1.3 Create a Superuser

You’ll need to create an admin user to actually use Django Admin to manage your blog posts and such. In the terminal, run this command and follow the prompts to create that user: python manage.py createsuperuser. Follow the prompts that show up after running that command.

You should see that your user account was created successfully. Now navigate to http://127.0.0.1:8000/admin with your server running to log in and see the Admin view.

You should see this upon successful login:

 

 

Django administration user interface (UI) view

1.2 — Building Functionality

1.2.1 Creating Your First App

Django works off of the notion of apps, which you can think of as micro-functionalities within your site. In a fully built out project, the blog of your website may be just one such app. You want to make apps that are able to plug and play ideally across projects so you can recycle code. That way, let’s say in the future you make another website and you want a fully working blog to just pop into one of the subdomains of the site. You can do that with Django. I plan for this article to set you up out of the box with that functionality.

With that said, I’m going to assume you want the following apps as a default: a home page (the blog article list view), and an about page. Realistically, the about view is a more static view and doesn’t necessarily need dynamic updates, but it might one day! Run the following commands to create those apps.

python manage.py startapp home
python manage.py startapp about

You will notice you now have folders for each of these in your project directory. Noice!

1.2.2 Templates and Views

Django as a framework utilizes the Model View Template (MVT) software design pattern. There are more details in that link, but basically when you go to a URL, Django checks for the pattern that matches that URL and what template and model it needs to render to the browser. It renders the template (think page structure) with the model’s data.

Templates are ways of making multiple views inherit the same default look and functionality. For example, all your pages probably will have the same header and footer with your menu and such.

1.2.3 Your first template

To inherit a template and set up your apps, we need to set up a templates directory for Django to search in.

Create a templates folder in /src and add base.html as a file within it.

Add the following in between the brackets in the DIRS [], line in the TEMPLATES section of your settings.py file.

os.path.join(BASE_DIR, 'templates')

This enables Django to find the templates folder in the src folder and the base.html file within that to inherit designs from.

We will use Bootstrap, an open framework with an extensive library of styles and elements of HTML/CSS, to style the base template to get us up and running.

Add the following to base.html:

You’ll notice a few important Django concepts in here we should go over.

Line 11 is the name of the tab in the browser. It includes Django’s templating syntax:

<title>Your_Blog | {% block tab_content %}Replace{% endblock %}</title>

The tab_content block is a lookup value. When you extend this base template the word Replace will be replaced by whatever you put in a tab_content block in later pages. We’ll go through that in a bit.

I added navbar items with standard link references in lines 22–39. You can change them later if you like and want different URLs, but Home is '', About is /about.

Lastly, there is one more block that will insert content from the page in question into the base.html file here and that’s on line 41, page_content. We will add content into a page_content block to insert it there.

Don’t worry about all the class names for now in all these elements. Bootstrap is a big library and you don’t need to know all of it to get up and running. If needed, here’s material on the basics of HTML and CSS.

In the INSTALLED_APPS section of settings.py, add the apps we made:

INSTALLED_APPS = [    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',    'about',
    'home',]

1.2.4 Your First View

We just set up the routing and the template directory and base HTML file. Now let’s create a home_view to render out this template and see what we have so far!

Add the following function to home/views.py:

def home_view(request):
    template_name = "base.html"
    return render(request, template_name)

Now we need to import our home/views.py view into our Your_Blog/urls.py file in the import statements, and then add a URL pattern to route to the home URL. In urls.py, add the following import to access the home_view:

from home.views import home_view

Lastly, add the URL pattern in urlpatterns in settings.py. This section should now look like this:

urlpatterns = [    path('admin/', admin.site.urls),    path('', home_view)]

Restart your server and check your home page at the same local port as before. You should see this if it all worked:

It’s isn’t much, but it’s Home.html

Conclusion and Next Steps

In this first part of my Django blog two part series, we created a home page with some basic but nice Bootstrap styling, and some of the settings needed in Django backend files to enable later functionality.

 

Till next time, happy coding!