Wagtail Tutorial Series:
To learn more about Wagtail CMS, please check Build Blog With Wagtail CMS (4.0.0)
- Create Wagtail Project
- Modern Frontend Techs for Wagtail
- Dockerizing Wagtail App
- Add Blog Models to Wagtail
- How to write Wagtail page template
- Create Stylish Wagtail Pages with Tailwind CSS
- How to use StreamField in Wagtail
- Wagtail Routable Page
- Add Pagination Component to Wagtail
- Customize Wagtail Page URL
- Add Full Text Search to Wagtail
- Add Markdown Support to Wagtail
- Add LaTeX Support & Code Highlight In Wagtail
- How to Build Form Page in Wagtail
- How to Create and Manage Menus in Wagtail
- Wagtail SEO Guide
- Online Demo http://wagtail-blog.accordbox.com/
- Source code: https://github.com/AccordBox/wagtail-tailwind-blog
Wagtail Tips:
- Wagtail Tip #1: How to replace ParentalManyToManyField with InlinePanel
- Wagtail Tip #2: How to Export & Restore Wagtail Site
Write style in Wagtail:
- How to use SCSS/SASS in your Django project (Python Way)
- How to use SCSS/SASS in your Django project (NPM Way)
Other Wagtail Topics:
Objective
By the end of this chapter, you should be able to:
- Create a new Django project
- Integrate Wagtail into an existing Django project.
- Understand how Wagtail works with Django URL dispatcher.
Create Django Project
$ mkdir wagtail_project && cd wagtail_project
$ python3 -V
Python 3.10
# create virtualenv
$ python3 -m venv venv
$ source venv/bin/activate
You can also use other tools such as Poetry or Pipenv
Create requirements.txt
Django==4.1
(venv)$ pip install -r requirements.txt
(venv)$ django-admin startproject wagtail_app .
The last . in the command means creating the Django project in the current directory.
You will see structure like this
.
├── manage.py
├── requirements.txt
├── venv
└── wagtail_app
Now, let's get the project running on local env.
# create db tables
(venv)$ python manage.py migrate
(venv)$ python manage.py runserver
Check on http://127.0.0.1:8000/, and you should be able to see the Django welcome page
Integrate Wagtail
Add Wagtail CMS to requirements.txt.
wagtail==4.0.2 # new
(venv)$ pip install -r requirements.txt
Add the apps to INSTALLED_APPS in the wagtail_app/settings.py:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'wagtail.contrib.forms', # new
'wagtail.contrib.redirects',
'wagtail.embeds',
'wagtail.sites',
'wagtail.users',
'wagtail.snippets',
'wagtail.documents',
'wagtail.images',
'wagtail.search',
'wagtail.admin',
'wagtail',
'modelcluster',
'taggit',
]
Add the middleware to MIDDLEWARE in the wagtail_app/settings.py:
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
'wagtail.contrib.redirects.middleware.RedirectMiddleware', # new
]
Add other settings to the bottom of the wagtail_app/settings.py:
STATIC_URL = '/static/'
STATIC_ROOT = str(BASE_DIR / 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = str(BASE_DIR / 'media')
# Default primary key field type
# https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
WAGTAIL_SITE_NAME = 'My Project'
WAGTAILADMIN_BASE_URL = os.environ.get("WAGTAILADMIN_BASE_URL", "http://localhost:8000")
Next, let's edit wagtail_app/urls.py
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from wagtail.core import urls as wagtail_urls
from wagtail.admin import urls as wagtailadmin_urls
from wagtail.documents import urls as wagtaildocs_urls
urlpatterns = [
path('admin/', admin.site.urls),
path('cms/', include(wagtailadmin_urls)),
path('documents/', include(wagtaildocs_urls)),
# For anything not caught by a more specific rule above, hand over to
# Wagtail's serving mechanism
path('', include(wagtail_urls)),
]
if settings.DEBUG:
from django.conf.urls.static import static
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Notes:
- Wagtail's admin is on
/cms/ - Do not forget to put
path('', include(wagtail_urls))at the end of theurlpatterns, so URLs not handled by specific rules, would be handled by Wagtail. urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)can help Django to serve media files during development.
Now, all the config is done, let's run the Wagtail app
(venv)$ python manage.py migrate
(venv)$ python manage.py runserver
- Now if you visit http://127.0.0.1:8000/ you will see
Welcome to your new Wagtail site!. - The welcome page is created by
Wagtail migrationand you can check the source code here
Create Super User
(venv)$ python manage.py createsuperuser
# input username, email and password
Now visit http://localhost:8000/cms/ and try to login with the new created superuser.
And you can see the elegatn Wagtail admin UI.
Reference
Integrating Wagtail into a Django project
Wagtail Tutorial Series:
To learn more about Wagtail CMS, please check Build Blog With Wagtail CMS (4.0.0)
- Create Wagtail Project
- Modern Frontend Techs for Wagtail
- Dockerizing Wagtail App
- Add Blog Models to Wagtail
- How to write Wagtail page template
- Create Stylish Wagtail Pages with Tailwind CSS
- How to use StreamField in Wagtail
- Wagtail Routable Page
- Add Pagination Component to Wagtail
- Customize Wagtail Page URL
- Add Full Text Search to Wagtail
- Add Markdown Support to Wagtail
- Add LaTeX Support & Code Highlight In Wagtail
- How to Build Form Page in Wagtail
- How to Create and Manage Menus in Wagtail
- Wagtail SEO Guide
- Online Demo http://wagtail-blog.accordbox.com/
- Source code: https://github.com/AccordBox/wagtail-tailwind-blog
Wagtail Tips:
- Wagtail Tip #1: How to replace ParentalManyToManyField with InlinePanel
- Wagtail Tip #2: How to Export & Restore Wagtail Site
Write style in Wagtail:
- How to use SCSS/SASS in your Django project (Python Way)
- How to use SCSS/SASS in your Django project (NPM Way)
Other Wagtail Topics:
