make a WEBSITE with PYTHON!! (Flask Tutorial for Beginners)

Video Notes:

Sign up for Linode here: https://ntck.co/linode and you get a $100 Credit good for 60 days as a new user!!

Don’t waste your time trying to learn how to deploy websites the hard way. In this video Chuck is going to show you how to make your own websites using Python and Flask! Don’t worry… we won’t make you learn any HTML or CSS. 

0:00   ⏩  Intro

0:50   ⏩  What do you need? 

2:09   ⏩  What the junk is Flask?

2:56   ⏩  Let’s get started!

8:23   ⏩ Time to build our meme website!

11:33 ⏩ Outro  

Are you ready to harness the power of Python, APIs and flask. And with these powers, we can make super awesome websites like this meme website, giving you a fresh big meme from Reddit every 30 seconds, by the way, we’re gonna build that site in this video. And I built this page to keep track of my daughter’s key balances, a cryptocurrency I built for their allowance. And you might remember I used it from my Halloween video back in the day. So get your coffee ready. We’re about to level up our Python skills by interacting with some APIs and learning how to use flask. A web application framework used by the largest companies in the world. Now, the beautiful part about this is that it’s pretty easy to learn and get started with flask, which means this tutorial is for everyone. Even if you don’t know Python that’s okay. 

Now don’t get me wrong. Knowing a bit of Python won’t hurt, but you will still be able to keep up if you’re brand new. So quick coffee break, and let’s talk about what you need first. You’ll need a Linnux computer. Now, if you don’t have one or yours is slow and dumb, do what I do spin up a wicked fast Linux virtual machine in the cloud with Linode the sponsor of this video at just 0.01 cents an hour. This will pretty much almost cost you nothing. Especially if you just wanna try this with me, get a super slick, awesome meme website up and running, let it run for an hour and we need to delete it. It costs you this much less than a penny. And if you do wanna leave it up forever, because of course you don’t wanna deprive your friends of sweet, sweet memes. 

It’s just five bucks a month. That’s it. So head on over to a node.com for slash network shop and check this out. If you’re new to Leno, you get a hundred dollars credit free for 60 days. So yeah, that means you can run your meme website for free for 60 days. That’s a lot of memes, totally worth it. So again, Lennox, computer can be a server can be Leno doesn’t matter. And the last, but certainly not least everything in it requires a delicious cup of coffee. I chuck.coffee. So here we go. Let’s get started. If you haven’t already go ahead and spin up your Linux VM in the cloud. I’m gonna make mine right now. It’ll take just a few moments. I’ll run the latest version of Ubuntu in Dallas. It’s gonna cost me 0.08 cents. And then in just a few sips of coffee, I’ll be up and running and mine is running. 

I’m gonna go ahead and copy this SSH command, copy, launch, command, prompt, or terminal on Mac and Linux and paste that command. Here we go. Except off of your prints. Wait, no, you guys happened. Yes. And I’m in now, before we build our website with flask, let’s first talk about what even is flask and how do we use it with Python? Flask is a web application framework, basically just a tool we use to build a website, but what’s cool about flask is that it’s actually written in Python. And as a result, it feels like Python, which we know feels awesome. And that’s why I love flask because I already know some Python, which means I don’t have to learn really much else to make flask do stuff. That’s the power here. You’ll actually use Python to populate data with flask and a big reason people use flask is that it’s really, really lightweight. It’s referred to as a micro framework because it’s designed to keep things simple. And I love simple. So yeah, we are kind of doing something dumb here, building a mean website, but just know the foundational skills you’re learning to do that are used in fortune 500 companies. It’s a skill that you wanna learn if for anything, just to be able to produce websites outta Python for your projects and your hobbies. So enough talking about it, let’s actually install it right now. And just like FLAS itself. 

The installation is pretty simple. First. Let’s make sure we have PIP three installed for Python. So we’ll do a pseudo PT update to update our repositories, take a little coffee break while it does that. And then we’ll do an a P T install Python three dash PIP, which if you don’t know what PIP is, it’s what we use to install a bunch of Python libraries, basically additional tools we can use inside our Python scripts. And then I’ll do a dash. Why at the end hit enter. Let that sucker install again. One more coffee break. Mine is done. And then with one command we can install flask. It’ll be PIP three, install flask. That’s it hit enter, and it’s gonna do its thing. That was it. It’s done now real quick. We are gonna install one more tool type in PIP. Three install requests request is what we’ll use to interact with APIs. 

