The Wagtail CMS Bundle

This is my #4 eBook of Wagtail, and I wish to talk about the new architecture (Jamstack) in this book.

Jamstack stands for Javascript, API and Markup (generated by a static site generator)

1. The frontend app will be prebuilt into highly optimized static pages (Markup) and assets, and deployed to the CDN netowrk.
2. Frontend app will use Javascript and API to talk to backend service, to enable dynamic content on some pages.

Jamstack has below benefits:

1. Because the pages are prebuilt and served from CDN, pages can load FAST.
2. The reduced complexity make the site more secure.
3. Easy to scale when traffic grow.

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

1. Understand Docker and use Docker Compose to do development
2. Create blog models to work with Wagtail.
3. Learn how to write serializer for Django models.
4. Build a REST API for Wagtail CMS
5. Use the factory package to help create test data
6. Test the REST API and generate test coverage report
7. Create Next.js project with create-next-app
8. Learn React Function Component, and React hooks.
9. Use Tailwind CSS to build clean and responsive UI.
10. Understand how Next.js page route works.
11. Use next/image to do browser native lazy loading
12. Make Wagtail preview work with the Next.js.
13. Build comment system based on django-contrib-comments which support Generic Relations
14. Use Tribute.js to add Mention and Emoji support to the comment form.
15. Learn to use React Query to build lazy load comment list.
16. Test React component using Jest and @testing-library family of packages.
17. Deploy the Next.js to the Netlify.
18. Deploy the backend API to DigitalOcean

Tech

• Python 3.10
• Django 4.1
• Wagtail 4.1
• Next.js 13
• Tailwind 3
• React Function Component, React Hooks
• React Query
• Tribute.js
• Jest

Changelog:

2.0.0

Released 2022-12-21

• Use Tailwind CSS as style solution.
• Use React Query to replace SWR
• Use Next image to do browser native lazy loading
• Add Sitemap and Robots.txt
• Upgrade Django 4, Wagtail 4, update the screenshots

1.0.0

2021-08-16: First release

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

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

1. Understand Docker and use Docker Compose to do development
2. Create blog models to work with Wagtail.
3. Learn how to write serializer for Django models.
4. Build a REST API for Wagtail CMS
5. Use the factory package to help create test data
6. Test the REST API and generate test coverage report
7. Build a React app from create-react-app
8. Learn React Function Component, and React hooks.
9. Use Tailwind CSS to build clean and responsive UI.
10. Understand React router
11. Make React app work with Wagtail preview
12. Build comment system based on django-contrib-comments which support Generic Relations
13. Use Tribute.js to add Mention and Emoji support to the comment form.
14. Learn to use React Query to build lazy load comment list.
15. Test React component using Jest and @testing-library family of packages.
16. Deploy the production app to DigitalOcean

Tech

• Python 3.10
• Django 4.1
• Wagtail 4.1
• Tailwind 3
• React Function Component, React Hooks
• React Router
• React Query
• Tribute.js
• Jest

This book includes:

1. A PDF ebook which contains about 30 chapters.
2. 30+ screenshots and diagrams, all created by me.
3. The source code of the project created in this course.

Changelog:

3.0.0

Released 2022-12-22

1. Upgrade Tailwind 3
2. Use React Query to replace SWR
3. Upgrade Django 4, Wagtail 4, update the screenshots.

2.0.0

Released 2021-09-22

1. Use Tailwind CSS to replace the Bootstrap, add dark mode support
2. Add comment support
3. Rewrite with React functional component
4. Upgrade to Django 3.2 and Wagtail 2.14

1.0.0

• 2020-12-05: First release

Demo Link

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.

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

1. Understand Docker and use Docker Compose to do development
2. Create blog models to work with Wagtail.
3. Use PDB and Django shell to debug, test code and check data in terminal.
4. Learn how to write serializer for Django models.
5. Use the factory package to help create test data
6. Create React project from python-webpack-boilerplate and load it in Django template.
7. Understand React Components and the component lifecycle
8. Test React component using Jest and @testing-library family of packages.
9. Understand difference between CSR and SSR, and what is Rehydration
10. Learn how to server-render React component using django-react-templatetags and hypernova
11. Deploy the production app to DigitalOcean

Tech

• Django 3.1
• Wagtail 2.12
• Webpack 5
• React
• Hypernova

This book includes:

1. A PDF ebook which contains about 30 chapters.
2. 20+ screenshots and several diagrams, all created by me.

Demo Link

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

This book includes:

1. A PDF ebook which contains about 30 chapters.
2. 20+ screenshots and several diagrams, all created by me.

Changelog:

4.0.0 Released 2022-11-07

1. Drop Bootstrap, and use Tailwind CSS as style solution.
2. Use Stimulus to help write Javascript.
3. Upgrade Django, Wagtail, update the screenshots.

3.0.0 Released 2021-08-23

1. Upgrade Django, Wagtail, update the screenshots.
2. Import python-webpack-boilerplate as frontend solution
3. Upgrade Bootstrap 5, drop jQuery, write DOM related code with vanilla JavaScript

2.0.0 Released 2021-01-09

1. Rewrite the book and source code, update the screenshots.
2. Add content about docker-compose and docker
3. Add content about the django-contrib-comments
4. Add content about the Webpack

1.0.0 Released 2017-09-13