Skip to content

Wagtail Live Tutorial

This tutorial describes how to build a live blog with Wagtail Live.

Install and run Wagtail Live

Create and activate a virtual environment

We recommend using a virtual environment, which isolates installed dependencies from other projects. This tutorial uses venv, which is packaged with Python 3.

Create a new virtual environment by running:

On Windows (cmd.exe):

> python3 -m venv livesite\livesite
> livesite\livesite\Scripts\activate.bat

On GNU/Linux or MacOS (bash):

$ python3 -m venv livesite/livesite
$ source livesite/livesite/bin/activate

For other shells see the venv documentation.

Install Wagtail Live and other dependencies

Use pip to install Wagtail and Wagtail Live:

$ python -m pip install wagtail
$ python -m pip install wagtail-live

Generate your site

Because the folder livesite was already created by venv, run wagtail start with an additional argument to specify the destination directory:

$ wagtail start livesite livesite

Create your first live page

Start a new liveblog app:

$ cd livesite
$ python3 manage.py startapp liveblog

You will then need to add wagtail_live and liveblog to your INSTALLED_APPS in your settings.base file: 

INSTALLED_APPS = [
    'home',
    'search',
    'liveblog',
    'wagtail_live',
    ...
    # Other apps
]

We can now create our first LiveBlogPage. Add the following in liveblog.models: 

from wagtail.core.models import Page

from wagtail_live.models import LivePageMixin

class LiveBlogPage(Page, LivePageMixin):
    content_panels = Page.content_panels + LivePageMixin.panels

We'll need to specify the path to our live page model as the value of the WAGTAIL_LIVE_PAGE_MODEL setting:

WAGTAIL_LIVE_PAGE_MODEL = "liveblog.models.LiveBlogPage"

Create a templates folder inside your liveblog app. Add a liveblog folder in the templates folder that you just created and create a live_blog_page.html file. This represents our LiveBlogPage template.

For now, add this to your live_blog_page.html template: 

{% include "wagtail_live/live_posts.html" %}
That's all we need in our models.

Configuring a publisher

The goal of publishers is to "publish" new updates to the frontend/client side.

Choose and configure a publisher from the following list:

Configure an input source and its corresponding receiver

We need an input source for our live blog.

An input source is a platform (often a messaging app, but any other tool that allows content editing and offers an API can be used) where we edit the content that appears on the front-end/client side.

We also need a receiver for our input source. The goal of a receiver is to receive/retrieve updates from an input source.

Choose an input source from the following list and configure its corresponding receiver:

That's it for the configuration part.

Create the database

Finally, let's create our tables and an admin user:

$ python3 manage.py makemigrations
$ python3 manage.py migrate
$ python3 manage.py createsuperuser

When logged into the admin site, a superuser has full permissions and is able to view/create/manage the database.

Liveblogging

Start the development server as following: 

$ python3 manage.py runserver

Go to http://127.0.0.1:8000/admin/ and create a new page of type LiveBlogPage.

You can choose the title you like for the page and fill the channel_id field with the ID of the channel you created in the input source chosen (Slack/Telegram).

Click on the Live button to display the page.

Enter the channel you created in the input source chosen and start posting.

You should see your posts in the page momentarily!