That’s how we’re gonna get those memes from Reddit. So go ahead, install that right now. Mine was already installed. You might get that message. Cool. And now here in about 30 seconds, we’re gonna run a website. You ready? Here we go. Type in nano flask, test dot pie and hit enter, push bang, gotta do your shebang. The first thing we’ll do with our Python script is important libraries we need. So first I’ll type in from flask imports, flask, keeping in mind that case is important here. And then right after this, we’ll create a variable. We’ll call it app and we’ll have that equal flask. And then aside parentheses we’ll do underscore underscore name underscore underscore closing parenthesis. Now what happened here while we created our variable app and we had that set or equal to the function flask and inside that function is a special Python variable called underscore underscore name. 

Underscore all this is doing is telling the application flask, Hey, everything, you need to run this website from files to folders to whatever it is. It’s all right here. You don’t have to go anywhere else. It’s in your current directory. And just after setting that variable, we’re gonna do something a bit strange. We’re gonna do some decorating. You like decorating, right? <laugh> maybe not, but we’re off to do it. Go ahead and type in the at symbol. And then right after that type in app dot route, we’ll do an opening parenthesis, do double quotes and put a back slash inside of that closing double quotes and closing parenthesis. Now what is going on right here? What’s that at symbol doing now? I’m not gonna go too deep, but this is known as a Python decorator. And all you have to know about it right now is that it’s going to decorate or add more functionality to a function we’re gonna reference right below. 

And then right after the ad symbol is what we’re gonna decorate our functions with. Notice we’re calling the at variable, which we just set up here, which is flask. And then part of flask, we’re calling dot route. And when you hear the word route, I want you to think, okay, the place to go, where to go the location. And that’s what we’re doing right here in the parentheses, a back slash what that’s telling the application. The function is that when someone navigates to the website, let’s just say, network, chuck.com. When they go to the root of the website, just right here, nothing after the URL, when they go to that location, we’re gonna do some stuff down here in the next function. So let’s do that right now. Let’s tell it what to do. So go ahead and hit enter, and we’ll define a function. 

So Des and we’ll call this index type an index open and closing parenthesis. Now, if you’re in the process of learning Python, you never heard the word function. It’s just a collection of a few lines of code that we can call and use later in the script. So then we’ll hit enter space four times 1, 2, 3, 4, like a spacing. And Python’s very important. Don’t forget it. And we’ll do one simple thing. We’ll type in return. And in double quotes, drink more coffee right now and close out with double quote. So while this does look kind of weird, here’s all we’re doing with flask right now. We’re saying when someone goes to the base URL network, check.com, whatever it is just simply return, drink more coffee right now. And then we have one more line of code to run type in app.run. So we’re calling that app variable, which is flask. 

We’re telling it to run. And then inside that function, we’re gonna pass in host equals, and then double quotes will say 0 0, 0, 0, and then comma space port equals. And we’ll just say port 80. And if you have a conflict, you can try port 5,001, but port 80 should work most of the time. Going close that out with a closing Pery and that’s the code. This last line of code is basically saying flask.run. It’s telling it to run on our host and on port 80, let’s try it out. Hit C control X, Y, and enter to save Python three flask test dot pie. Here we go. Okay. It’s running. Notice that by saying 0 0, 0, 0. We’re telling it to run on all the addresses. Perfect. And also notice we get this kind of scary warning. Like, Hey, this is for development own. And you’re like, Chuck, I thought you said big companies ran this Netflix doesn’t do this. 

Right? They do use flask, but not quite like this. That’s a video for another time. This is fine for you right now. It’s fine for a mean website. So we’ll see if it worked. Let’s uh, grab this URL right here. Copy. And let’s go visit a website. Pace that sucker in bam. Let’s command. Do it. Okay. Now let’s take that simple website and turn it into a mean website. Are you ready? Let’s do this. So getting back to our terminal to close out your flask app, just hit control C to stop running it. Control C again, here we go. Okay. It’s done. So now that you understand the basics of how flask works, let’s actually build the meme website. Let’s start with making a directory, a directory. That’s gonna store all our information for NK, D I R. And we’ll call this meme underscore flask, bam, and let’s CD into there CD mean flask. 

Now our mean website is going to involve two things. First. We’ll have our Python script, which we’ll call mean flask dot pie. He has two jobs. First run flask. We just saw how that works. Second, we’re gonna use him to call out to an API specifically this API right here. So thank you to this person. And what this will allow us to do is get a random meme from a subreddit and the interval of our choice. The second thing we’re gonna need is some HTML, just some basic stuff to build a little static webpage, we’ll call this simply index HTML, and don’t worry. I’m not gonna make you build or learn HTML right now. I’ve got a script below, just copy and paste. So let’s get to work on building these two things right now, which by the way, both those things are below. So feel free to copy and paste, but I’m gonna walk you through a few of these things right now, so you can possibly build your own stuff like I did with my daughters tracking their key balance. 

