Wagtail for Django Devs: Create a Developer Portfolio

Managing content isn’t easy, but that’s where Wagtail steps in. Wagtail is a Django CMS that makes managing your website’s content easy—even fun. It provides an intuitive admin interface with a rich set of features, such as streamfields and intelligent images, so producing and managing content is a charm.

In this tutorial, we will be building a developer portfolio using Wagtail and exploring the CMS’s ins and outs. The portfolio website we will be creating will have a homepage, portfolio page, and a blog where you can showcase your know-how.

If this sounds like a cool project to you, then let’s jump straight in and start learning about the great things Wagtail has to offer us.

Project Setup and Installing Wagtail

First things first, we need to install Wagtail and set up our portfolio project. Let’s create the project folder we will work out of and change into that folder.

mkdir devport
cd devport

Perfect that sets up our project’s working directory. Now we can move onto setting up the virtual environment.

Create Virtual Environment

Creating a virtual environment for all your projects is a great habit to get into. They create a container or a walled garden around your project, so it doesn’t interfere with other projects on your machine. To create my virtual environment, I will be using pipenv.

pipenv install

With that one command, pipenv creates a new virtual environment inside our project working directory. After running pipenv install, you should see some output in your terminal, similar to this:

Creating a virtualenv for this project…
Pipfile: /Users/brian/Documents/tutorials/devport/Pipfile
Using /Users/brian/.pyenv/versions/3.6.9/bin/python3.6m (3.6.9) to create virtualenv…
⠴ Creating virtual environment...created virtual environment CPython3.6.9.final.0-64 in 307ms
  creator CPython3Posix(dest=/Users/brian/.local/share/virtualenvs/devport-fsisFtpz, clear=False, global=False)
  seeder FromAppData(download=False, pip=bundle, setuptools=bundle, wheel=bundle, via=copy, app_data_dir=/Users/brian/Library/Application Support/virtualenv)
    added seed packages: pip==20.2.2, setuptools==49.6.0, wheel==0.35.1
  activators BashActivator,CShellActivator,FishActivator,PowerShellActivator,PythonActivator,XonshActivator

 Successfully created virtual environment! 
Virtualenv location: /Users/brian/.local/share/virtualenvs/devport-fsisFtpz
Installing dependencies from Pipfile.lock (ca72e7)…
     ▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉▉ 0/0 — 00:00:00

To activate this project's virtualenv, run pipenv shell.
Alternatively, run a command inside the virtualenv with pipenv run.

Command not recognized? Run pip install pipenv to install the package. After it has been successfully installed, rerun the pipenv install command.

To activate the virtual environment, we run the command pipenv shell.

pipenv shell

When the virtual environment is activated, a set of parentheses surrounding the project folder’s name should appear on the left in your terminal. In my case, (devport) appears on my terminal’s lefthand side when the virtual environment is activated. To exit the virtual environment, run the command exit. As we saw before, to start it run the pipenv shell command.

After creating the virtual environment, you should see two new files created inside your project working directory: Pipfile and Pipfile.lock. These files manage your project’s dependencies, much like how npm makes a package.json file to manage dependencies. Each new package we install gets added to the Pipfile.

With the virtual environment set up, we are ready to install Wagtail.

Installing Wagtail

To install Wagtail, run the following command:

pipenv install wagtail

This command installs Wagtail and its dependencies. Inside our project’s working directory, let’s start a new Wagtail project by running the following command:

wagtail start devportfolio .

Provided by Wagtail, the start command is similar to Django’s django-admin startproject command. The start command generates a project folder, devportfolio in my case, containing the project’s settings, a home app including a blank homepage model, and a sample search app.

Notice the start command created a requirements.txt file in our project working directory. This file functions similarly to how the Pipfile works by keeping track of project dependencies. Inside the requirements.txt file are all the dependencies Wagtail needs to run, so we will tell pipenv to install any dependency in this file if it’s not already installed by running the following command:

pipenv install -r requirements.txt

Before we can check out our new Wagtail site in the browser, we first have to create the database by running the initial migrations. To generate our database, run the following command:

python manage.py migrate

You should see a long list of applied migrations in your terminal. These are the names of the created tables in your database. After the migrations have finished, start the development server by running the following command:

python manage.py runserver

Now we can navigate over to localhost:8000 and check out our new Wagtail site in the browser. You should see the default Wagtail landing page come up. Pretty cool!

Exploring the Wagtail Admin

To begin exploring the Wagtail admin, we first need to create a superuser by running the following command:

python manage.py createsuperuser

Follow the prompts in the terminal to create your superuser. After you set up your superuser, restart the development server, and navigate to localhost:8000/admin/ to login into the Wagtail admin.

Your screen should look similar to this after logging in.

This is the Wagtail dashboard, a central hub for all your site’s information. At a glance, the dashboard provides information on:

• the number of pages, images, and documents currently held in the Wagtail CMS.
• Any pages now awaiting moderation (if you have these privileges).
• Your most recently edited pages.

We only have one page; however, we will create more pages later in the tutorial. Let’s keep exploring the Wagtail admin before diving deeper into the code.

Editing Pages in the Wagtail Admin

In the Wagtail admin, you can edit the default home page by clicking the page tab in the sidebar, then clicking the edit icon on the homepage that pops up.

You should see the editing interface come up, like in the screenshot above. Let’s change the page’s title. I’m going to change the title to “Dev Portfolio.” Feel free to change the title to whatever you would like. After changing the title, click the “^” icon at the bottom of the page, then click publish. The changes are now live. Let’s check out the updated page by clicking “VIEW LIVE” in the top banner to view the live page.

Sweet, you should see the default Wagtail landing page again, but notice the browser tab’s title has changed. Pretty cool! That’s how we can make edits and manage Wagtail pages. In the next tutorial, we will flesh out the homepage with a lot more content.

If you would like to read the other tutorials in the series, check out my blog EngineerToDeveloper for more free tutorials like this.

I hope you all enjoyed the tutorial. If you have any questions, leave a comment below, and I will do my best to help out!