Wagtail Tutorial Series

eBooks

I started writing blog posts about Wagtail CMS since 2017, some content and code might be a little outdated.

You can check the ebooks below to get the latest learning resources maintained by me.

• Build Blog With Wagtail CMS (second version): This book will teach you how to build a modern blog with Wagtail CMS
• The Definitive Guide to Next.js and Wagtail Build Jamstack web app with Next.js and Wagtail CMS.
• Build SPA with React and Wagtail: This book will teach you how to build a SPA (single-page application) with React and Wagtail CMS
• Build Blog with React (SSR) and Wagtail: This book will teach you how to build a blog with React, Wagtail CMS and SSR (Server-Side Rendering), which has good performance and good SEO.

The above ebooks build four projects which have similar features, but in different way. They can also help you have better understanding of the modern frontend tech and infrastructure.

Table of Contents:

Review

• Python CMS Framework Review: Wagtail vs Django-CMS In this Python CMS review article, I will talk and compare Django CMS and Wagtail CMS, the two most popular CMS frameworks in Python world.

Build Blog With Wagtail

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

The source code is available on https://github.com/AccordBox/wagtail-bootstrap-blog

Below posts are a little outdated, some code might not work with the latest Wagtail:

• Wagtail Tutorials #7: Add Search Function In Wagtail Blog In this wagtail tutorial, I will teach you how to add search function in wagtail blog so the user can filter the posts through the keywords.
• Wagtail Tutorials #8: Add Markdown Support In Wagtail Blog In this wagtail tutorial, I will show you how to add Markdown support to our wagtail blog.
• Wagtail Tutorials #9: Add LaTeX Support & Code Highlight In Wagtail In this tutorial, I will talk about how to add Latex support and code highlight support in our wagtail blog application.
• Wagtail Tutorials #10: Add Comment Support In Wagtail Blog In this chapter, I will talk about how to add comment support to our Wagtail Blog.
• Wagtail Tutorial #11: How to use StreamField in Wagtail I will talk about the StreamField feature of Wagtail in detail and I must say StreamField is one of the most amazing features in Wagtail.
• Wagtail Tutorial #12: How to Create and Manage Menus of Wagtail application We would learn how menu in Wagtail works, and how to create a powerful menu using wagtailmenus package.

Advanced Features

• How to do A/B Testing in Wagtail CMS In this Wagtail tutorial, I will show you how to do split testing (A/B testing) in Wagtail CMS.
• How to build form page in Wagtail I will teach you how to build form page using Wagtail's FormBuilder.
• How to build a landing page using Wagtail CMS In this Wagtail CMS tutorial, I will teach you how to build a simple landing page using Wagtail
• How to make your Wagtail/Django project have good Python coding style In this Wagtail tutorial, I will teach you how to check coding style for your Wagtail/Django project, how to fix it and how to keep it clean and concise.
• How to support multi-language in Wagtail CMS In this blog post, I will talk about how to support multi-language in Wagtail CMS
• Wagtail SEO Guide In this Wagtail tutorial, I would talk about something which can help SEO in Wagtail

Wagtail Tips

• Wagtail Tip #1: How to replace ParentalManyToManyField with InlinePanel In this Wagtail tip, I will talk about How to replace ParentalManyToManyField using Wagtail InlinePanel
• Wagtail Tip #2: How to Export & Restore Wagtail Site You will learn how to how to export & restore wagtail site using Django dumpdata & loaddata command

Write theme for Wagtail project

I have seen many people are still using old CSS to add style to their Wagtail projects.

So I wrote some posts to help them write SCSS instead of CSS in Wagtail projects, I think SCSS is better and I strongly recommend you to give it a try.

• How to use SCSS/SASS in your Django project (Python Way) In this blog post, I will talk about how to use SCSS/SASS in your Django project with Python package.
• How to use SCSS/SASS in your Django project (NPM Way) In this blog post, I will talk about how to use SCSS/SASS in your Django project with NPM.

How to deploy your Wagtail project

• How to deploy Wagtail project to Heroku with Docker I will show you how to use Docker to deploy your project on Heroku, you can also use the code to deploy Wagtail on AWS if you prefer.
• How to deploy Django project to Dokku In this Dokku tutorial, I will talk about how to deploy Django project with Dokku, it would use Postgres db and Amazon S3 to store data and media files.
• How to deploy Django project to Dokku with Docker In this post, I will talk about how to deploy Django project to Dokku with Docker.