How to Use GitHub Pages to host your Static Front End Projects

Benefits

I love Codepen.io, it’s a wonderful, easy-to-use tool for simple front-end experimentation. But as the fcc projects got more complex, I realized coding locally was going to save me a bunch of headaches. My text-editor and codekit combo are just waaay faster.

  • Autocomplete
  • Compile everything (codepen was really dragging trying to compile Jade)
  • Better auto-refresh
  • Built in bower
  • Git versioning
  • Improved screen real-estate experience

Git to Github

Since I’m already saving locally, and using git for version control, I figured might as well upload to Github. Plus, Github has a fantastic, free service for front-end projects called Github Pages. Just update your repo and your changes are live.

How it works is simple. Github checks if your repository has a branch called gh-pages and serves any code that’s sitting in that branch. No back-end stuff here, but HTML, CSS and JS work like a charm.

First things first

Let’s make a new folder for your project. I’ll use the Camper News project as my example.

Got to your work directory and make a new one. You can do this in the terminal (or not).

Project Directory

Now, go into the project directory, and (for sure in the terminal this time) use the command git init. Note, this tutorial assumes you have git installed.

Alright, awesome. Now we’re ready to work.

Next steps

Create some files in your campNews directory. I don’t know, maybe an index.html and probably app.css and app.js, or whatever naming convention you prefer. Put your code in these files. Alright, now we’re ready for our first commit. It takes two steps.

  1. git add -A will prep all these new files and the new code inside them
  2. git commit -m 'relevant message' will commit all the work you’ve done to the branch you’re currently on (‘master’ by default)

The key to this whole thing

OK, so far we’re still local. There’s some stuff we gotta do to take our work and move it to github. It’s at this point I like to switch branches. Remember - github only serves from gh-pages, and if you’ve followed along so far, your branch is called ‘master’. Let’s make a new (local) gh-pages branch.

git checkout -b gh-pages will create it, copy all the work from master into gh-pages and switch me over to the branch. Phew.

git branch -d master will get rid of the master branch. Sounds crazy I know, but what do we need it for? Just think of gh-pages as your NEW master branch.

Now, git add -A and git commit -m 'relevant message' again, just in case. And be prepared to leave your editor and terminal and go online for the first time.

Go to your github profile and create a new repo. Name it something relevant, like campNews.

New Repo

Once it’s created, go in and grab the HTTPS clone URL. (Ignore the files in my screenshot, your repo will be empty at this point).

clone url

Putting it all together

And you can leave the online world. Back to the terminal! Let’s connect our local project to this github repo. All it takes is one command.

git remote add origin <server> Just replace server with the HTTPS url you just copied. So my command looks like this:

git remote add origin https://github.com/gkobilansky/campNews.git.

OK, so far we’ve:

  1. Created our project
  2. Versioned it in git
  3. Commited some changes
  4. Switched it to the ‘gh-pages’ branch
  5. Connected it to github

Last step!

Push you project to github. Again, simple:

git push origin gh-pages

That command will make sure your latest commits get uploaded to github. Once you’ve done this at least once, your project should be available http://username.github.io/repository, so for me it’s http://gkobilansky.github.io/campNews.

Once this is all done, the process just repeats itself:

  1. git add -A
  2. git commit -m 'relevant message'
  3. git push origin gh-pages

Granted, steeper learning curve than codepen.io, but faster and more flexible once you get the hang of it.

15 Likes

Excellent post and much easier to understand than some others. I use GitHub Pages to host my documentation for a little contacts app I am building. So seeing that I can host my projects there too is pretty awesome.

I am looking forward to getting more experience.

1 Like

Thanks, very useful information. Now I loaded my portfolio and two progects on github! https://parfum505.github.io/portfolio

This is a great github feature. Completely agree it should be included in the courses somewhere as one transitions to projects usually considered “too big” for codepen. Also gets coders use to using git, branching and github pages which is a perfect place for project documentation

1 Like

This is exactly what I was looking for. Thanks for the clear explanation.

Very easy and straight forward… Thousand LIKES!!! :clap:

Hi, I was just wondering…

I have git set up on my machine locally. I’m using brackets code editor and I have it configured to commit files to GitHub. I’m wondering about this delete master branch stuff. Will my entire GitHub master branch be shifted or is this on a repo by repo basis? Sorry, I’m new to this don’t fully understand the branching thing. Do I make one repo for all my FFC projects or a separate one per project? And are these settings to be reapplied for every new repo?

I want to get a good workflow in place at this early stage.
thanks…