Welcome to Wagtail for Beginners!
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's what we'll be learning:
And here are some bonuses this course comes with:
If you think you could benefit from a course like this, definitely enroll today and let's get started.
Let's take a quick look at what Wagtail CMS is, and what it isn't.
In this lesson you'll learn how to install Wagtail using Python's venv and Pipenv
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.
Wagtail comes with it's own admin interface. Let's sign in as a superuser.
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.
Wagtail gives us a Home Page to start. Let's modify this a little bit to kickstart our new website.
Every template comes from base.html when you start a new project. In this lesson we'll explore this template a bit more.
We'll create a brand new Django app and create a couple Wagtail Pages from scratch.
In our Services app we'll need two custom Wagtail pages. The first one is the Service Page (Service Detail 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.
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.
Our Rocketman website needs a header (nav) and footer. Let's add those in now.
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.
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.
In this video we'll create a regular Django Model and enable Wagtail's ModelAdmin so we can edit it!
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.
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.
In this lesson we'll create our first StreamField! 🎉
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.
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.
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.
Together we'll create a new block that let's us select an image and provide some custom text.
Let's swap out a dropdown list for a radio list.
Let's create another fairly simple block that helps guide our website viewers to an action.
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.
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.
Let's create a new StreamField block that allows headers, lists, images, bold, italic and much more! No more writing HTML in your CharFields.
Learn how to create a simple StreamField with just an image in it, and how to work with it in the template.
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.
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).
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.
Now we'll work with our templates to display our navigation menu.
Contact forms are important on a website. Let's get the initial contact form setup.
Contact forms are a big feature. We'll finish off our Contact Page in this lesson.
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.
.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.
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.
Thinks like social media links are often set as a global site setting. This feature allows you access the setting on every page.
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.
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.
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.
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.
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.
🎉🎉 Let's launch this website! We'll use Digital Ocean, Ubuntu 18, Postgres, Nginx and Gunicorn. We'll setup this new server from scratch 🎉🎉