FREELessons: 24Length: 3.1 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.4 Creating Github Pages

So there's one more thing about GitHub that I wanna show you, and that's GitHub pages. This is a really neat feature that GitHub has. It's just basically the ability to host static webpages on their servers. Sound simple? And it is simple. So let's begin by looking at a couple of examples. First, we're here at an old blog of Scott Chacon, who's a big proponent of Git and has produced a lot of material on it. But what I want you to notice here is the URL. schacon.github.com schacon is his github username and .github.com, of course is the github URL. So what you're seeing here is that GitHub actually lets you host your own private static HTML webpage on the github.com domain at a subdomain that matches your username. So that's pretty cool. And we're gonna look at how to do that first because it's easier to do. However the more complex way of using GitHub pages has an extra neatness factor to it to me. This is the Homebrew website. Homebrew is a package manager for OS10. And it's a really great tool but what we're here to look at is the URL. MXCL.github.com/homebrew/. You might think this would take you to the Homebrew repository, but remember, GitHub URLs normally go github.com/username/repositoryname. In this case, the username is actually the subdomain. As you've probably figured out by now, what GitHub will let you do is host a static website for a specific repository on the github.com domain name underneath your own username as the subdomain. If you see over here, there's this Fork me on GitHub button. If I click that link, it would take me to github.com/mxcl/homebrew, which is where you can see the normal repository page that you're used to seeing. However, mxcl.gitub.com/homebrew, brings you to this nice intro documentation page. And it shows you how even if you're hosting a website on GitHub. GitHub really makes themselves the one stop shop for publicizing your open source project. Not only can you host and manage the code there. But now we're seeing that you can even create a promotional website. So that's what we're gonna look at doing today. And I should point out that we're gonna create both of these web sites. One is not dependent on the other. You might think that since the repository specific site is underneath the username.github.com subdomain that the subdomain site has to be in place first. That's not the case. You can have one or the other in place or both, and we're gonna have both in this case. So let's do the personal site first. It's actually really simple. I'm gonna create a new repository here, and the repository name is what's important. It has to be exactly the name of the URL. So in this case, since our username is sherlockTuts, I'm gonna put sherlockTuts.github.com. For our description, we'll just put Personal Site, and then we'll click Create repository. Now of course we have to open our terminal and initialize this repository on our local system. I'm doing to move to the desktop and I'm gonna make a directory, and we'll just call it sherlocktuts.github.com. We'll move into the repository, and then we're going to run Git in it. I'm going to run vim to open an index.html file, cuz that's what you have with a static web page, and we'll just say Sherlocktuts.Github.com, and h1 there. Then we can just have a paragraph down here just saying something simple like, we made this site and GitHub is hosting it. All right, so I'll save and close that. We can add all the files. If we run a git status, we'll see that we have one file to add, git commit-m. We'll just call this initial commit for now. Now of course we have to git remote.add, and let me come back over here to copy this link. Remember, this is the remote that we talked about in the previous screen cast. We're gonna add this remote. I have to, of course, remember to add the name here, git remote add. We're gonna call it origin, just cuz that's the suggested name. Excellent. And now we could just do git push, they recommend using -u origin master. And now that that has been pushed up, we can come back here to GitHub, press Continue, and there you can see we have our index.html file right there. Now, if we hurry right now to sherlocktuts.gethub.com, you're going to notice we get a 404 page, and notice what the message here says. Are you trying to publish one? We'll send you an email when your page has been built. It may take up to ten minutes until your page is available. So I'm gonna wait here for just a second while GitHub works its magic and a couple of minutes later, you can see that the page we created is now live at Sherlocktuts.Github.com. It's pretty simple, but of course you can do anything you want within the constraints of a static website and this would work just fine. All right so now that we kind of have our own personal user account website on the GitHub domain, let's think about putting an actual site up for our project repository. This is gonna be a little trickier because it has to be within this same repository. However I'm pretty sure you have the skills to do it. So let's come back here to the terminal, clear the terminal. I'm actually going to move back into our project directory. Back to the basics again for a second. If I list the branches, you can see we only have a master branch. Whenever we've created a new branch at this point, the branch always has a parent branch. That's an important point. However, here's the idea. What we want is almost like a secondary repository within our one repository. But think of it this way. We have one branch, our master branch, and that started at the beginning of our repository. So our very first commit on the master branch did not have a parent commit. What we wanna now do is create another branch that does not have a parent branch. It's almost like starting over except on a second branch inside of our repository. Since the Git branch tool creates a branch that does have a parent, just a normal branch. We don't even use the Git branch tool to create this orphaned branch. And in fact that's what it's called, and orphan branch. This feature was recently added to Git in version 1.7.2 I believe. And the way we use it is this. We run Git checkout--orphan. And then we're gonna give it a name, and specifically for the sake of GitHub, we need to name it gh-pages, GitHub pages. And this is where we're gonna create that little promotional site for the single repository. So when I do that, notice we've switched to a new branch, gh-pages. But now, notice something else, if I run git status, this is very important, notice that we have a bunch of files that have been staged to be committed, and that's everything that's already in our repository. If I run git log you can see that we actually have a bit of an error because on the current branch there is no history. That's why all the files we currently have have never been committed on this branch before. It sees these all as new files, files that haven't existed before. Of course we don't want any of these files to be part of our GitHub page's website, and so we're gonna have to remove them all. Notice we have this little command right here. Use use git rm --cached with the final name to unstage a file. Since these files are staged, that's what we're gonna have to do. git rm --cached and I'm just going to use the. to get all files, and it looks like I can't do that. Okay, so we'll start with the .gitignore file and finally fix.txt. Now, if I run git status, you can see that these are all untracked files. Now I'm just going to do rm ./* to delete all the files in this current folder. Now, if I run git status, you should see nothing to commit. And let me open the finder window here, and you can see that what we've done is we really just deleted the entire contents of this directory. There is nothing left. So now what we want to do is create our static website. And we do that in the very same way that we we did it before. I'm going to open the vim and I'll open an index.html and I'll just I have an h1 here that says project, and then I can just say, this is our really cool project. I'll Save and Close that. Notice over here we now have an index.html file. That's the entire contents of our directory, so I'm gonna come back here. I'm going to say git add everything. git status to make sure. Yeah, we have that one file that we're committing. Now git commit -m initial promotional site. Excellent. Now that we've committed that we're gonna run git push origin, and we're gonna tell it to push the gh-pages branch. As you can see, that's been pushed, and we've created a new branch up on the GitHub site. If I come back to GitHub here and refresh the page, you can now see if I look under branches here that we have a gh pages branch. And if I click on that branch, you'll see the contents of that is just our single index.html file. Now of course just like our other site, this is gonna take a few minutes to actually get put up on the GitHub domain. So I'm gonna come back here and I want you to notice something. So over here in our finder we have a single index.html file. Now here I'm going to git checkout and we're just gonna check out the master branch. And as soon as I do that, notice what happens. The contents of our project all returns. So it's just like when you switch back and forth between normal branches. Content that didn't exist on one branch will not show up on another. Here it's more drastic in that when we switch to our gh pages branch, we're actually getting rid of the entire contents of our project directory, every single bit of code that we've written, and switching it to just our static site. In fact, now let's switch back. As you can see it switches and the contents of that directory changes. I switch back to master and it's all back. If I run git status on master, you can see there's nothing to commit. If I go back to the gh pages branch and run git status, again, there's nothing to commit. So you can see it really acts like two separate branches. The only difference is the GitHub pages branch is not a branch off of the master branch, but is completely separate. If you think about it in the analogy of tree branches, it's an entirely different tree trunk. All right that should be long enough. So let's come back over here and head over to sherlocktuts.github.com/project/ and now you can see here is the HTML document that we just created. We have our h1 one in our paragraph and notice the URL especially sherlocktuts.github.com/project/. And of course we can change this URL to go to github.com/sherlocktuts/project/, and then just as you would expect, we will get our repository itself. Before we close up this talk on GitHub pages, I wanna mention that for specific repository sites, you can actually do it through the GitHub UI. And if you come here to pages.github.com, they'll show you a much easier UI-based way to create those pages, but I figure you guys can figure that out on your own. I've shown you the technical way to do it, and here, if you prefer a UI-based way, here's how you can create your project page in three steps only. So that is hosting static websites on the GitHub domain.

Back to the top