Tutorial Creating GitHub Site

Posted in Tutorials

This tutorial will show you how to create a simple static site GitHub site.   Yes, it is free.  You need to first sign up a free GitHub.com account.  For each account, you get one GitHub site and unlimited “project sites”.  Your GitHub site will have the web address http://username.github.io (where username is your GitHub username).  So choose it wisely, or choose it quickly before anyone else gets it.

Your GitHub project sites will be sub-directories within that primary GitHub site.

GitHub account lets you create unlimited public Git repositories.  However, you must pay in order to create a “private” repository.   Information in this article is only relevant at the time of this writing in 2014.

1. Create Repository on GitHub

After you create and log  into you GitHub.com account, click the “+” icon in the upper right and select “New Repository”. Create a new repository named in this format: “username.github.io” where username is your username of your GitHub account.   You have to name that part the same as your GitHub username for it to work properly.

In the below screen shoot is our example where our username is “learnwebtutorials”.

Set it to Public for the world to see.  We choose to checkmark “Initialize this repository with a README” and click “Create repository”.

 2. Create index.html file

To create your home page, click the “+” icon to create a new file …

Name the file “index.html” as shown below.  Create a basic HTML5 page as described in our other tutorial here. We wrote some HTML that looks like this …

At the bottom of the screen, click the green button to “Commit Page”.  Now you should have two files in your repository…

Browse to the web address http://username.github.io (replace “username” with your actual username on GitHub.  And you should see your index.html page.

Our above HTML renders as the following …

This was a simple example to get you started.  You can then make things look pretty by adding fancy HTML and CSS and even Javascript.  Just create additional files to the site as you did for the index.html page.

In our next tutorial, we show you how to make changes to the index.html file using GIT instead of FTP.

 

 

---