Wagtail for Django Devs: Create a Developer Portfolio
Tags: django, tutorial
Published: 2020-11-30 07:27:02

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.

```bash
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.

```bash
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:

```bash
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`.

```bash
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:

```bash
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:

```bash
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:

```bash
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:

```bash
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!

![Screenshot of the Wagtail default welcome page](https://dev-to-uploads.s3.amazonaws.com/i/c6gdiptzgx906udjpwcc.png)

## Exploring the Wagtail Admin

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

```bash
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.

![Screenshot of Wagtail admin dashboard](https://dev-to-uploads.s3.amazonaws.com/i/1v9t7ynxx41qjjpcu5c7.png)

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.

![Screenshot of the home page admin editor](https://dev-to-uploads.s3.amazonaws.com/i/mgwmncj9rnptdiw12f2l.png)

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](https://engineertodeveloper.com/category/wagtail/) 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!