Hosting a simple website on Github is easy, free, and fast, and is one of the most painless ways to get your project online quickly. If you want to learn more about web development, it’s definitely worth learning all about Git and Github, but if you just want to get your project online, you don’t actually need to learn any of that, you just need a Github account and some free software.
It looks like a lot of steps, but there’s nothing too difficult involved in setting up Github hosting, just make sure you get all the steps in the right order!
Note: These instructions are specifically for Github for Mac, and though the process should be the same on Windows, your mileage may vary
Step 1: Sign up for Github
Create a free Github account at Github.com.
Step 2: Download the Github Application
Download the Github application for Mac or Windows. Open the application and complete the setup process. You’ll need to log in to your Github account.
Step 3: Create a new repo
In Git/Github, projects are referred to as “repos” or “repositories”. To add your project to Github, you’ll need to create a new repo for it.
Go back to Github.com and click the “Create a new Repo” Button in the toolbar. Give your new “Repo” (Respository) a name, and click “Create Respository”.
From the next screen, find the “Setup in Mac”/”Setup in Windows” button in the “Quick Setup” box. This will launch the Github application
The Github application will ask what you want to clone the repo as (what name you want the folder to have) and where you want to add it. Pick a location on your computer where you keep your web projects, like your documents folder. Click “Clone”. You now have a copy of your empty “repo” on your computer.
Step 4: Add files to your repo
Next, navigate to the location in which you saved your repo, and find the folder with the matching name. Open up this folder. This is where you will put all the files that you want to put online.
If you’ve already created a web page, you can copy your files into this folder. Say you have a folder called “website” which contains an html file, as well as an images folder with some images in it. Select the contents of this folder (not the folder itself) and copy them into the newly created repo folder. Note: name your html file “index.html” if you want a shorter URL for your website.
Go back to the Github application, and click on the “Changes” tab. There should be a list of files in your project and the title “Uncommitted changes”. Enter a “commit summary” into the text box (something like “Initial commit”), and click “Commit”.
Step 5: Sync Changes
Next, click the “Publish Branch” button in the top right corner of the application. Github may ask you to log in again, or may ask permission to use your login credentials. Once your project is synced, you should see the message “No unsynced commits”.
Step 6: Publish
To publish your website, click on the “branch” icon in the bottom left of the application, where it says “master”. In the text box, type “gh-pages” and hit enter.
Click the “Publish Branch” button again.
Wait a minute or so, and then your website should be published!
You can visit your website at your-username.github.io/your-repo-name. You can also find the link to your hosted project from the “Settings” page of your repo on the Github website in the “Github Pages” section.
Making Changes
If you want to update your website, keep making changes in the folder that has the same name as your repo. When you want to publish the changes, just open up the Github application and click “Publish Branch” again. Your changes should be live within a minute or so.
Using a custom domain
If you have purchased your own domain name, you can connect it to Github so that you can use your custom domain to view the site you published at your github.io url. This requires configuring the Domain Name Servers (DNS) through your domain provider. The instructions for setting this up are on the Github Help Site
