#100DaysOfWeb in Python Transcripts
Chapter: Days 29-32: Static Sites
Lecture: What exactly is a static site anyway?
0:00 I figured a good place to start
0:01 would be to cover what a static site is
0:04 what is a static website
0:06 and what is a static website generator?
0:10 We'll start off by covering what a static website is
0:13 and forgive me for showing you the PyBytes website.
0:16 It is a shameless plug, but I'm proud of it
0:18 so you're going to have to look at it while I talk.
0:21 A static website is PyBytes.
0:23 That's a perfect example of what a static website is.
0:27 A static website is essentially a series of web pages
0:31 with fixed content.
0:33 It's static content.
0:35 It's content that does not change
0:38 unless myself or Bob as the admins of the website
0:42 go and make an intentional change.
0:44 So, taking a look at PyBytes
0:46 if you would have browsed to PyBytes now
0:48 I strongly recommend it, it's a great website
0:51 you would have the same experience
0:54 browsing this website that I do.
0:57 Clicking on the About page
0:58 would bring up the exact same About page here.
1:02 Same with clicking on Articles.
1:04 You would see all of our articles here.
1:06 The entire website is static.
1:09 It stays the same no matter what.
1:11 You can't do anything to it.
1:13 I have to make a change
1:15 for something to change on this website.
1:18 Now you might wonder
1:19 what's different compared to other websites.
1:21 Well, think about your favorite news website
1:24 lik, you know, news.com or news.com.au.
1:27 That's a dynamic website.
1:29 There is a database in the back end.
1:31 There's all sorts of funky stuff going on
1:33 and every time you go back to that page
1:36 changes are happening.
1:37 You're doing stuff to it. You can log in.
1:39 You can do all sorts of crazy things
1:41 on these other websites. They're not static.
1:44 It's not a simple as one of these websites.
1:47 That's why static websites are actually fantastic for blogs
1:50 because blogs don't potentially change
1:53 other than the admin or the blogger creating an article
1:57 and that's why we have static website for PyBytes.
2:01 Now, what is a static website generator?
2:06 A static website generator is something that takes
2:10 the back end code, so to speak
2:13 takes some markdown content
2:15 takes some schematics, if I might
2:19 and converts that to the HTML
2:22 that renders in your browser.
2:25 I figured the best way to show you this
2:28 is to show you physically.
2:30 This here is the GitHub repo
2:33 that houses all of the back end schematics
2:36 or source files
2:38 that make up PyBytes.
2:40 If you look in our content folder
2:43 you will see every article
2:45 that we've written on this website.
2:47 There are code challenges, there are Twitter digests
2:50 everything is here.
2:52 But notice it is the markdown format md.
2:56 This is our source file.
2:58 This allows us to do things like
3:02 adding double hashes, like markdown format
3:05 so you can get headers
3:07 and manually putting things like bold and italics.
3:10 Now, you can't really see it here
3:11 because GitHub is interpreting that
3:14 so we can edit this quickly
3:16 and you can see here is more of what it actually looks like
3:20 in the markdown format.
3:21 So we've got the four tildes here
3:24 to allow for a code block, and so on.
3:26 So this is a source file.
3:27 This is obviously not what it's going
3:29 to show up like on the website.
3:32 What happens is we use
3:33 a static site generator called Pelican
3:35 which is what we are actually going to use in this chapter
3:39 and we use Pelican to take this source file in
3:43 these md files in our instance
3:47 and we use it to convert these
3:50 into HTML files. So it goes through.
3:53 Pelican converts these.
3:55 It generates a website, which you can see here.
3:59 Now, this is our output folder.
4:01 It takes everything that was in that content folder
4:04 converts it to HTML.
4:06 It literally generates our website.
4:09 And in here, taking a look
4:12 let's choose one of our code challenges
4:14 you can see everything is now HTML.
4:17 It has converted everything from that markdown format
4:21 into a nice HTML page for us.
4:23 And as you can see, it's all quite static.
4:26 There's nothing special about it.
4:27 This is raw HTML.
4:29 Very similar to, you know
4:31 what you would have used back in the '90s
4:33 or when you were first starting out learning HTML.
4:36 And therein lies the beauty of static sites
4:39 and static website generators.
4:41 These sites are very simple.
4:43 They're very simple. They're lightweight.
4:45 They're very quick and they're easy to maintain.
4:48 So this is why we're teaching you that in this chapter.
4:51 Let's get cracking.