I've been needing to create a new portfolio site and I've also been wanting to learn some new technologies so I thought this was a great opportunity to kill two birds with one stone. In this post, I will describe how I created my new portfolio site with Django.

Step one - Plan

As with any project, I think it's best to do a sketch to map out what you want the project to accomplish and how you'd like for it to look. For me, I knew I wanted a home page with a photo and description of myself along with some projects I have worked on. I also wanted a contact me form and a page to show my blog posts.

Step two - Create the project

There is a pretty simple command for you to run once you have installed Django on your system. django-admin startproject mysite obviously you want to change mysite to the name of your project for me that was portfolio.

Step three - Apps

When you create a Django project you will have the project directory but within your project, you will likely have Apps these are the different sections of your website, for example, my portfolio will have a blog app and a jobs app inside of the main Django project. Essentially apps are the different sections of your project. I added two apps to my project. To create a new app you can run this command and change the blog to whatever the name of the app you are creating. python manage.py startapp blog and python manage.py startapp jobs

Step four - Models

When you created these apps you will see two new folders in your project. A blog folder and a jobs folder. Within those folders, you will find a models.py file. This is where we will create and define our models with the attributes we want them to have. This is what my job model looks like.

class Job(models.Model):
    image = models.ImageField(upload_to='images/')
    summary = models.CharField(max_length=1000)
    heroku_url = models.URLField(max_length=100, null=True)
    github_url = models.URLField(max_length=100, null=True)

Blog model.

class Blog(models.Model):
    title = models.CharField(max_length=255)
    pub_date = models.DateTimeField()
    content = models.TextField()
    image = models.ImageField(upload_to='images/')

Step five - Migrations & Settings
Now that we have made changes to our models we need to let python know of these changes by migrating them to the database. To accomplish this we will run a few commands but first, we need to update our settings.py file in our portfolio folder. This is another step that is required to let Django know we made changes to our app that we want to apply. So navigate to that file and add the following code into the INSTALLED_APPS.

'jobs.apps.JobsConfig'
'blog.apps.BlogConfig'

While we are in the settings file this might be a good time to set up a path for our media files, this can be accomplished with the following MEDIA_ROOT = os.path.join(BASE_DIR, 'media') and set the URL MEDIA_URL = '/media/' Now we are finally ready to migrate, do that by running the following commands python3 manage.py migrate and python3 manage.py makemigrations At this point you may notice an error that states we don't have Pillow installed. Pillow is required when using the ImageField so you will need to follow the instructions to install pillow which you can do by running pip3 install Pillow

Step six - Admin
Let's check out the admin interface but first, we need to create a superuser, this is basically a user that has full access to the admin portal for your project. To create a superuser go back to your terminal and run python3 manage.py createsuperuser and follow the instructions to create the username, email address, and password. Now let's start our server python3 manage.py runserver and navigate to /admin page and login with the superuser info you just created. There's not a whole lot of info on this page yet because we haven't added our apps to the admin. Go back to your project and inside the blog and jobs folder add this code below to your admin.py file.
Jobs

from .models import Job

admin.site.register(Job)

Blog

from .models import Blog


admin.site.register(Blog)

Now Once you load the admin interface you should see a page that looks something like this.

Now you are able to create a new blog and new jobs with the attributes you set in your models.

I plan to add to this series next week where we will cover setting up the home page, adding bootstrap to our project, and showing all jobs and blog. Until then, check out the Django Project website for additional resources: