#100DaysOfWeb in Python Transcripts
Chapter: Days 29-32: Static Sites
Lecture: Linking to static content

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

Talk Python's Mastodon Michael Kennedy's Mastodon