Cryptocurrency let’s work on Python. First I’ll type in nano meme, underscore flask dot P Y today. Make sure you do it best practice to start out. It won’t be too different. We’ll import flask from flask import flask, but we’re also going to import the render template function. This little magic piece of code is what allows us to reference and use an external HTML code or script. And then we’ll import a few more things. We’ll start with importing requests. Remember, we’ll use that to interact with our API and then we’ll import good old JS O and before we decorate with our app dot route, we’re first gonna paste in some code right here. We’ll paste it right now. Again, all code below function we’re defining and we’ll use here in a bit is what we’re using to interact with the Reddit API or not the Reddit API, an API that allows us to talk to Reddit. 

I don’t wanna get in trouble. There’s a ton of fun stuff going on here. I’m not gonna cover it right now. I may make another video on how to interact and play with API. Just know you’re gonna get a sweet, sweet meme from this and make sure you read the comment here about getting certain memes that might, you know, might not be safe for work and stuff. I’ll just blow that function as where we’ll start to decorate. And I’ll go ahead and copy and paste this code again. The same story we started decorating and telling the next function that’s gonna run. Hey, when they go here, when they go to the base of the URL, do this. And all we’re doing here is using that get meme function that we defined up here, and then using that magical render template. I told you about we’re gonna return or pass two variables to this meme index ACML file, which is the H CML for the website. 

So these two variables right here, which will be in populated by this script or by this function. And then our script is almost done. Just one more command app.run host equals and same stories before 0, 0, 0, 0 to run every single IP address and then specify your ports. I’m gonna say 80, and that’s it. It control X, Y and enter. So Python script done. Now it’s time to build out the HTML file, which I told you. We’re not gonna do anything. We’re just gonna make it. Now. Flask is kind of finicky. It’ll look for the HTML inside a folder called templates. We have to make that folder for, so we’ll do MK D a R templates that we’ll CD into that folder. And here we’ll make our HTML file. Nano meme, underscore index dot HTML, and then simply copy and paste the code. Now, before you save it, let me show you two really cool things. 

Look at the two things between the double brackets. That’s the variables we’re passing through, and that’s the relationship between our Python FLAS script and it’s HTML. So let’s go ahead and save it. Control X Y enter to save. I’m gonna CD dot.to get back a directory. And now all we have to do is run that Python script and we’re good. So Python, three name flask dot pie. Ready? Set go. Well, I forgot something. What did I forget? <laugh> this is fun. Live troubleshooting. It tells me right here. Name error app is not defined. So you probably already, already guessed what I missed. If I jump back in that script, I forgot to define the app down here. App dot route. I didn’t define what app was. We did that earlier, so I’m gonna put that right up. Top app equals flak. I’m gonna score name. 

Okay. There we go. That should solve it. <laugh> control X Y enter to save. Let’s try it once more. Okay. It’s on, it’s running. Let’s see if it works. And bam, just like that, your very own meme website. Now I love flask because I can quickly take a project I’m working on in Python and make a webpage out of it. So the example I gave you of my daughters, having cryptocurrency that I give them as allowance. I wanted to track how much they had without having to look at their wallets or go to soul scan. So using Python, these soul scan, API and flask, I have a nice, cool dashboard. And that’s what I wanted to unlock for you in this video. Not that I’m gonna teach you everything you could ever know about flask, because that would take 

Forever. And I don’t know it, it’s a, I wanted to show you what you can do with, FLAS give you one solid example and how you can start to build from that and do your own things. So what I want you to do is take what I’ve done here, have your own meme thing, do that, or take it and make something else. And I know that some of you probably watched this video. Where’re like, wow, I don’t know what you’re talking about. <laugh> I’m still very new in Python or I don’t know any Python. And you said the word flask, and I don’t know what you’re talking about. I went high level on purpose because it would take forever to make this video, which is already, probably too long anyway, but I hope I gave you enough code and just enough to like bread crumbs, to follow along that you could build on the knowledge you already have. 

So anyways, I wanna see your websites. If you make some FLAS websites, dude, put it below. I wanna see that. And I know you’re probably thinking this too, Chuck, how do I make it to where it’s persistent? Like what if my server reboots or my computer reboots? How do I make it come back up? Great question. And we already covered that. I’m not gonna cover that here in this video again and make it too long, but we do have it in our write up and our lab walkthrough, which will have in a link below, which will include all these scripts. So yeah, just go crazy, have fun with flask. And I hope this opens up a whole new world for you. At least it did for me because I love writing stuff in Python. Python’s so fun and I love to make it like available to people through a website. So anyways, I hope this video was helpful for you. Um, I really do appreciate you taking the time to just have some coffee with me. Talk about Python and flask and APIs who doesn’t wanna do that. It’s just fun. And also make sure you hack the YouTube algorithm today. Make that like button notification about comment. Subscribe. You’ve gotta hack YouTube today. Ethically of course. And yeah, that’s all I have. I’ll catch you guys next time.

Check Out Network Chuck's Coffee and MERCH Shop