Web Hosting on GitHub

Creating a free GitHub account, choosing a website name and setting up a repository for hosting 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.

Some sample developer portfolio websites

For your inspiration, here are some sample portfolio websites from web designers and developers.

And here are some sample portfolio websites from students.

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 projects. 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 along with their related images and other files.

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

https://username.github.io

In the rest of this Tutorial you will create a GitHub Pages repository to host your web pages.

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. On the next screen, enter your Email and chosen Password. GitHub email and password

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.
  • Some people and organisations use the hyphen character (-) to separate words in their chosen Username. For example, mary-smith. Others do not. For example, marysmith. It’s up to you.
Introduction to HTML

DO NOT include numbers in your Username. Your web address will be difficult for others to remember and will ridiculous on Linkedin and your resume. Examples of bad Usernames:

❌ johnsmith2021
❌ maryjones2

After entering your GitHub Email, Password and Username, click the Continue button.

Verifying your identity

GitHub now asks you to verify your account by solving a puzzle.

screenshot

When finished, GitHub sends a confirmation message to your supplied email address with a code for you to enter to the GitHub Sign up screen.

GitHub may ask you a number of questions, such as wther you wish to receive marketing emails and the type of account you want to create - select the Free option.

✅  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. On your GitHub Dashboard, near the top-left of the screen, click the New button. GitHub image
  4. GitHub now displays the Create a new repository screen. At the top of this screen, you can see 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

More learning resources

Tutorial Quiz

  Take the test

Tutorial Podcast