This course is designed for developers who are new to Wagtail CMS. Together, we'll create a brand new Wagtail website from scratch, and at the end we'll deploy it to the web. Here's a preview of the final website: Rocketman
If you're unsure whether this course is for you or not, consider the follow topics we'll be covering together, and if you're unfamiliar or not completely comfortable with all of these subjects then it's likely this course is for you.
Here are some additional bonuses to taking this course.
Additionally, this course comes with lifetime 24/7 access.
If you think you could benefit from a course like this, definitely enrol today and let's get started.
1. What is Wagtail? Free Lesson
Let's take a quick look at what Wagtail CMS is, and what it isn't.
2. Installing Wagtail
In this lesson you'll learn how to install Wagtail using Python's venv and Pipenv
3. Getting Started
Let's make our websites look the same. If you have a different design you want to work with you can safely ignore this lesson.
4. Logging into the admin Free Lesson
Wagtail comes with it's own admin interface. Let's sign in as a superuser.
5. Wagtail Walkthrough
If you've never used Wagtail before, this might be a helpful video. Skip this lesson if you're already familiar with the Wagtail Admin.
6. Editing the Home Page
Wagtail gives us a Home Page to start. Let's modify this a little bit to kickstart our new website.
7. Working with the Base Template
Every template comes from base.html when you start a new project. In this lesson we'll explore this template a bit more.
8. Services App (and new pages)
We'll create a brand new Django app and create a couple Wagtail Pages from scratch.
9. Service Page
In our Services app we'll need two custom Wagtail pages. The first one is the Service Page (Service Detail Page)
10. Service Listing Page
The Service Listing Page is going to be a mostly-automated page that automatically pulls in the available services from all the Service Pages you created in the previous lesson.
11. Custom Page Validation
Wagtail and Django aren't perfect and they don't know our intentions. With custom page validation we can guide people to enter content properly.
12. Adding a Header and Footer
Our Rocketman website needs a header (nav) and footer. Let's add those in now.
13. Adding Debug Tools
Like working in a trade, you need a good set of tools. Let's explore a couple very helpful options for debugging your code like a pro.
14. Flexible (Misc.) Pages
Most websites need a "general purpose" page. We'll create a new app and Wagtail page just for this. This is the start of our Flexible Page type — we'll add more to it in the future.
15. Using Django Models with Wagtails ModelAdmin
In this video we'll create a regular Django Model and enable Wagtail's ModelAdmin so we can edit it!
16. Welcome to StreamFields Free Lesson
StreamFields are one of Wagtails most unique features. They let you move entire sections of content around your page. In this lesson I'll describe what they are and how they're used.
17. Creating the StreamField App
StreamFields don't NEED their own app, but to keep our code nice and organized we'll create a new app so we can store all our StreamFields and Blocks in one file.
18. Your First StreamField
In this lesson we'll create our first StreamField! 🎉
19. Repeating StreamField Blocks
There's a really nice way to add repeating content in a single StreamField Block. In this lesson we'll dive into Wagtails ListBlock feature.
20. Simplifying Repeating StreamField Blocks
Wagtail's ListBlock feature is powerful, but it can get REALLY big and hard to read quite easily. Let's separate this out into their own classes and save our sanity.
21. Custom StreamField (Block) Logic
StreamField blocks can have additional logic beyond the content the user enters. In this lesson we'll explore how to add custom logic and simplify our templates.
22. Image and Text StreamField Block
Together we'll create a new block that let's us select an image and provide some custom text.
23. Custom Radio Select Block
Let's swap out a dropdown list for a radio list.
24. Call to Action StreamField Block
Let's create another fairly simple block that helps guide our website viewers to an action.
25. Django Models, Wagtail ModelAdmin, and Registering Snippets
Let's integrate pure Django into Wagtail with a plain Django Model. We'll register it with Wagtails ModelAdmin and also register it as a Snippet so we can re-use testimonials later.
26. Table StreamField Block
Tables are old HTML from last century, and we don't use them too often anymore. But occasionally there's a good reason to use a Table and luckily Wagtail has this built it.
27. RichText StreamField Block
Let's create a new StreamField block that allows headers, lists, images, bold, italic and much more! No more writing HTML in your CharFields.
28. Image Chooser Block
Learn how to create a simple StreamField with just an image in it, and how to work with it in the template.
29. Custom StreamField Block Validation
Occasionally we need to bend the rules a bit — like allowing a content editor to have an external link or select a Wagtail page. Let's limit this so they can't do both.
30. Limiting Pages
It doesn't make sense to have a Home Page nested under a Home Page. In this lesson we'll limit where pages can be created (ie. Service Pages can only live under the Service Listing Page).
31. Create a Navigation System from Scratch
Navigation doesn't need to be hard. In this lesson we'll take the slightly more complex route (but not the most complex!) to get an understanding of Orderables, Clusterable Models, and Template Tags.
32. Navigation Templates
Now we'll work with our templates to display our navigation menu.
33. Contact Forms: Part 1
Contact forms are important on a website. Let's get the initial contact form setup.
34. Contact Forms: Part 2
Contact forms are a big feature. We'll finish off our Contact Page in this lesson.
35. Limiting Contact Form Choices
If you don't want to support every form field type in your contact form, we can remove the ones we don't want and only show the ones we want to support. This is optional.
36. Adding .webp Image Support Free Lesson
.webp is a new age image format with high compression and very low quality loss. Google loves these. Most browsers support these. Let's create a .webp image from a regular .png using Wagtail.
37. Additional Ways to Learn Wagtail
Courses like this are great! But there are other ways to learn Wagtail and in this lesson I'll show you a few different ways I continue to learn Wagtail.
38. Global Site Settings
Thinks like social media links are often set as a global site setting. This feature allows you access the setting on every page.
39. Changing the Wagtail Admin Logo
Sometimes the biggest win for your website (or client) is a simple branding change. Using their brand colors and their logo is a big win. Let's swap out Wagtails bird logo for something custom.
40. Adding Caching
Let's add a form of caching to our website to speed it up. We'll use the simplest and most powerful form of caching in this lesson.
41. Caching the Navigation and Footer
Navigation menus and footer links often bloat our page with queries that don't change very often. By caching these requests to the database, we can significantly boost our websites performance.
42. Adding a Sitemap
Search engines look for a sitemap.xml or sitemap.html file. It's a simple file that tells engines like Google which pages to scrape and index. Every Wagtail page can be easily added to your sitemap.
43. Preparing for Launch
Let's get our website ready for production by working with our production.py file. We'll also install an error monitor application to help us log and debug issues on our live website.
44. Launching Your Website
🎉🎉 Let's launch this website! We'll use Digital Ocean, Ubuntu 18, Postgres, Nginx and Gunicorn. We'll setup this new server from scratch 🎉🎉