search

AccordBox / wagtail-tailwind-blog

Wagtail blog based on Tailwind CSS, Stimulus, it supports Markdown, Latex and user comments.
https://leanpub.com/buildblogwithwagtailcms
369 stars 85 forks source link
stimulusjs tailwindcss wagtail wagtail-blog wagtail-cms-demo wagtail-tutorials

readme

Introduction

This open source project is for my book Build Blog With Wagtail CMS

You can support my work by purchasing the ebook

Other books written by me

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

How to run on local

$ git clone https://github.com/AccordBox/wagtail-tailwind-blog
$ cd wagtail-tailwind-blog

First, let's build frontend assets, please make sure node is available.

$ node -v

# install dependency packages
$ npm install

# launch webpack dev server and keep it running
$ npm run watch

You need Docker and Docker Compose and you can install it here Get Docker

# build and launch app
$ docker-compose up --build

Now open a new terminal to import data and change password.

$ docker-compose exec web python manage.py load_initial_data
$ docker-compose exec web python manage.py changepassword admin

Now you can check on

Demo

The demo is also online if you want to check.

Screenshot