Build Blog With Wagtail CMS (4.0.0) Released

Michael Yin

Last updated on November 07 2022

Table of Contents

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.

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)

Launch Products Faster with Django

SaaS Hammer helps you launch products in faster way. It contains all the foundations you need so you can focus on your product.

Michael Yin

Michael is a Full Stack Developer from China who loves writing code, tutorials about Django, and modern frontend tech.

He has published some ebooks on leanpub and tech course on testdriven.io.

He is also the founder of the AccordBox which provides the web development services.

Table of Contents

Django SaaS Template

It aims to save your time and money building your product, developed by Michael Yin

Learn More

This book will teach you how to build a SPA (single-page application) with React and Wagtail CMS

Read More

Subscribe

Get notified about new great Web Development Tutorial