Blog Site with Django + Wagtail CMS : Complete Project Tutorial | Beginner Friendly Guide

Piko Can Fly • November 25, 2024
Video Thumbnail
Piko Can Fly Logo

Piko Can Fly

@pikocanfly

About

I like making things easier.

Video Description

In this step by step tutorial we will create a robust and feature-rich blog application using Wagtail CMS, a modern and flexible content management system built on top of Django. Whether you're new to web development or looking to expand your skills, this project will guide you through creating a dynamic and visually appealing blog platform with ease. Our blog will include basic and advanced features such as: - Blog Index Page: Displays posts in reverse chronological order, each with an introduction, body, tags, and support for multiple authors. - Tagging System: Categorize and filter posts effectively, with a dedicated Tag Index Page for browsing tagged content. - Image Galleries: Add image galleries with captions to blog posts, with the first image automatically used as a thumbnail. - Author Management: Centrally manage authors using Wagtail snippets, complete with names and profile images. - Customizable Admin Interface: Includes inline panels, RichText editing, and convenient checkboxes for managing tags, authors, and images. - Integrated Search: Indexes blog content for quick retrieval and better user experience. 📌 Timestamps: 00:00 - Introduction: Building a Feature-Rich Blog with Wagtail 00:16 - Wagtail CMS Admin Demo 02:17 - Set Up: Create Project Directory and Virtual Environment 03:20 - Install Wagtail and Start a New Project 04:05 - Database Setup and First Migration 04:58 - Create Superuser and Launch Admin Site 06:18 - Home Page Customization: Templates and RichText Fields 09:33 - Adding RichText Fields and Migrating Changes 13:53 - Create Blog App and Register Models 15:43 - Define Blog Models: Blog Index and Blog Post 18:43 - Add Image Gallery Model with Captions 19:26 - Set Up One-to-Many Relationship with Model Cluster 22:02 - Inline Panels for Image Gallery in Blog Post Admin 23:54 - Create Author Snippets for Reusable Author Profiles 25:53 - Define Many-to-Many Relationship for Blog Posts and Authors 27:36 - Implement Tagging System Using ClusterTaggableManager 30:55 - Update Database and Add Blog Index Page via Admin 34:13 - Create Blog Templates Following Wagtail Naming Conventions 37:19 - Adding CSS and Static Files for Styling 39:48 - Add Blog Posts with Authors and Galleries via Admin 42:19 - Create and Publish a Blog Post 45:56 - Render Authors and Author Images in Templates 51:33 - Render Image Galleries in Blog Post Template 53:47 - Display Tags and Add Tag Filter Functionality 57:16 - Create Tag Index Page Template and Add Tag Filtering 59:40 - Filter Blog Posts by Tag in Templates 01:04:19 - Add Navigation Links (e.g., Return to Blog Button) 01:05:10 - Filter Blog Posts by Newest First in Blog Index Page 01:08:18 - Create Method for Blog Post Thumbnails 01:14:03 - Enhance Blog Aesthetics with CSS Styling 01:27:26 - Display Revision Dates for Blog Posts 01:28:34 - Add Wagtail’s Search Integration and Rebuild Index 01:30:14 - Implement Search Feature on Blog Index Page 01:32:40 - Add RichText Links and Style Tags as Buttons 01:39:27 - Display Captions for Images in Templates 01:39:59 - We did it! 🎉 Our Blog is Complete! 🔗Important links: - Wagtail Newsletter : https://wagtail.org/newsletter/ - Wagtail on YT : https://www.youtube.com/@wagtailcms - Wagtail documentation : https://docs.wagtail.org/en/stable/ - Django documentation : https://docs.djangoproject.com/en/5.1/ Source Code: https://github.com/PikoCanFly/blog-site-wagtail-django ----- If you're considering hosting your app on DigitalOcean, it’d be awesome if you used my referral link! You'll get $200 in free credits, and I'll get $25. Here is the link: https://m.do.co/c/58e570dc13ea #Django #WagtailCMS #webdev #python #fullstack