How to Use the Wagtail Starter Kit

Hello everyone, my name is Megan and I'm going to be walking you through the Wagtail Starter Kit today. The Wagtail Starter Kit is a great way to get a Wagtail project up and going for the first time. It includes a lot of the basic things that most website projects need so that you don't have to start completely from scratch. This tutorial will take about 15 to 30 minutes. You'll need a few things on your machine before we get going. Make sure that you have Python installed on your computer. If you don't have that one, you're not gonna get very far. If you you also need a code editor or an IDE and a terminal, whichever terminal you prefer. If you have no idea what those things are, you might want to go learn a few more things about what those terms mean, and also give them a try, and then come back to this tutorial.

You'll be better for it If you want to do the full deployment with me today, you're going to need a fly. io account. Go ahead and sign up for that. It's free. We're not going to do anything that requires paid resources today. And also go ahead and install their command line tool while you're at it, because that'll make the deployment extra, extra easy. Alright, great. Go ahead and click on all the links down in the video description. If you need to install any of those things, hit pause and then come back here when you're ready. Already? Okay, great. Let's go ahead and head into doing the Wagtail Starter Kit together. First, I'm gonna go ahead and show y'all what it looks like, what we're gonna be working on. This is the Wagtail Starter Kit.

It has a pretty standard news website structure to it, including like a headline area and a big old action button that the micro m all the marketing people love. Uh has the navigation menu, has a few different ways to display headings and numbers and CTAs and also kind of a basic blog listing. It even has a handy-dandy little switch between light mode and dark mode. It's super useful, and that's one of my favorite parts. Alright, now that you see what we're going to be doing, let's head on over to GitHub. The link again is down in the video description And we're gonna use the Wagtail News Template repository. I promise that's a starter kit.

We're working on renaming it. Don't let that throw you for a loop. And pretty much we're gonna follow what's everything that is said down here in the README directions. Alright, so let's get going. I have VS Code open here. I have a blank directory that I'm calling starter kit demo in here. And uh first thing I'm gonna do is double check that the version of Python I am using is committed. compatible uh with the project it's 3. 13. 1 that is definitely compatible with the Wagtail Starter kit If you have a lower version of Python 3 or you have Python 2 there for some reason, then you definitely want to investigate. Make sure you have a more recent version of Python installed before you proceed.

Alright, now we're gonna add a Python virtual environment with Python-M V E M V, and I'm gonna call this myproject -emv. And so this creates a virtual environment. And a virtual environment is kind of like a fence that goes around our project and it protects the rest of our computer from all the dependencies that we're going to be installing inside this fence. It kind of contains the project, and if anything gets a little chaotic, it doesn't affect the rest of our machine. You definitely want to have that virtual environment. So you can see that we have it added here. However, it's not doing us much good because it's not turned on. So let's go ahead and switch it on.

We're gonna use the command Source my project slash EMV and then bin not bun uh and then activate and that will switch on our virtual environment. You can see it's on with the change of EMV and the little parentheses there. Great. Now that that's installed, we're going to go ahead and install some things within that fence, within that virtual environment. So , very first thing I'm going to install is the most important thing, which is Wagtail, because that's the whole point of this So let's go ahead and do pip install, PIP install Wagtail. It's gonna run through a bunch of scripts to install things. You'll see a little message at the end reminding me that I need to update pip.

I'll get to that eventually. Hopefully you are completely up to date and you won't see a message like that. Once we're there, I don't want to start my project in this directory, so I'm gonna go ahead and change directories with The CD command and go into the my project directory. That's where I'm gonna want my Wagtail project to live to make sure that everything works smoothly in this tutorial. And go ahead and head back to the repository so that you can copy and paste this next command. We're going to use the Wagtail Start command to start up a fresh project. If you did Wagtail Start completely by itself, it would give you a completely blank project. And we don't want to do that. We're going to use the template flag, which will pull in the starter kit

