GitHub Hosting

How to host a website on GitHub

Free hosting on GitHub

Note if you have any dyanmic pages (eg. are using php) then you will need to use an alternative for hosting.

Information on GitHub pages may be found here, here and here.

Importing/Forking an existing website repository

By far the easiest way to host a website on GitHub is to import or fork an existing site repository from GitHub or any other code sharing platform. See here for a variety of templates you can use to make websites.

Simple GitHub setup

This section has simple instructions for hosting your site for free on GitHub. Further below are more advanced instructions for setting up the stage directory and site directory as branches in the same repository.

On GitHub with url:
https://username.github.io

  1. If you do not already have a GitHub account, you can join here;
  2. If you do not already have Git installed on your computer, you can find installation instructions here;
    Note: If you are new to Git and GitHub, do not confuse yourself about authenticating with GitHub from Git. You can follow the rest of these steps and educate yourself later.
  3. Create a new repository called username.github.io, where username is your GitHub username;
  4. Open a terminal window and change to the directory you would like to store your repository in locally;
  5. Clone a local copy of your new repository by entering:
    git clone https://github.com/username/username.github.io.git
    
  6. Change into the repository directory by entering cd username.github.io;
  7. Copy your site files (anything inside the site directory, not the whole stage directory) into the repository directory;
  8. Enter the following into your terminal window:
    git status
    git add .
    git commit -m "added site files"
    git push origin master
    

  9. In the repository's settings on GitHub, under GitHub Pages set the source branch to master branch;
  10. Your site, with url:
    https://username.github.io
    
    should now be hosted and accessible from the internet.

To update your site, just repeat the steps following (and including) copying the site files into the repository directory.

On GitHub with url:
https://username.github.io/site-name

  1. If you do not already have a GitHub account, you can join here;
  2. If you do not already have Git installed on your computer, you can find installation instructions here;
    Note: If you are new to Git and GitHub, do not confuse yourself about authenticating with GitHub from Git. You can follow the rest of these steps and educate yourself later.
  3. Create a new repository called site-name, you may choose any name you like;
  4. Open a terminal window and change to the directory you would like to store your repository in locally;
  5. Clone a local copy of your new repository by entering:
    git clone https://github.com/username/site-name.git
    
    where username is your GitHub username;
  6. Change into the repository directory by entering cd site-name;
  7. Copy your site files (anything inside the site directory, not the whole stage directory) into the repository directory;
  8. Enter the following into your terminal window:
    git status
    git add .
    git commit -m "added site files"
    git push origin master
    

  9. In the repository's settings on GitHub, under GitHub Pages set the source branch to master branch;
  10. Your site, with url:
    https://username.github.io/site-name
    
    should now be hosted and accessible from the internet.

To update your site, just repeat the steps following (and including) copying the site files into the repository directory.

Advanced GitHub setup

This section has advanced instructions for hosting your site for free on GitHub. We will setup two branches, one for the stage directory and another for the site directory. Locally we will also have the branch for the site directory inside the branch for the stage directory. This is a little confusing at first, but is super useful once it makes sense.

Once you already have a repository set up for this and you want to make a new local clone I typically (I may add a command to nsm to automate the following at some point):

  1. clone the repository from GitHub;
  2. switch to the master/gh-pages branch if necessary;
  3. rename the directory to site;
  4. clone the repository from GitHub again (if the size of your repository is large enough that downloading it twice is slow/tiresome/wasteful then just make a local copy the first time you clone it);
  5. switch to the stage branch if necessary;
  6. remove the copy of the site directory from the stage directory/branch and move the site directory/branch in to the stage directory/branch.

I would love to know if someone finds an easier way to achieve the same result below.

