#100DaysOfWeb in Python Transcripts
Chapter: Days 29-32: Static Sites
Lecture: Writing our first post!
0:00 Okay, it's time to create our very first post or page.
0:05 Again, looking at our folder here
0:07 we have our virtual environment activated
0:09 and we have the Skeleton bare bones framework.
0:13 Let's pop into that content folder.
0:16 Remember, content folder is where all of the source files
0:20 or the schematics for your site live.
0:23 And once Pelican has its way with it
0:27 with the content folder
0:28 it then dumps all of that outputted HTML
0:32 into the output folder that you also see there.
0:35 So, let's hop into content.
0:39 We have nothing in there.
0:40 Let's create our first post.md file.
0:46 We're going to go with an .md file, a Markdown file
0:48 so we can use that format.
0:51 Alright. Now, to get started
0:54 we actually don't just start writing.
0:57 What Pelican needs to be able to generate this page
1:01 is it needs a series of little markers, I'll call them
1:06 at the top of our file, alright
1:09 and it takes these markers
1:11 and that's how it generates the HTML
1:14 that's how it knows what it needs to do.
1:18 You'll see what I mean in just a second
1:19 when you see what these markers denote.
1:21 So, the first one is title. It needs a title.
1:25 I'm going to just go really, really generic here.
1:29 Let's get this party started.
1:33 Right, so we've got our title little flag here.
1:36 Next up, we need a date.
1:39 Alright, this is a date that's going to show up
1:41 on our articles and help place this article on our page
1:46 on our website.
1:48 And the format, let's go with 2019, month and day.
1:54 Let's go with 31st of March and the time
1:58 let's just call it 22:00
2:00 not that it's 10:00 pm or anything.
2:02 Now we need a category
2:04 because all of that articles can be searched by category.
2:07 They are stored based on the category on our site.
2:11 And this category, I'm throwing in Python.
2:14 Super creative there. Now, we have tags.
2:18 These are the tags that
2:19 you know, I suppose would have to do with your content.
2:23 What is this article going to be about?
2:25 Think of these like your hashtags
2:27 and your tweets and whatever.
2:29 We're going to say a tag for this one is 100 days of web.
2:33 It's separated by comma.
2:35 We can then say it's also about Python
2:37 and we're going to say it's about awesomeness
2:40 because this is totally awesome.
2:43 Now, slug, slug.
2:45 If you haven't heard the term slug
2:47 that is just a really gross way of saying URL.
2:51 Because no one likes slugs.
2:53 Pretty sure, no one likes slugs.
2:55 And the URL of this post is going to come up as your domain.
3:00 So if we're going to use the PyBites example
3:03 it'd be PyBites forward slash and then this
3:06 whatever you type here.
3:08 I'm just going to go, again, really generic
3:12 and call this first post
3:13 but you could call this whatever you want.
3:15 This is just going to be this page's URL.
3:19 The slug, whoa, for this page. Authors.
3:24 As it's just me, we're going to say the author is Julian.
3:27 And finally, we're going to have a summary.
3:31 So I'm going to write this is a summary
3:34 of the first post written for our Pelican block.
3:44 We're using this for the 100 days of web course.
3:51 Done. Alright.
3:55 One other thing I will throw in here
3:56 but I'm going to delete it in a second
3:59 is the term draft.
4:01 Alright, if you have draft here, with true
4:06 this essentially tells Pelican this is a draft post
4:10 and it should not show up on the main website
4:13 under our default slug.
4:15 It will actually show up on the website as
4:18 using PyBites as an example, PyBites/draft/slug.
4:25 Alright, so when you're drafting a post
4:27 you can put that there
4:28 and then when you're done, delete it and save it
4:31 and then it will show up on the normal website.
4:35 Right, let's add some more content in here.
4:37 Now, we can actually start writing.
4:39 So, let's go with a big heading for a big day
4:44 and we have double hashes there.
4:46 That's Markdown format.
4:47 That's a certain size of a header.
4:50 This is the first paragraph
4:52 of our article. If I can spell. Hoo-zah!
5:00 And we want this, the reason I'm putting this all in
5:02 is because when we render the website shortly
5:05 we want some content there, okay?
5:12 And I'm teaching you a bit of Markdown here
5:16 so we can use two stars symbols
5:21 to indicate a bold.
5:27 So if we use two stars around a word or a term or anything
5:31 that indicates it's going to be bold
5:34 formatted block of text.
5:37 Now, let's change the header size
5:40 a slightly smaller header
5:44 and we can also use, here's some more Markdown for you
5:48 a single star around a block of text
5:57 to indicate an, and here's a special word for you
6:01 an italicized word.
6:05 Get that star in with a shift.
6:08 Alright. And that's it.
6:11 Let's go with the end, cool story bro.
6:17 And that is our first webpage.
6:21 So right-click, we can cap that out
6:25 just to see how it looks.
6:29 We have our first post
6:31 we have the slug, we have all that stuff there
6:33 big heading, so on and so forth, that's it.
6:37 Finish completing your first post.
6:40 Go through and make it as big and lengthy as you want
6:42 and in the next video we will now actually use Pelican
6:46 and launch it into the browser.