FREELessons: 10Length: 50 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Enabling GitHub Pages

Before you can actually begin using GitHub Pages, you are going to need a repository. And when you have a repository, you need to enable GitHub Pages for it. In this lesson I'll walk you through these steps so you can see just how easy it is to get started.

2.1 Enabling GitHub Pages

The first thing that we wanna do is we want to see how we can actually begin to create GitHub Pages. So there are two main types of GitHub Pages or main ways that you can create GitHub pages. The first one is gonna be a repository specific page, which is one that's going to live with inside a repo that's typically going to describe maybe some software you've written. Or that's available to download or whatever, but it's gonna be specific to an individual repository. The second main type is going to be user or organization-based pages, where you can create one that is going to be maybe your own personal website or your organization's website. Really that's not repository specific or software specific even, it could be about anything. About you, about your organization, what have you. And really creating these types of pages or websites based on GitHub Pages is really very similar with only a couple of very minor differences. But at the end of the day, you can fill it with whatever content you want, which is actually pretty cool. So the first one that we want to take a look at is repository specific. So as you can see here, I am currently logged into GitHub under my account. Now, as you can see here, I'm logged in under an account that has the name of kreatived. Now, this is important to pay attention to and to understand because we're gonna see that show up in other places later on. And it's gonna be cool for you to understand why things are being named the way that they are. And also help you to actually hunt down some other samples later on if you wanna see other people building these GitHub Pages websites. So now what you're gonna do is you're gonna select a repository that you have. So you can use any existing repository you have, that's fine. Or you can create a new one. So in this demo I'm actually going to create a new one, but as I said before, you can use any existing repo that you already have. So I'm gonna come up and click on the New repository button here, and I'm just gonna give it a name. So I'm gonna call this pages-demo. And then I can give it a description, I'm not going to right now. I'm gonna leave it as public because I want this publicly available to anybody that's browsing under my account or, specifically, under this particular repository to be able to see this site. And for now, for a very specific reason, I'm going to leave it empty so no README files, no .gitignores, no licenses, no nothing. It's gonna be completely empty. So let's go ahead and click Create repository. And you're gonna see here that it's gonna say, I see you have a repository, but there's nothing here. So you can add some data manually, you can use our quick setups or whatever have you. But right now we're gonna leave it as is. So the first thing that we wanna do is we wanna see how do we enable GitHub Pages? Well, that is going to live over here under Settings, under your specific repository. So let's go ahead and click on the Settings tab. And we're gonna scroll down just a little bit and you're gonna see the GitHub Pages section. Now, this is where we're gonna do most of the enabling and disabling and a little bit of configuration. So as you can see here under Source it says, GitHub Pages is currently disabled, you first have to add content to your repository before you can publish a GitHub Pages site. Okay, I guess that does make sense. So let's kinda go back to our code and we need to add some content in here. It could be any content, it could be any file, it could be an empty file, it could be whatever you want, but something has to live in this repository in order to create a GitHub Pages site. So I could go ahead and add some data manually, or do something on my laptop and push it to this repo, but I'm gonna make this very, very simple. And I'm simply gonna come over here to this README. So under Quick setup, it says we recommend every repository should have one of these three files. So I'm gonna actually click on README, and by doing that it's gonna take me into an edit mode where I can now see I'm creating a file called, so this is a Markdown file. And I can see the contents of the file. And by default it's simply going to create a header that is going to have the same name as our repo, so in this case pages-demo. So that’s interesting, but what if I came down here and just added a little bit more and said this is a great repo, something like that. Okay, so this is gonna be my README file and I’m simply gonna come down to the bottom and you can see that I'm gonna commit this new file. By default it's gonna give me a commit message called Create, and I could add some more description, but I'm not too worried about it right now. So I'm simply going to hit Commit new file, and then we're going to be redirected back to code. And you're gonna see here that I now have pages-demo, which is the name of my repository, and then my other header that I threw in there, This is a great repo! Okay, so that's the basic content that I have within my repo right now. So let's go back to Settings to see if anything has changed. So we'll come back down to GitHub Pages, and now the content has changed just a little bit. It says it's currently disabled still, but now all I have to do is select a source to enable GitHub Pages. Well that's exactly what I wanna do. So let's come over here to this drop-down box and now it says here I need to select a source. Now, by default when you create a repository within GitHub, you are going to be working on a single branch. And that single branch is going to have the name of master, so that's just the default way that it's setup. If you get more intricate you can create other branches and all that sort of stuff, but right now we're not really concerned about that. All we really wanna know is how do we get this GitHub Pages thing up and running? Okay, so by default we have none, which means GitHub Pages is disabled. But right now I want to actually enable it. So in order to enable it I need to select a branch. And in this point I have master branch as the only one that I can use because, well, that's the only available branch that I have. So I'm gonna click on that and I'm simply going to click Save. So now when I do that the page gets refreshed. So let's come back down here and you're gonna see that we now have this little area up in this table that has blue in here saying that my site is ready to be published. So that means it's not active yet, it's not actually published. But the interesting thing here for you to note is the URL at which this is going to be enabled, or going to be published, is going to be at your username. So in my case it's and then the name of your repository, so in my case it's going to be pages-demo. Now, normally this takes a few moments. It could take a couple of minutes, depending on how busy GitHub is, for all of this to actually get published and become enabled. But usually, if you come in here and just refresh this page shortly after, you're gonna see that it is published. So what I can do now is I can go ahead and Cmd + click on this link, and I can be taken to that actual URL. So I can see And you can see that I'm actually getting content now, but where am I getting this content from? Well, by default, when you create a README file and you enable GitHub Pages, if you have nothing else within your repo, that is the information, that file is gonna get served up as HTML. Even though it was initially written in Markdown, but it's going to be converted over to HTML and served up from that specific URL. So that's the basic way that we're gonna get started creating GitHub Pages. But in the upcoming lessons I'm gonna show you how to be able to tweak things and start to inject things like HTML, CSS and JavaScript.

Back to the top