#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.