How I built my Portfolio site in Django. Part 1 
Tags: portfolio, django, python
Published: 2021-03-27 15:24:41

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](https://docs.djangoproject.com/en/3.1/topics/install/) 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.
```python
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.
```python
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`. 
```python
'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
```python
from .models import Job

admin.site.register(Job)
```
Blog
```python
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. ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hxvpfn22w25s2t0wt9gi.png) 

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](https://www.djangoproject.com/) website for additional resources: