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 3.x
  • Type: Wagtail
  • Boilerplates: Blank Boilerplate

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

Note: Our standard Wagtail is version 2.x. Wagtail 2.x requires at least Django 1.11, so you will need to ensure the version of the Aldryn Django addon is set appropriately:

  • Select Addons from the menu at the left.
  • Select Aldryn Django from the list of addons.
  • If it's not already on version 1.11 or newer, update it.

Now deploy the project's Test server.

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 provided 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:

    # add your project specific apps here


    # add your project specific apps here

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:

{% extends "base.html" %} 

{% load wagtailcore_tags %}

{% block body_class %} template-homepage {% endblock %}

{% block content %}
{{ page.body | richtext }}
{% endblock %}

Create a base template for the project

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

{% load wagtailuserbar %}

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->    <title>{% block title %}{% if self.seo_title %}{{ self.seo_title }}{% else %}{{ self.title }}{% endif %}{% endblock %}{% block title_suffix %}{% endblock %}</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

    {% block extra_css %}
      {# Override this in templates to add extra stylesheets #}
    {% endblock %}
  <body class="{% block body_class %}{% endblock %}"> {# Override this block to set custom body classes on a template by template basis #}

    {% wagtailuserbar %}

    <div class="main container">
      {% block heading %}
      <div class="page-header">
        <h1>{{ self.title }}</h1>
      {% endblock %}

      {% block content %}{% endblock %}

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    {% block extra_js %}
      {# Override this in templates to add extra javascript #}
    {% endblock %}


Add a new Wagtail page

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

In the Wagtail admin at /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. 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.

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?