Static Assets

We're going to look at another template tag in this video. 0:00 One that lets us refer to static media, like CSS, JavaScript, or 0:02 images in our templates. 0:06 This video has a new workspace attached to it, so 0:08 be sure you open it up fresh to get the wonderful assets from our designers. 0:10 Again, static assets, we have to do a bit of work with our settings and 0:13 our URLs, but it's nothing you can't handle. 0:16 Let's go do it. 0:18 We'll start using our static assets in our settings.py. 0:19 We need to add, at the bottom, a new attribute or a new setting. 0:24 So, the setting we're adding is STATICFILES_DIRS and is a tuple. 0:30 And inside that tuple, we're going to add the paths to locations for 0:39 Django to find our static assets. 0:44 So these are things like our CSS files, our images, our JavaScript, whatever. 0:47 So we're gonna use os.path.join. 0:52 OS is already imported up at the top, BASE_DIR, 0:55 which is our learning site dir, right here, or directory. 0:59 And then we're gonna join that with the word assets, and 1:04 since this is a tuple, it needs to have a comma at the end. 1:07 And so this says, hey, Django, if I ask you for 1:10 static stuff, go look in this directory. 1:13 So I have already created this directory for you, you can see there is a CSS folder 1:15 in here and I layout .css, don't worry about that, you don't need to edit them, 1:19 we're not gonna mess with those at all, we're just going to use them. 1:23 Before we can get to them though, we have to add a little bit more stuff. 1:26 Of course we do, right? 1:29 If we were deploying this live, this is somewhere on the Internet, 1:31 we would be using a server like Apache or Nginx or 1:35 a Windows Server and they would have a rule set up for how to find static stuff. 1:39 Because we don't want to use Python to serve static stuff. 1:43 But right now, we're just in development, 1:45 we're just messing with this on our own machine or in workspaces. 1:47 It's cool if Python serves as our static files. 1:51 So we have to tell Django how to do that. 1:53 So, let's hop over to our urls.py. 1:57 And up here at the top, 2:00 where we have these imports, we're going to add one more import. 2:01 From django.contrib.staticfiles.urls import 2:07 staticfiles, oops, files_urlpatterns. 2:13 Really long line, I know. 2:20 And so, down here at the bottom of this one, though. 2:22 We are going to then add urlpatterns += 2:26 staticfiles_urlpatterns and 2:30 that happens to be a function, so we need to call it. 2:35 But what does this do? 2:40 What this does is, it checks to see if we're in debug mode, 2:40 which We are. 2:45 I knew that setting was in there somewhere, 2:50 I just couldn't remember where it was. 2:52 And if we're in debug mode then it adds a static path. 2:53 So, static/, that points to all of our files in our static folders. 2:59 But now we need to use this. 3:05 So how do we use that? 3:07 Well, let's go look at our layout template. 3:07 And up here in our head area, let's add a link 3:10 rel=stylesheet and 3:15 our href is going to be a new tag, static. 3:20 And css/layout.css. 3:27 And we close our quote, we close our thing there. 3:32 Now we do need to add one more thing which is, we need to do load static 3:35 from static files, because static is not loaded by default. 3:39 Not every site is going to need static files. 3:44 So, Django doesn't load that automatically. 3:47 The cool thing about using the static tag though, as opposed to, 3:51 there's, occasionally you'll see people do something like this. 3:54 STATIC_URL. 3:57 And, that's cool if your static URL never changes. 4:00 But, if you're going to be deploying your static assets onto something like S3 or 4:03 CloudFront, where it might change, 4:07 then you don't always want to have URL that never changes. 4:10 So we're gonna use the static tag and 4:15 the static tag can actually figure out what these new URLs are. 4:17 Which is really cool. 4:21 So we're gonna save that and then let's go refresh our page and 4:23 see if we get any CSS. 4:26 Oh and that's right, we got some, but we didn't apply any. 4:41 Let's add a little bit more stuff in here. 4:44 So inside of our body, we want to have a div and 4:47 our class needs to be site container and then let's. 4:52 All right. 5:03 Save. Refresh. 5:04 Cool, so we've got a site container. 5:06 We have just a little bit of styling, there's not a whole lot of stuff. 5:07 We will have a lot more styling as the course goes on. 5:11 Obviously, very few web apps can be complete without static assets and 5:15 ours is no exception. 5:19 Now that we have it looking all spiffy, let's see about adding another model that 5:19 will represent the video, or steps that belong to our courses. 5:23