Web Hosting on GitHub

Creating a free GitHub account, choosing a website name and setting up a repository to host your web pages.

Learning Goals

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

  • Create a free account on the GitHub website.
  • Choose a username that will be the first part of your website address.
  • Create a project location (called a repository or repo) on GitHub for hosting your website.
  • Create a web page directly on GitHub and display it in your web browser.

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 top-right of the GitHub home page, choose the Sign up option.
  3. When prompted, enter your email, chosen password, and click Continue. GitHub email and password
  4. GitHub asks if you want to receive marketing updates. Enter y or n, and click Continue. GitHub marketing

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. Here's why:

  • Your username will be the first part of your web address. See some examples below. The remainder of your GitHub web address will always be .github.io. GitHub username and sub-domain
  • You will want to promote your website to others by including your web address in emails, on Linkedin and social media platforms, and on perhaps on your curriculum vitae and business cards. So choose a username that others will find easy-to-remember.
  • Typically, you will choose a username that is similar to your personal or organisation name.
  • Enter your username in lowercase letters and without any spaces. Do not use the underline (_) character.
  • Some people and organisations use the hyphen character (-) to separate words in their chosen Username. For example, mary-smith or purple-pixels. Others do not. For example, marysmith or purplepixels. It’s up to you.
  • GitHub provides just one GitHub web address for each account. If you want to create several GitHub accounts, you will need to use a different email address for each one.
  • The Username you choose need not be the same as your email address. For example, you could create a Username of marygreen with the email of marywhite@gmail.com.
  • You can change your GitHub Username later if you wish.

Your GitHub account: username

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

  1. In the username field, enter your chosen username and click Continue. GitHub username
  2. When you have entered a username that GitHub accepts, you are now shown a new screen that asks you to complete an ‘I am a real person’ puzzle. GitHub puzzle Click the Start puzzle to begin.
  3. When finished, click the Create account button. GitHub create account

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 email prompt

GitHub sends a confirmation message to the email address with a code for you to enter to the GitHub Sign up screen.

GitHub email

Choose your GitHub account type

You will be next asked for more information. The highlighted option below is probably the one you want.

GitHub account type

Click Continue when finished.

Finally, select the Free option and click the Continue for free button.

GitHub free account

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

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 username.

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 ever 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 Create a new repository 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: / Add a README file 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:

  • Open a new tab or window in your web browser.
  • In the web address bar, enter the address of your GitHub website – such as marysmith.github.io.

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.

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

GitHub image

Github and GitHub Pages

You create websites on your local machine. But you will want your websites to be publicly accessible on a remote server for the world to admire and use.

Consider the two examples below from Airbnb Engineering & Data Science.

screenshot

https://github.com/airbnb

This is simply a list of GitHub repos. Typically, these are stored in a default branch named main or master. The GitHub web address looks like this:

https://github.com/username

At this address, you can only view and download files.

screenshot

https://airbnb.github.io

In this second example, you can view web pages. You could also run an app created with ReactJS or other JavaScript framework.

GitHub can make this possible with a special branch named gh-pages. The GitHub Pages web address looks like this:

https://username.github.io

Deleting a folder from GitHub

Follow these steps:

  1. Browse to the folder in your repository that you want to delete.
  2. At the top-right of the screen, click the Ellipses (three dots) icon.
  3. From the dropdown menu, choose Delete directory.
  4. At the top-right of the screen, click the green Commit changes... button.
  5. In the dialog box displayed, accept or edit the suggested message, and click the green Commit changes button.

That's it.

About Netlify and Vercel

Below are two hosting services with fre tiers that you can link to a repository on your GitHub account:

See the links below:

A Step-by-Step Guide: Deploying on Netlify

Deploying Git Repositories with Vercel