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)
2.0.0is released in Jan 2021 (Wagtail 2.11, Django 3.1)
3.0.0is released in Aug 2021 (Wagtail 2.14, Django 3.2)
4.0.0 is finally released! 😀
What is New
Below are some important changes in Wagtail 4
- Wagtail 4 brings significant UI changes that affect all of Wagtail’s admin
- The richtext editor is more powerful, for example, it has
- 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.
Bootstrap is a little outdated, now more and more people are using
Tailwind CSSis 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
jQuery is obsolete and we should stop using it.
Stimulus is a good fit
Stimulusis the official frontend solution shipped with
Ruby on Rails, and it can also work with any backend framework such as Django, Laravel
- If you have no idea what
Stimulusis, 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.
This book will teach you how to build a modern blog with
By the end of this course, you will be able to:
Docker Composeto do development
python-webpack-boilerplateto jump start frontend project bundled by Webpack.
Tailwind CSSas the style solution.
Stimulus, understand how it works and write Stimulus controllers.
- Learn how
Dark Modeworks in Tailwind CSS and use Stimulus controller to toggle the dark mode.
- Understand the benefit of the healthy Stimulus ecosystem by reusing 3-party Stimulus controller.
- Create blog models to work with Wagtail.
Django shellto debug, test code and check data in terminal.
- Learn to use
Dateto the post url.
Paginationcomponent and correctly handle querystring.
- Make the blog supports writing in
- Create contact page using Wagtail
- Build menu, meta tags, sitemap, robots.txt for better SEO.
- Build comment system based on
Emojisupport to the comment form.
- Deploy the production app to DigitalOcean
- Python 3.10
- Django 4
- Wagtail 4
- Stimulus 3
- Tailwind CSS 3
- A PDF ebook which contains about 30 chapters.
- 20+ screenshots and several diagrams, all created by me.
- The source code is available on the Github/wagtail-tailwind-blog
The demo is also online if you want to check.
Table of Contents
- Create Wagtail Project
- Create Frontend App
- Dockerizing Wagtail App
- Add Blog Models to Wagtail
- Page Templates in Wagtail
- Build Page Layout with Tailwind CSS
- StreamField in Wagtail
- Routable Page
- Add Pagination Component
- Add Date to the PostPage URL
- Full Text Search
- Markdown Support
- Customize Markdown Renderer
- Build Flexible Form Page
- Menu Management
- Wagtail SEO Guide
- Stimulus Basic
- Dark Mode
- Tailwind Typography Dark Mode
- Comment Model
- Customize Django-Contrib-Comments
- Manage Comment in Wagtail
- Add Mention Support to Django Form with Tribute.js
- Add Emoji Support to Django Form with Tribute.js
- Deploy to DigitalOcean
- Next Steps
- Backend FAQ