Wagtail Tutorial Series:

1. Create Wagtail Project
2. Dockerizing Wagtail App
3. Add Blog Models to Wagtail
4. How to write Wagtail page template
5. Add Bootstrap Theme to Wagtail
6. How to use StreamField in Wagtail
7. Wagtail Routable Page
8. Add pagination component to Wagtail
9. Customize Wagtail Page URL
10. Add Full Text Search to Wagtail
11. Add Markdown Support to Wagtail
12. Add LaTeX Support & Code Highlight In Wagtail
13. How to Build Form Page in Wagtail
14. How to Create and Manage Menus in Wagtail
15. Wagtail SEO Guide
16. Source code: https://github.com/AccordBox/wagtail-bootstrap-blog

Wagtail Tips:

1. Wagtail Tip #1: How to replace ParentalManyToManyField with InlinePanel
2. Wagtail Tip #2: How to Export & Restore Wagtail Site

Write style in Wagtail:

1. How to use SCSS/SASS in your Django project (Python Way)
2. How to use SCSS/SASS in your Django project (NPM Way)

Other Wagtail Topics:

1. How to make Wagtail project have good coding style
2. How to do A/B Testing in Wagtail CMS 
3. How to build a landing page using Wagtail CMS 
4. How to support multi-language in Wagtail CMS 

More Wagtail articles and eBooks written by me

Objective

By the end of this chapter, you should be able to:

1. Create a Wagtail project with wagtail start and understand how it works
2. Have good understanding of the Wagtail project structure

Create Wagtail Project

$ mkdir wagtail_project && cd wagtail_project
$ python3 -m venv env
$ source env/bin/activate

You can also use other tools such as Poetry or Pipenv

Let's install Wagtail

(env)$ pip install wagtail

Next, let's use wagtail command to create a project for us.

(env)$ wagtail start wagtail_bootstrap_blog .

Now, let's get the project running on local env.

# create db tables
(env)$ python manage.py migrate
(env)$ python manage.py runserver

Now you can visit http://127.0.0.1:8000/ and you will see a welcome page of Wagtail

Please press CTRL-C to terminate the server.

Next, let's keep learning this great project.

Notes:

1. If you want to know how wagtail start work, you can take a look at the source code you will see it run django startproject command with the custom project template
2. The project template is on Github: Wagtail

Project structure

You have file structure like this

.
├── Dockerfile
├── db.sqlite3
├── env
├── home
├── manage.py
├── requirements.txt
├── search
└── wagtail_bootstrap_blog

Notes:

1. Dockerfile is for docker deployment.
2. db.sqlite3 is a local db file, here we did not specify Wagtail to use other db so default sqlite is used by default.
3. home and search are Django apps created by Wagtail.

Let's check files in wagtail_bootstrap_blog directory

├── __init__.py
├── settings
│   ├── __init__.py
│   ├── base.py
│   ├── dev.py
│   └── production.py
├── static
│   ├── css
│   │   └── wagtail_bootstrap_blog.css
│   └── js
│       └── wagtail_bootstrap_blog.js
├── templates
│   ├── 404.html
│   ├── 500.html
│   └── base.html
├── urls.py
└── wsgi.py

Notes:

1. settings/base.py is the base settings, settings/dev.py is for development and settings/production.py is for production.
2. static contains all static assets used by our Wagtail project.
3. templates contains all Django templates.

Home

Let's take a look at home/migrations/0002_create_homepage.py

def create_homepage(apps, schema_editor):
    # Get models
    ContentType = apps.get_model('contenttypes.ContentType')
    Page = apps.get_model('wagtailcore.Page')
    Site = apps.get_model('wagtailcore.Site')
    HomePage = apps.get_model('home.HomePage')

    # Delete the default homepage
    # If migration is run multiple times, it may have already been deleted
    Page.objects.filter(id=2).delete()

    # Create content type for homepage model
    homepage_content_type, __ = ContentType.objects.get_or_create(
        model='homepage', app_label='home')

    # Create a new homepage
    homepage = HomePage.objects.create(
        title="Home",
        draft_title="Home",
        slug='home',
        content_type=homepage_content_type,
        path='00010001',
        depth=2,
        numchild=0,
        url_path='/home/',
    )

    # Create a site with the new homepage set as the root
    Site.objects.create(
        hostname='localhost', root_page=homepage, is_default_site=True)

Notes:

1. When we run python manage.py migrate, the create_homepage is executed, which create default home_page and set it as root_page of the localhost site. That is the page we just saw on localhost:8000

Please check home/templates/home/home_page.html, which is the template of the home page

{% extends "base.html" %}
{% load static %}

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

{% block extra_css %}

{% comment %}
Delete the line below if you're just getting started and want to remove the welcome screen!
{% endcomment %}
<link rel="stylesheet" href="{% static 'css/welcome_page.css' %}">
{% endblock extra_css %}

{% block content %}

{% comment %}
Delete the line below if you're just getting started and want to remove the welcome screen!
{% endcomment %}
{% include 'home/welcome_page.html' %}

{% endblock content %}

Notes:

1. {% include 'home/welcome_page.html' %} is the key point here, it make home page display some user friendly welcome message instead of some boring text which has no style.

Reference

Integrating Wagtail into a Django project

Resources

The source code is available Github/wagtail-bootstrap-blog

Wagtail Tutorial Series:

1. Create Wagtail Project
2. Dockerizing Wagtail App
3. Add Blog Models to Wagtail
4. How to write Wagtail page template
5. Add Bootstrap Theme to Wagtail
6. How to use StreamField in Wagtail
7. Wagtail Routable Page
8. Add pagination component to Wagtail
9. Customize Wagtail Page URL
10. Add Full Text Search to Wagtail
11. Add Markdown Support to Wagtail
12. Add LaTeX Support & Code Highlight In Wagtail
13. How to Build Form Page in Wagtail
14. How to Create and Manage Menus in Wagtail
15. Wagtail SEO Guide
16. Source code: https://github.com/AccordBox/wagtail-bootstrap-blog

Wagtail Tips:

1. Wagtail Tip #1: How to replace ParentalManyToManyField with InlinePanel
2. Wagtail Tip #2: How to Export & Restore Wagtail Site

Write style in Wagtail:

1. How to use SCSS/SASS in your Django project (Python Way)
2. How to use SCSS/SASS in your Django project (NPM Way)

Other Wagtail Topics:

1. How to make Wagtail project have good coding style
2. How to do A/B Testing in Wagtail CMS 
3. How to build a landing page using Wagtail CMS 
4. How to support multi-language in Wagtail CMS 

More Wagtail articles and eBooks written by me