Contents  >

Web Hosting on GitHub

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 website address
  2. At the right of the GitHub home page, you can see the three fields (‘boxes’) 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.
    GitHub signup signin screen

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

After choosing a username for your GitHub account, your next step is to enter it.

  1. In the Username field on the right of the GitHub home page, enter your chosen Username.  If another GitHub account has already taken your entered Username, you will see a message similar to that below. GitHub username already taken
  2. You may be asked to complete an ‘I am a real person’ puzzle. GitHub image Click the Verify button to begin the puzzle. GitHub image
  3. When finished, scroll down the screen and click the button named Next: select a plan. GitHub image
  4. GitHub now shows you a new screen, named Choose a plan. This screen offers you two sets of choices:
    • Individual or Team membership, and
    • Free or Pro (paid) membership
    At the top of this screen, you can see that the Individual plan is selected by default. You do not need to change this. GitHub image Lower down the screen, GitHub offers you a second set of choices – Free or Pro. Select the Choose free option. GitHub image
  5. GitHub now displays a 'Welcome' screen with a series of user feedback questions. GitHub image You can ignore these questions if you wish.   At the bottom of this 'Welcome' screen, click the button named Complete setup. GitHub image

That’s it. You have now created your account on GitHub. Well done,

But you have two more steps to complete before you can use your GitHub account to host your web pages:

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 host web pages on your GitHub account, you need to create what is called a ‘repository’ with the same Repository Name as your GitHub web address.

Repositories on GitHub are commonly referred to as ‘repos’.

Follow the steps below to set up this repository.

  1. If you are not signed in to 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. GitHub image Notice that your chosen GitHub Username is displayed in the Owner field. GitHub image
  5. At the right of the Owner field, in the field called Repository name, enter your chosen Username, followed by .github.io.   You must enter these EXACTLY. Here is one example. GitHub image And 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 so that others will be able to view your web pages. GitHub image
  8. Select the Initialize this repository with a README checkbox below. GitHub image 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.
  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 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. GitHub image
  2. At the left of your GitHub Dashboard you will see a list of all the repositories you have created on your GitHub account.   Currently, because you have created only a single repository, the only one you will see will have a name in this format:   username/username.github.io GitHub image Over time, as you create more repos, the list you see at the left of your GitHub Dashboard will grow. But, if you want a GitHub account to host web pages, there must always be one repository with a name exactly the same as the GitHub username. See the examples below.  
    • abcdesign/abcdesign.github.io 
    • seankelly/seankelly.github.io 
    • mary-pixel/mary-pixel.github.io 
  3. Click the username/username.github.io repository.   GitHub now shows a screen with details of that repository.
  4. Near the right of this screen, you can see a button named Add file. Click on it. GitHub image
  5. From the dropdown list displayed, choose the option Create new file. GitHub image
  6. On the next screen displayed, enter index.html as the name of your new file. GitHub image
  7. For the content of the file, enter Hello, world. GitHub image
  8. Next, enter a so-called commit message for your action of creating a new file. For example:   Create home web page for personal website. GitHub image
  9. 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 regular software applications such as Microsoft PowerPoint or Adobe Photoshop.

That’s it. All done.

To verify that your web page displays correctly:

  1. Open a new tab or window in your web browser.
  2. In the web address bar, enter the address of your GitHub website. For example:   marysmith.github.io.

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.

Note that there is no 'www' at the beginning of a GitHub web address. See the examples below.

GitHub image


Return to Contents.