After some thought, and while we’re on the subject, it may be a good time to introduce GitHub pages. To put it simply, GitHub pages exposes a very simple webserver for files in a branch of a git repository. A webserver serves files to the web. When your browser makes a request to a webserver the webserver will expose the files in its contol for the browser to render. What this all amounts to is that you will be able to see your code rendered out on the internet (at a given ip, or domain name) just like when you point your browser at a local file. This of course means that others ( I ) can see your work online rather than having to look over your shoulder, or pull down your code and open locally in my browser. In large part, this is why I would like to introduce this sooner than later. There are benifits for you too of course. You will get a basic feeling for what a webserver does, and a very brief look at branches in git.
Enable GitHub Pages
We’re going to do this on the github repository that you created in the last lesson, go ahead and navigate there in your browser. Look to the sidebar and click on settings (it has a hammer and screwdriver icon.) In the settings page you should see a section called GitHub Pages with some information on how to enable it. Github pages looks for a specially named branch in your repository called gh-pages so we will need to make this branch and push it to github. A branch in git can be thought of as a copy of your current history that you can continue to modify without altering the master branch. Almost like a fork in your breadcrumb trail. At this point it’s not real important to understand the branching concept fully, we’re just touching on it briefly to setup GitHub pages.
Create the gh-pages branch.
Open a your terminal window and navigate to the directory where you setup your repository. It might be a good idea to run git status to make sure everything is clean. If it is not, go ahead and commit or remove changes that are pending.
To remove any uncommitted changes, and bring your files back to the state of your last commit you can run git reset --hard HEAD. This command says reset the repository to HEAD (a shorthand for the most recent commit). The --hard option means that your local files will be changed to match. Use this command with caution though, it will delete any uncommitted changes.
|
Now to create the new gh-pages branch run:
$>git branch gh-pagesEasy enough. This creates the new branch. You can view your branches by running:
$>git branch -a
gh-pages
* master
remotes/origin/master
The -a in the previous command is an option to show both local and remote branches. If you run this command without it, it will only show the local branches
|
The astrisk indicates the current local branch you are on. We use git checkout to switch branches, so lets switch to our newly created gh-pages branch:
$>git checkout gh-pages
Switched to branch 'gh-pages'You are now working on the gh-pages branch. If you run git status or git branch it should reflect this. Now we need to push this new branch up to our remote (GitHub).
$>git push origin gh-pages
Total 0 (delta 0), reused 0 (delta 0)
To git@github.com:<github-username>/pages-test.git
* [new branch] gh-pages -> gh-pagesYou may have noticed this is a lot like the git push origin master we have been doing. In this case we’re pushing to GitHub (origin) the branch gh-pages. Since this branch doesn’t yet exist on GitHub, you recive a message that it has been created.
Now jump back to your browser that has the settings page we navigated to earlier and refreh. You should see a green notification that "Your site is published at http://<github-username>.github.io/<repository-name>." While you’re on the settings page, near the top you will see a dropdown form element labeled "Default branch," change this to our new gh-pages branch. Now go ahead and click the link to see your rendered HTML. Congradulations you’ve just posted your HTML document for the internet to see!
While you’re here go ahead and copy this URL and navigate back to your repository page on GitHub. Near the top there is a "Website" form field. Paste the URL to your new github pages page here and hit save. I like to do this because it will preserve the link at the top of your GitHub repository page. This way you won’t have to go fishing for it every time.
Wait… BWAH?!
So this all may seem a little strange. What we are doing is leaning on a feature that GitHub provides us. The gh-pages branch was arbitratily chosen by GitHub to be the branch they expose to their webserver. Outside of GitHub there is nothing special about the gh-pages branch, it’s just another branch. I’ve chosen to include this lesson because it is an easy way to post your code to the web using only git, rather than having to worry about setting up and managing a webserver (which is yet another layer of complexity.) So this way GitHub handles all of the server side stuff for us, and all we have to worry about it pushing what we want on the web to this branch.
If the branching was confusing, don’t worry too much about it. Going forward (at least for a little while) we will be only working with the gh-pages branch. (Be sure you have set this as your default branch on GitHub.) So now instead of git push origin master you will be running git push origin gh-pages. This is the only change in the workflow we talked about last time.
Of course if there are any questions, please ask. If your curious, or still unsure of what his whole GitHub pages thing is all about, I’m happy to try and explain it further.