Build Blog With Wagtail CMS (4.0.0) Released

Introduction

In 2017, I published the first version of Build Blog With Wagtail CMS, which aims to teach people how to build a modern blog using Wagtail CMS. (Wagtail 1.10.1, Django 2.2)

1. 2.0.0 is released in Jan 2021 (Wagtail 2.11, Django 3.1)
2. 3.0.0 is released in Aug 2021 (Wagtail 2.14, Django 3.2)

Today, 4.0.0 is finally released! 😀

What is New

Wagtail 4

Below are some important changes in Wagtail 4

1. Wagtail 4 brings significant UI changes that affect all of Wagtail’s admin
2. The richtext editor is more powerful, for example, it has command palette
3. Live preview can let you check the page content real time.

You can check Wagtail 4 release notes to know more.

In this book, we will use Wagtail 4 and Django 4, both are the latest version.

Tailwind CSS

Bootstrap is a little outdated, now more and more people are using Tailwind CSS

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces

If you have no idea what it is, please check the official website to learn more.

We will use Tailwind CSS as our style solution and learn some interesting stuff such as typography plugin and dark mode with css class

FYI Wagtail admin also starts using Tailwind CSS https://github.com/wagtail/wagtail/blob/v4.1/client/tailwind.config.js

Stimulus

jQuery is obsolete and we should stop using it.

What should we do if we need to write some Javascript to do some DOM manipulation?

We need a lightweight but powerful javascript framework, which works fine as our project grow, and it should be easy to learn because many Wagtail developers do not want to touch heavy frontend frameworks such as React, Vue.

Stimulus is a good fit

1. Stimulus is the official frontend solution shipped with Ruby on Rails, and it can also work with any backend framework such as Django, Laravel
2. If you have no idea what Stimulus is, please visit Stimulus Doc to do quick check

In this book, I will teach you how to use Stimulus to write reusable Stimulus controller to manipulate DOM, handle DOM events.

BTW, Wagtail team also decided to use Stimulus to replace jQuery in Wagtail admin, here is the PR https://github.com/wagtail/rfcs/pull/78 if you want to know more.

Objective

This book will teach you how to build a modern blog with Wagtail CMS

By the end of this course, you will be able to:

1. Understand Docker and use Docker Compose to do development
2. Use python-webpack-boilerplate to jump start frontend project bundled by Webpack.
3. Install Tailwind CSS as the style solution.
4. Install Stimulus, understand how it works and write Stimulus controllers.
5. Learn how Dark Mode works in Tailwind CSS and use Stimulus controller to toggle the dark mode.
6. Understand the benefit of the healthy Stimulus ecosystem by reusing 3-party Stimulus controller.
7. Create blog models to work with Wagtail.
8. Use PDB and Django shell to debug, test code and check data in terminal.
9. Learn to use RoutablePage and add Date to the post url.
10. Build Pagination component and correctly handle querystring.
11. Make the blog supports writing in Markdown and Latex.
12. Create contact page using Wagtail FormBuilder
13. Build menu, meta tags, sitemap, robots.txt for better SEO.
14. Build comment system based on django-contrib-comments which support Generic Relations
15. Use Tribute.js, Axios to add Mention and Emoji support to the comment form.
16. Deploy the production app to DigitalOcean

Tech

• Python 3.10
• Django 4
• Wagtail 4
• Stimulus 3
• Tailwind CSS 3

What included

1. A PDF ebook which contains about 30 chapters.
2. 20+ screenshots and several diagrams, all created by me.
3. The source code is available on the Github/wagtail-tailwind-blog

Demo

The demo is also online if you want to check.

• Wagtail Blog Demo

Table of Contents

1. Introduction
2. Create Wagtail Project
3. Create Frontend App
4. Dockerizing Wagtail App
5. Add Blog Models to Wagtail
6. Page Templates in Wagtail
7. Build Page Layout with Tailwind CSS
8. StreamField in Wagtail
9. Routable Page
10. Add Pagination Component
11. Add Date to the PostPage URL
12. Full Text Search
13. Markdown Support
14. Customize Markdown Renderer
15. Build Flexible Form Page
16. Menu Management
17. Wagtail SEO Guide
18. Stimulus Basic
19. Dark Mode
20. Tailwind Typography Dark Mode
21. Carousel
22. Comment Model
23. Customize Django-Contrib-Comments
24. Manage Comment in Wagtail
25. Add Mention Support to Django Form with Tribute.js
26. Add Emoji Support to Django Form with Tribute.js
27. Deploy to DigitalOcean
28. Next Steps
29. Backend FAQ

Get the Book

Build Blog With Wagtail CMS (v4.0.0)