Contents  >

Web Hosting on GitHub

IBAT Next Course

Learning Goals

At the end of this Tutorial you will be able to:

Contents

Your GitHub Account: Email and Password

About your GitHub Username

Your GitHub Account: Username

Verify your email address to GitHub

Using GitHub to host your web pages

Creating a test web page on your GitHub website

Your GitHub account: Email and Password

Follow these steps to begin creating your free account on Github.

  1. Use your web browser to go to this web address: https://github.com. GitHub image
  2. At the right of the GitHub home page, you can see the three fields you need to complete: Username, Email and Password. For the moment, ignore the Username field.
  3. In the second and third fields:
    • Enter your Email address and
    • Choose and enter a Password.
    If you are already signed in to an email account on your computer, GitHub may display this address in the Email field. Accept the suggested email address or enter a different one, as required. GitHub image

After you enter your Email and Password, one more sign-up step remains: you need to enter a Username for your GitHub account.

About your GitHub Username

Your choice of Username for your GitHub account is important for the following reasons:

Your GitHub account: Username

  1. In the Username field on the right of the GitHub home page, enter your chosen Username.  If the Username you would like to use is already taken by another GitHub account, you will see a message similar to that below. GitHub image
  2. When you have entered a Username that GitHub accepts, click the Sign up for GitHub button. GitHub image
  3. On the next screen displayed by GitHub, you may be asked to verify your new account by completing an on-screen ‘I am not a robot’ puzzle. Click Verify to begin the puzzle and, when finished, click Done.
  4. On the next GitHub screen, you will be offered two customer plans – Free and Pro. Accept the default option of Free. GitHub image
  5. You do not need to select the two checkboxes boxes at the bottom of this screen. Click the Continue button to proceed. GitHub image
  6. On the next screen displayed, GitHub offers you a list of questions to answer. You can ignore these by clicking the skip this step option at the bottom of the page. GitHub image

You are now shown your GitHub Dashboard. You now have just two more steps to complete to be able to upload and host web pages on your new GitHub account.

GitHub image

Verify your email address to GitHub

Before you can perform any actions on GitHub, such as creating or uploading files, you need to confirm your email address. GitHub sends a confirmation message to the email address you entered when you created your GitHub account.

Open the email and click the Verify email address button.

GitHub image

Using GitHub to host your web pages

To enable web pages to be displayed or ‘hosted’ from your GitHub account, you need to create a special repository that will have a similar Repository Name to the Username of your Github account.

Repositories on GitHub are often referred to as ‘repos.’ You can think of a repo on GitHub as similar to a folder on your computer.

Follow the steps below to set up this repository.

  1. If you are not signed into your GitHub account, sign in now.
  2. If your Github Dashboard screen is not currently displayed, click the Octocat icon at the top-left of the screen to display it. GitHub image TIP: If even you find yourself ‘lost’ when using the various GitHub screens, clicking the Octocat icon always brings you back to your GitHub Dashboard.
  3. Your GitHub Dashboard offers two ways to create a new repository. Choose one. GitHub image
    • Near the top-left of the screen, click the New button. Or...
    • Near the centre of the screen, click the Start a project button.
  4. GitHub now displays the Create a new repository screen. You can see an example below. Notice that the Username you choose for your GitHub account is displayed in the Owner field. GitHub image
  5. At the right of the Owner field, in the field called Repository name, enter the Username of your GitHub account, followed by .github.io.  You must enter these EXACTLY. Here is one example. GitHub image Here are some more examples. GitHub image
  6. Next, enter some text in the Description field, as shown in the example below. GitHub image
  7. Accept the default value of Public for your repository so that others will be able to view your web pages. GitHub image
  8. Select the Initialize checkbox below. This will display your entered Description as ‘placeholder’ text on your GitHub website in a file named README.md. It also simplifies the remaining steps in creating your new repository. GitHub image
  9. Finally, click the Create repository button at the bottom of the screen. GitHub image

GitHub now displays details of the repository you have created. See the example below.

GitHub image

If you click the GitHub ‘Octocat’ logo at the top-left of the repository details screen, you are returned to your GitHub Dashboard.

There you can see your new repository listed in the column on the left. Clicking the repository name will bring you to the screen containing details of that repository.

GitHub image

To verify that your GitHub account is working correctly:

You should now see a web page similar to the following.

GitHub image

Note that updates to GitHub do not always happen instantly. It may take several minutes for a new web page to appear or an existing one to update.

Creating a test web page on your GitHub website

To create a test web page for your GitHub website, follow these steps.

  1. Display your GitHub Dashboard. If some other GitHub screen is currently displayed, click the Octocat icon at the top-left of the screen to view your GitHub Dashboard.  At the left of your GitHub Dashboard, you will see a list of all the repositories you have created on your GitHub account. GitHub image One of these in the list will be the repository that enables your GitHub account to host web pages. It will have a name similar to the following, where 'username' is your chosen GitHub username:   username/username.github.io  For example: 
    • abcdesign/abcdesign.github.io 
    • sean-kelly/sean-kelly.github.io 
    • mary-pixel/mary-pixel.github.io 
      Currently, because you have created only a single repository, the only one you will see will have a name in the format username/username.github.io.  Over time, as you create more repos, the list you see at the left of your GitHub Dashboard will grow. Below are a few examples. In every case, there is always a repo with a name in this format:  username/username.github.io GitHub image
  2. Click the username/username.github.io repository.  GitHub now shows a screen with details of that repository.
  3. In the centre of this screen, click the button named Create new file. GitHub image
  4. On the next screen displayed, enter index.html as the name of your new file. GitHub image
  5. For the content of the file, enter Hello, world. GitHub image
  6. Next, enter a so-called commit message for your action of creating a new file. For example:  Create home web page file for personal website.  GitHub image
  7. Finally, at the bottom of the screen, click the green button named Commit new file. On GitHub, the word ‘Commit’ has a similar meaning to the ‘Save’ in Microsoft PowerPoint, Adobe Photoshop or other software applications.

To verify that your web page displays correctly:

After a short delay, you should see a web page similar to the following.

GitHub image

In practice, you would rarely create a web page or other file directly on GitHub. Instead, you would first create and test your files on your local computer, and then upload them to your GitHub account.


Return to Contents.