Hosting on Github Pages
Objectives
- Understand some of the benefits of hosting on Github Pages
- Create a Github page using the automatic generator
- Create a Github page manually (using your own HTML/CSS/JS)
Deploying your web application using Github Pages
Why?
- It's free
- It's a quick and easy deployment option for front-end applications with no server-side code.
- Links you to a community of other developers through Github
Pages gone Viral
- Probably the most well-known front-end app hosted on Github Pages: 2048
- Read more about the game and the Italian developer, Gabriele Cirulli)
- If you're ever bored and want to make your own 2048, you can fork Gabriele's game.
Setup Your Main Page
We'll start by creating a site at username.github.io
. This repo contains HTML, JS and CSS that acts as your GitHub Pages homepage. Note that this is really handy for creating a portfolio, and you can even buy and setup a custom domain later.
Follow instructions on Github Pages to initialize GitHub Pages in your GitHub account.
- Create a new repository named
username.github.io
whereusername
is your GitHub username. - Clone the new repo to your computer
git clone https://github.com/username/username.github.io
- Change your directory to the repo
cd username.github.io
- Create a simple Hello World homepage:
echo "Hello World" > index.html
- Add new files, commit the change, and push the repo.
git add -A
git commit -m "Initial commit"
git push -u origin master
- View the now-hosted page! http://username.github.io.
Using other repos with GitHub Pages
Github Pages works by serving HTML/CSS/JavaScript files that live in a separate git branch.
Think of a branch as a separate "timeline" for your code. It can represent a set of different commits. We've been dealing with the master branch so far, but now we'll introduce a new branch for deployment called gh-pages. This branch is necessary to deploy to Github Pages, with the exception of your homepage.
- Choose an existing repo that you want to host on GitHub Pages.
- Checkout that repo on your local machine.
- Make sure you're on the master branch:
git checkout master
- Create the special gh-pages branch:
git checkout -b gh-pages
Add the files you want to deploy, if necessary:
git add index.html
git add css/*
git add js/*
...
Then, commit and push the local gh-pages
branch up to Github:
git commit -m "Deploying the first version of my project"
git push -u origin gh-pages
Now go to your page at http://[your Github user name].github.io/[repo name]
Deploying subsequent changes to Github Pages
When working on your project, your changes are committed to the master
branch. On your homepage, changes are also committed to the master
branch. But in any other repo other than your homepage, your public site needs to live on a separate branch, gh-pages
. So if you want changes to be displayed live, you'll have to merge the changes made in master
to gh-pages
.
Let's say I made two commits on master
and I'm ready to deploy those changes. First, checkout the gh-pages
branch.
git checkout gh-pages
Then merge the changes from master
.
git merge master
Once you run the merge
command, a text editor may pop up. Verify the commit message and save the file.
Awesome, now push your local changes up to Github by running git push