How I Designed a Personal Portfolio Website with Django

by

Creating a personal portfolio website is an excellent way to show off projects you have already done. Thus, whether you are a data scientist, a software developer, or a web developer, having a personal portfolio website is a compulsory requirement to increase your chances of getting a job.

As a web developer, this should be our foremost project because it’s part of what we are learning, that is, to design complex websites and applications. It will not make sense that we are learning to design a website, yet, we don’t have one to call our own.

In this tutorial series, we will learn to design a personal portfolio website that employers or others can visit to see all the projects we have done:

  • This first part focuses on creating Django models and an admin panel.
  • The second part focuses on creating a view function and having our website displayed to users.
  • In the third part, we will learn how to deploy our website to a production server.
  • In the fourth part, we’ll learn how to create forms so users can input stuff or contact you. 🙂

In upcoming tutorials, we will learn to create a blog application where we can share what we have learned as a web programmer.

This is probably the first time we are working with models as far as my Django project tutorials are concerned. It will be nice to learn how to work with a database. Therefore, you must have a basic knowledge of Python and Django to derive maximum benefit from this tutorial.

Getting Started

We have already set up Django Projects several times we have been learning Django. For the sake of the new ones in our midst, herein lies the steps involved in setting up Django in your Ubuntu terminal:

  1. Create and change into a new directory called portfolio_website.
  2. Install Django in a new environment.
  3. Create a new project called project.
  4. Create a new app called portfolio.
  5. Register the app in settings.py file

The Projects should be created in the current directory using a dot after the project name.

Creating the Models

We create a database to store data displayed on a website. Knowing Structured Query Language (SQL) is a compulsory requirement to manage the database. The problem is that not everyone understands the language.

Django comes to the rescue with its built-in Object Relational Mapper (ORM). So, instead of writing SQL, you can simply create classes using the Python Language you understand, and ORM will turn them into database tables.

The classes are called models, and in all Django projects, it is created in the models.py file. Our model will have five fields:

  1. The title for the name of the Projects
  2. The image for uploading images
  3. The description for a brief explanation of the project done
  4. The technology used to carry out the project.
  5. The date the project was done (optional).

Open the models.py file, and add the following in our fields:

from django.db import models
from datetime import datetime
# Create your models here.

class Projects(models.Model):
    title = models.CharField(max_length=300)
    image = models.ImageField(upload_to='images/')
    description = models.TextField(blank=True)
    technology = models.CharField(max_length=30)
    date_pub = models.DateTimeField(default=datetime.now, blank=True)

The above script demands an explanation since it is our first time using database models. We import the Django model class. The name of our model is called Projects. It has four built-in model fields.

The CharField is used to write short words, while the TextField which has no length specification is used to write long words. The image received by ImageField will be uploaded to a specific file path.

Notice that our model inherits the models.Model class. This is how models created with Django should be done.

It’s now time to create the database. To do this, we have to create a migration file. Run the following in your terminal to create a migration file:

python3 manage.py makemigrations portfolio

Did you see the SystemCheckError, 'cannot use ImageField because Pillow is not installed'? The ImageField cannot function without the Pillow module.

So, install the module in your virtual environment, and run the command once again to create a migration file. You will see something similar to this:

Migrations for 'portfolio':
  portfolio/migrations/0001_initial.py
    - Create model Projects

The migration file tells Django what changes to make in the database. Notice the name of the app following the command. This tells Django to apply the migration to the specified app. You do well to make it a habit of specifying the app when running the makemigrations command.

Doing so may not be completely obvious in a single app but it becomes necessary when your Django Project has several apps to avoid surprises.

Next is to apply the migrations using the migrate command.

python3 manage.py migrate

You will notice the database file, db.sqlite3 has been created. The Django ORM creates databases with Python’s SQLite module. In a production server, you may have to use other databases such as PostgresSQL or MySQL.

MEDIA_URL

This is the URL we will use in template files to refer to the media files.

MEDIA_ROOT

This is the path to the directory where our media files will be stored. Django by convention, uses the name, media. So, we have to create a folder called media in the project-level folder.

Notice that, as seen in the Projects model, we set the path to store our uploaded images in the images folder. So, we have to create the folder inside the media folder.

mkdir -p media/images

We have to configure these two new features in the settings.py file. Add these to the file.

MEDIA_URL = 'media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

With this configuration, we can now upload image files, and Django will have them stored in the images folder. Make sure you import the os module.

The Admin

The admin panel allows you to create, update, or delete Projects (all instances of the model class). To access it, we have to create a superuser. Add yourself as a superuser by running the following commands in your terminal:

python3 manage.py createsuperuser

Follow the instructions to create a superuser account. Note that as you type the password, it is not displayed for security reasons. Afterward, start the local server.

python3 manage.py runserver

Go to http://127.0.0.1:8000/admin to see the admin interface. We can’t locate our Projects model. That’s because we haven’t registered it in the admin.py file.

Open the file and add the following:

from django.contrib import admin
from .models import Projects

# Register your models here.


admin.site.register(Projects)

With that, we register our model. As simple as that. Refresh the page. You will see the Projects model. Click add and you will see something similar to the image below:

Add several sample projects you can display on your portfolio website. You will see that the image files you uploaded will automatically go to the images folder.

Conclusion

So far in this project tutorial, we have learned how to create Django models, turn the model classes into database tables using the migration files, set up an admin panel and upload sample projects we can display on the website. You are to be commended for staying with me all through the end of this first series. The code is available on my GitHub page.

In the second part of this series, we will create a view function using the sample projects we uploaded, and display them to users on a web page. Stay tuned!