Github Pages === free server?

Objectives

  • Show you how to host basic websites without a domain or server set up
    • It's free!
    • As you push updates to your repo, your website changes immediately!
  • Note: This tutorial assumes basic familiarity with GitHub. i.e., you have a GitHub handle and experience with repositories

Intro

Tell me if any of this clicks with you. You've spent a couple days pouring your heart and soul into website. (Ok, perhaps a bit dramatic. But you've definitely poured something in there) The index.html, CSS stylesheet, associated Javascript file(s), and other necessary pages are finally ready. And you know what? You're proud of it. And now you want to show it off. Right now.

Here's how:

Example of website hosted through GitHub Pages:

Thanks Nintendo: Pokemon Stadium

Instruction

Proceed to the repository that you want to upload. Should be at github.com/username/awesomerepo.

We now need to create a new branch titled "gh-pages".

After creating this branch, enter the settings and set the default branch (likely "master" right now) to gh-pages.

  1. Settings is on the right side of your repo page
  2. Next to default branch, click on the pull-down menu and select "gh-pages"

Greate work thus far! You're almost there. Return to your main repository page. Make sure you're in the "gh-pages" branch. Scroll down a bit to inspect your repo files.

The one finicky requirement GitHub has is that your main .html file must be titled "index.html". You have two options now to change it:

  1. Clone the repo down to your computer, enter your repo folder, make sure you're in your "gh-pages" branch, change the name of the folder, add the change to be committed, commit it, push it back up to your repo.
  2. Click on the .html file, select the edit option, change the name, save the change.

Option 2 is faster by far. I will leave it to you to guess which option I choose the first time around...

And that's it! Your repo will now be available at username.github.io/awesomerepo
Share with your friends and family. Your repo is awesome.

Troubleshooting

My site did not work the first time around. I received the dreaded 404 not found message:
Do not despair. GitHub actually sent me the following email:
Cool stuff; GitHub Support described the issue quite succintly. I had an animate.css folder that was totally empty. Obviously missing any sort of .gitmodule file. I deleted the folder and voila, it worked. For additional troubleshooting, I recommend you check out GitHub Help.

Hope this post helps, and thanks for reading!