Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
by
Lessons:10Length:50 minutes
172320 adam noonan 400x277 v2 github pages 011618
  • Overview
  • Transcript

2.2 An HTML GitHub Page

In the previous lesson, we used a README.md Markdown file as the content of a GitHub Pages site. That's a good start, but we want to get our hands dirty and create a custom website with HTML.

2.2 An HTML GitHub Page

Okay, so we have our GitHub page's site kind of up, and running but we want to actually be able to do some more interesting things with it. Let's start by creating a very simple but illustrative demo to be able to actually use HTML your GitHub pages. So the first thing that I wanna do is I wanna go back over to my code. And I'm gonna do all of this to start in GitHub, so that you can see how to do it, but then I'll show you later on how you can actually do it on your local machine. Do some development in maybe a text editor or something like Visual Studio Code, and then go ahead and push your changes up and see them actually update live. So the first that I'm gonna do is I'm gonna create a new file, and I'm going to create this as index.html. Now it's very important that you understand that like most websites, GitHub page websites do like to be served off of a main page, in this case index.html, so it's kind of an important naming convention to use when you're first getting started with this. Now, if I wanted to create a basic HTML file, I would have to start by creating a DOC type, so I'm gonna say DOCTYPE html. And then, I'm going to go ahead and say , and then I'm gonna close off my . And then, one of the different pieces that belong within the html tags, well, we're gonna need a , and we'll create the closing tag and then we're also going to have a , and we'll close off the tag like that. And then just so that we can see something interesting, let's go ahead and add in a title, , and then let's go ahead and say this is something like My GitHub Pages Demo. Something like that, and then we could also actually put in a little something in here if we wanted. We could make this an , and we're gonna close it off and say The Best Page Ever, something like that. So let's go ahead and commit our new file. So now we're gonna see two files within our repo, but we really don't care about this README file anymore. That was just an illustrative thing, so let's go ahead and actually delete that. We're gonna get rid of this file. We'll go ahead and commit that change to delete that. So now all we have going right now is this index.html file. Now it's very simple, but it's also very powerful because it is valid html. We do have a head, we have a body, we have a title, and we have a single h1. Just by the mere fact that we have added all of this stuff in here as index.html, and then removed that readme.md file, what I can do now, is I can come over to this other tab that I had open before that's still pointing to kreatived.github.io/pages-demo/. And I can refresh this page, and as you're gonna see now, I get updated information here. I can now see that I get My GitHub Pages Demo, The Best Page Ever!! So just by creating a single file within my repository, I'm now able to actually create live HTML that's going to be served up once I have enabled GitHub pages. Now, once again, that's because I'm naming it a specific way, and I'm using index.html, so the naming convention here is very important. So now that I have this up and running, this is interesting, but not very many people create full websites in HTML alone. In the next lesson I'm gonna show you how we can begin to add in some CSS through GitHub, and then we'll start to do things locally on my laptop.

Back to the top