#100DaysOfWeb in Python Transcripts
Chapter: Days 29-32: Static Sites
Lecture: Linking to static content
0:00 We have our brilliant web page
0:02 How good is that?
0:03 Next, we probably want to do something special
0:06 with the website.
0:08 So far, we pretty much just have text, right?
0:10 There's nothing else on this page.
0:13 How about we add an image?
0:16 To do that, we need to create a new folder.
0:20 Let's take a look in our website right now.
0:23 We have our content folder.
0:24 Now, you would sort of assume
0:26 based on the fact that all of our content
0:29 goes in that content folder
0:32 that we would simply just copy an image
0:34 such as this pb-logo.png file.
0:39 Now, that's not actually how Pelican works.
0:42 Pelican requires you to have an images folder
0:45 inside the content folder
0:48 for any images you want to use.
0:50 So let's create one.
0:52 Make the images, check that it's there.
0:55 Yep! And let's move our PowerBytes logo into that images folder.
1:02 There we go! Now, if we want to link to that
1:05 obviously if you think about folder hierarchy
1:08 we are going to need to link it from
1:10 the images folder /pb-logo.png.
1:16 And we can do that from directly within our Markdown file.
1:20 So let's throw this image into our Markdown file now.
1:25 We'll head right down to the bottom
1:27 where are, and let's throw it in here.
1:32 Alright. Give ourselves a little bit of a header
1:36 we use the same size there.
1:39 Let's throw an image in here.
1:43 Now, the syntax in Markdown that we need to use
1:47 is we start with an exclamation mark.
1:49 That indicates some sort of image, or static file.
1:53 So we can go PowerBytes logo, this is our alternate text.
1:57 So again, web stuff, really good practice to have alt text.
2:02 Okay? Now we link to the actual file.
2:07 We have to use this flag here, Static.
2:10 This tells Pelican that we're about to link
2:12 to static content.
2:14 Therefore, it knows to look within the contents folder
2:17 for that static content.
2:20 And we're going images, we're telling it to point at images
2:23 we then go to logo.png. And that's it.
2:29 That's seriously it. There's nothing else to it.
2:35 We can write quit
2:37 let's just cap the file, make sure it's there.
2:40 There we go. And that is it.
2:44 Now, if you'll remember, what do we do
2:45 to generate our site? Because obviously
2:48 we have put that into our content folder
2:50 but it has yet to have been generated
2:52 into our output folder, has it?
2:54 So, if we were to launch the site now
2:57 we wouldn't see the picture.
2:59 In fact, let's do that
3:01 just so I can demonstrate really quick.
3:02 python -m httpserver
3:10 Alright, let's bring up localhost.
3:14 There is our site, and we actually don't have
3:18 anything there. Right?
3:20 So, let's go back here
3:23 and then control + c out of that.
3:27 And when that returns, it does take some time, sometimes
3:30 depending on your OS.
3:31 It will take a little bit of time to cancel out.
3:34 Alright, with this finally, control + c'd out
3:40 let's see where we are, we are in our output folder.
3:43 Let's do a pelican ./content from the parent directory.
3:51 And when that's completed
3:53 we'll just move the mouse out of the way.
3:55 We have a web page! So let's head to output.
3:59 Let's do python -m httpserver
4:07 We're back to our page.
4:09 And there is our wonderful PowerBytes logo
4:13 hopefully you recognize that special
4:16 and that's static content.
4:18 Now, you can play around with that.
4:20 You can get any image you want
4:22 and you can throw it in there
4:23 you can make your own image repository
4:25 do whatever you wish
4:26 but that's how you link to static content.