and give you the starter kit to start with instead. Alright, so I'm gonna copy and paste that over, hit enter, and that should create the project that we're gonna be working with. If you head over here and look, you'll see there's a lot more inside the My Project directory now. If you're familiar with the Django web framework at all, you will definitely see some things familiar in here like the settings. uh and other things and there's a reason for that Wagtail is built on top of Django and Django is useful for doing a bunch of different things And the great thing about Wagtail is pretty much anything you can do in Django, you can also do in Wagtail. Doesn't necessarily work vice versa. Uh

if you're not familiar with Django at all, then I definitely recommend getting familiar with Django. It's really, really, really cool. Alright, so Now that we have that, we're going to install the rest of our requirements. I'm just going to go ahead and copy this inst this command here so that we have all of our other dependencies that make this project go. And that'll go through a bunch of install scripts and install a bunch of different packages and things like that needed for our project. Great, awesome, everything's installed. Now we want to Give you a project that has like some visible structure to it so that you can see kind of the things you can do with Wagtail

So we included a load data command that provides some test data so that you can kind of see how everything looks like without having to enter a bunch of data yourself. We put those in as make commands, so we're gonna use make load -data. And that's gonna go ahead and run through a bunch of scripts including migrations, which are changes being made to the database in this project. And those changes will pretty much tell the database how all the data should be structured inside of it. It's really super handy. It's one of the best features of Django. Alright, now the data is in there. We have this project. It's on our computer.

But where is it? Can we look at it? Can we do things with it? Not without turning it on first. So we're going to use the command make start to get the server going that will let us see our project. And you can go ahead and use this URL down here to open it up in your browser. And there you go, you have got the Wagtail Starter Kit on your machine. And you can do whatever you like with it. One thing I highly recommend doing is adding the slash admin trail here. and going in and logging into the back admin and trying a few different things there. We have a super very secure user name and password combo for you. It's admin.

And password. Yes, so so very secure. It's the worst password ever. Definitely do not leave this user in if you ultimately deploy this project to production. But we left it in there for demo purposes. And once you log in, you can get your first look at the Wagtail dashboard uh which has like some of the most recent edits organized here. If you were working on a particular piece of content, it would show your most recent edits as a user. And then over here we have our toolbar which includes the page tree for the project, along with like any images you store in Wagtail and documents. Snippets is an area where you can use reusable

pieces of code. It's a very common area for like navigation menus and things like that. And there's also like some settings for forms and reports. settings as well. If you want some more resources to learn about Wagtail, I also highly recommend checking out the help section. But let's look at the page tree a little bit here. Like if we open up this project you can see that we included some standard data for you to look at. There are different types of pages in here, like a form page. We showed a template for kind of a standard page as well as an index page. And so a typical index page you'll see is kind of a blog, which uh has a bunch of different blog articles nesting underneath it. That's what this big green arrow is for.

You'll see like, you know, lots of very cleverly named blog articles down here. Although I I find this one to be clever to be honest. There are more mackerel in Kent than people in China. That that always makes me smile. So when I open this up, you can kind of see it has everything that a blog page tends to need, like a title and the author and the publication date. Uh it also opened up to show the preview menu here, which is a really useful feature for Wagtail. Uh like if I wanted to go ahead and change the, you know, mackerel to salmon or something like that. Um so let's say I changed that. I have no idea if they're salmon and can't. Probably not. Uh but you know, so you can see that it made the live update here in the previous

feature. It's really really handy. You can also direct it to do different displays as well so that you can check the mobile and the desktop versions and all that. It's super super useful. Alright, so down here , I definitely want to encourage you to play around with adding different types of content. This is the Stream Field section where you can add different blocks and try out adding CTAs and things like that. Definitely go ahead, play around, like do different things and Here. Get a feel for Wagtail. It uh definitely gives you an idea uh whether you enjoy Wagtail. And you can also start digging into a few different features we have. uh like our checker feature which includes some content metrics and also some accessibility checks.