On GitHub with url:
https://username.github.io

  1. If you do not already have a GitHub account, you can join here;
  2. If you do not already have Git installed on your computer, you can find installation instructions here;
    Note: If you are new to Git and GitHub, do not confuse yourself about authenticating with GitHub from Git. You can follow the rest of these steps and educate yourself later.
  3. Create a new repository called username.github.io, where username is your GitHub username;
  4. Open a terminal window and change to the directory you would like to store your repository in locally;
  5. Clone a local copy of your new repository by entering:
    git clone https://github.com/username/username.github.io.git
    
  6. Change into the repository directory by entering cd username.github.io;
  7. Checkout a new branch called stage by entering git checkout -b stage;
  8. Copy your stage files (anything inside the stage directory, including the site directory) into the repository directory;
  9. Enter the following into your terminal window:
    git status
    git add .
    git commit -m "setup stage branch"
    git push origin stage
    

  10. Change to the parent of your repository directory by entering cd ..
  11. Rename your repository directory from username.github.io to username.github.io-stage
  12. Make a second local clone of your repository by again entering:
    git clone https://github.com/username/username.github.io.git
    
  13. Change into the second local repository directory by again entering cd username.github.io;
  14. Checkout an orphan branch called master by entering git checkout --orphan master;
  15. Delete everything inside the second local copy of your repository;
  16. Enter git rm -r .
  17. Enter git status and ensure you get:
    On branch master
    
    Initial commit
    
    nothing to commit (create/copy files and use "git add" to track)
    

  18. Copy the site files (anything inside the site directory, not the stage directory) from the first local copy of your repository (ie. files in username.github.io-stage/site/) to the second local copy of your repository (ie. place them in username.github.io, not username.github.io/site/);
  19. Enter the following into your terminal window:
    git status
    git add .
    git commit -m "setup master branch"
    git push origin master
    
  20. In the repository's settings on GitHub, under GitHub Pages set the source branch to master branch;
  21. Your site, with url:
    https://username.github.io
    
    should now be hosted and accessible from the internet.
  22. Change to the parent of your (second) repository directory by entering cd ..
  23. Rename your second repository directory from username.github.io to site
  24. Move your second repository directory, now named site, into your first repository directory (replacing the copy of site already in the first repository directory);
Now from your local repository, you can manage the site/master branch from inside the site directory, and the stage branch from anywhere else inside the repository. Give it a try, I think you will like it!

On GitHub with url:
https://username.github.io/site-name

  1. If you do not already have a GitHub account, you can join here;
  2. If you do not already have Git installed on your computer, you can find installation instructions here;
    Note: If you are new to Git and GitHub, do not confuse yourself about authenticating with GitHub from Git. You can follow the rest of these steps and educate yourself later.
  3. Create a new repository called site-name, you may choose any name you like;
  4. Open a terminal window and change to the directory you would like to store your repository in locally;
  5. Clone a local copy of your new repository by entering:
    git clone https://github.com/username/site-name.git
    
    where username is your GitHub username;
  6. Change into the repository directory by entering cd site-name;
  7. Checkout a new branch called stage by entering git checkout -b stage;
  8. Copy your stage files (anything inside the stage directory, including the site directory) into the repository directory;
  9. Enter the following into your terminal window:
    git status
    git add .
    git commit -m "setup stage branch"
    git push origin stage
    

  10. Change to the parent of your repository directory by entering cd ..
  11. Rename your repository directory from site-name to site-name-stage;
  12. Make a second local clone of your repository by again entering:
    git clone https://github.com/username/username/site-name.git
    
  13. Change into the second local repository directory by again entering cd site-name;
  14. Checkout an orphan branch called master by entering git checkout --orphan master;
  15. Delete everything inside the second local copy of your repository;
  16. Enter git rm -r .
  17. Enter git status and ensure you get:
    On branch gh-pages
    
    Initial commit
    
    nothing to commit (create/copy files and use "git add" to track)
    

  18. Copy the site files (anything inside the site directory, not the stage directory) from the first local copy of your repository (ie. files in site-name-stage/site/) to the second local copy of your repository (ie. place them in site-name, not site-name/site/);
  19. Enter the following into your terminal window:
    git status
    git add .
    git commit -m "setup gh-pages branch"
    git push origin master
    
  20. In the repository's settings on GitHub, under GitHub Pages set the source branch to master branch;
  21. Your site, with url:
    https://username.github.io/site-name
    
    should now be hosted and accessible from the internet.
  22. Change to the parent of your (second) repository directory by entering cd ..
  23. Rename your second repository directory from site-name to site
  24. Move your second repository directory, now named site, into your first repository directory (replacing the copy of site already in the first repository directory);

Now from your local repository, you can manage the site/gh-pages branch from inside the site directory, and the stage branch from anywhere else inside the repository. Give it a try, I think you will like it!