Divio App Required  Divio Shell Required

In this short guide we will show you how to set up a Wagtail Project on Divio Cloud.

Our video takes you through the steps below.

Create the project

Login to the Control Panel (or sign up for free)

Click on Add new Project.

This will redirect you to the "Add new Project" creation screen. In addition to choosing a Name for your project, the following options are required to get started with the guide:

  • Creation: New
  • Region: Choose United States or European Union
  • Python: Python 2.7.x
  • Type: Wagtail
  • Boilerplates: Blank Boilerplate

Click Create Project and continue to the Project’s Dashboard.

Set up and run the project locally

Install and launch the Divio App

Select your project and hit Setup to get started. The Divio App will run through a number of processes to set up the local project. It all happens automatically and takes just a few minutes.

Once this process has completed, you can actually start the local site by getting the local server running. Select Start to launch it. To open the local site in your browser, click the eye icon.

This will open your project in your default browser. You should see the Wagtail welcome page.

Create a new Wagtail page type

Wagtail requires you to create a new application containing your new page type, based on its provide Page class.

Launch the Divio Shell

If you're going to be using the local project as a development tool (it's ideal for this) you will want a shell that can interact with it.

The Divio Shell option will set this all up for you. Just hit Divio Shell, and in a few moments you'll be in a terminal shell session, ready to work with your project from the command line too. 

Create the new Django application

Change into your project's directory to work there, and create a new Django Application:

docker-compose run --rm web python manage.py startapp home 

This will generate a Django application called home, located in the project directory.

(From this point onwards, we're following more or less the same steps described in the Extend the HomePage model section in the official Wagtail documentation. We're using the Divio Shell, so some operations are slightly different, but the general idea should be familiar if you have used Wagtail already.)

Edit your Django settings

Add your application to Django's INSTALLED_APPS settings. Open up settings.py inside the project root in your preferred code editor and replace:

INSTALLED_APPS.extend([
    # add your project specific apps here
]

with:

INSTALLED_APPS.extend([
    # add your project specific apps here
    'home',
]) 

Create a new page type model

We need to extend the HomePage model. Open home/models.py and replace the entire file with:

from __future__ import unicode_literals
from django.db import models
from wagtail.wagtailcore.models import Page
from wagtail.wagtailcore.fields import RichTextField
from wagtail.wagtailadmin.edit_handlers import FieldPanel

class HomePage(Page):
    body = RichTextField(blank=True)
    content_panels = Page.content_panels + [
        FieldPanel('body', classname="full")
    ]

Create and run migrations

Now we need to create database migrations for our application, so Django knows which tables and fields need to be added to the database. In the Terminal, run:

docker-compose run --rm web python manage.py makemigrations home

Now run the migrations, to apply the changes to the database.

docker-compose run --rm web python manage.py migrate home  

Add a template for the new page type

In the folder templates/home/, add a file named home_page.html to create a template.

Note: due to a limitation in our vendor's platform, we are unable to display certain characters in the file you need here. Please open and copy home_page.html instead.

Create a base template for the project

We also need to create a base template. In the folder templates, add a file base.html: 

Note: due to a limitation in our vendor's platform, we are unable to display certain characters in the file you need here. Please open and copy base.html instead.

Add a new Wagtail page

Login to the Django admin at http://192.168.99.100:8000/en/django-admin/. Create a new user by hitting Add user and then sign in. (Learn more about how this works.)

In the Wagtail admin at http://192.168.99.100:8000/en/admin/pages/, add a new page by clicking Add Child Page:

Add a title and some content and press "Publish"

Now set the page as a root page in the Wagtail admin by going to Settings > Sites > localhost http://192.168.99.100:8000/en/admin/sites/. Select the localhost site. 

In the Root Page row select Choose a different Root Page and find the new sub-page of it that we just created:

Hit Save to continue.

Finally, go to your site - In the Wagtail Explorer, find your page and hit the Live button to see the published page, or visit http://192.168.99.100:8000/en.

Next steps

You've now created a new Django Wagtail site on Divio Cloud, deployed it locally in the Divio Shell, configured it at the Python level, and started editing it. The next step is to publish it on the web, using the Divio Cloud.

It's worth following our Get Started guide in its entirety to become properly familiar with the system and what you can do with it, but in the meantime, if you want to do it the quick way with a minimum of explanation, go straight to Step 5: Push changes to your server of that article - it'll show you how to push all your changes to the cloud and deploy the project live on the web.

Did this answer your question?