We also have commenting history all sorts of different features that you can dig in Alright, so now we have this project, it's living on our computer, but what if we want to show it to other people? Well then we're gonna have to deploy it to a hosting service. And that's where fly. io comes in. Alright, so to do that, I'm gonna head over here and go ahead and kill our server by doing Ctrl-C. And that should make the server stop. And once the server stopped, I'm gonna go ahead and use some fly commands to launch this project on fly. io. So we'll go ahead and use fly watch here. And uh I definitely recommend following along with the GitHub

instructions at this point because you know it's a little hard to remember uh what the different uh settings should be. So when you're asked to uh copy the configuration to a new app you definitely want to say yes It's gonna go ahead and do that. Now you can tweak some of the settings you want. Like some things are gonna be chosen automatically for you, like the app name and the region. If you want to change any of that stuff go ahead. I'm just gonna go ahead and hit no to proceed with this. And it's gonna go ahead and go through a building script. Do do do do do do do. Gonna do some Docker stuff. Uh, you know, one thing I really like about Fly

is how smooth this tends to go. Um Oh, excuse me, bit of a cough there. And you know, I'm kind of inviting myself for some uh pain here if it decides to choke all of a sudden. But I I think it's gonna go ahead and be fine. So it's gonna go ahead and boot up a machine, definitely copy everything over to fly. And in a you know another few seconds here we should see uh the final name of our app. Ah, great, awesome! So, yes, our app has been deployed. Amazing! However, do not click that URL right away. You know, if you do that, you're gonna wind up with a big old internal server error.

And the reason for that is because Wagtail and Django require a secret key. They can't run on a production environment without it It's a very bad idea to run on a production environment without it. So we got one more command that we need to add here, and that's going to be fly secrets set and we're going to name this secret underscore key and add an equal sign and we're gonna need some parentheses here. I'm gonna go ahead and use this handy dandy website which is linked in the GitHub to get a copy of a secret key.

And I'm gonna go ahead and paste that in here, and then I'm going to add another set of parentheses on the other side, and I'm gonna hit enter And we should see some updating from Fly. You can also update this and add this secret through the UX in Fly. io 's dashboard if you want to as well. That's definitely an option if that's your preference for managing your secrets. I just find that the uh command line is a pretty easy way to do that. All right, awesome, great. Now everything's been updated. I'm gonna go over to my fly dashboard here and have a look We can go ahead and make this a bit bigger for everybody.

I'm going to refresh it so with it we have the newest version here. Yes, solitary darkness. Yes. I'm gonna have to change it to the dark mode for that version Alright, I'm gonna click on that and then if we go to this URL here, there is our Wagtail starter kit. Now it looks a little bit different, and that's because the test data is not loaded here So if you want the test data loaded, we have a command that you can put in the command line here. So it's a little SSH command. I'm just going to go ahead and copy and paste that one here. And Add that in. And by the time everything is copied over

You see a reference the bakery stores. That that references our Wagtail bakery demo. We'll probably have to update this one to add something about fish. But when I pull up the project here and refresh it, we should see our test data. Awesome. And now it's live on a hosting site and you can add a redirect. And you can start adding content and you can share it with other people and it can be visible to the public if you want. You can also go ahead and play around some more with the admin if you want to here. Um it would help if I spelled it right. Definitely don't spell it STIM. You really should spell it right. do admin. Right now I still have a very bad admin

and password combo here. Highly recommend you delete that if you want to use this site long term uh you definitely uh want to make sure that it's secure this this site is not very secure at all because you guys have already seen my secret. Alright. So that's the Wagtail starter kit. And so now you should have a version on your computer and you can deploy it to fly. io And now you can dig into the code if you want and make any changes that you want to it. You can try adding content, you can try adding new fields, you can try adding blocks. If you want to do some more cool things with Wagtail or learn more cool things about Wagtail, definitely visit Wagtail. org where you can learn more about Wagtail and the things you can do with it

Thank you so much for being here today and for doing the tutorial. I'm looking forward to hanging out with y'all more. Take care.