How To Make GitHub Static Website

GitHub is a community platform where software developer , students, professional programmers and many types of developers collaborate to develop software. Even organization have GitHub accounts and their entire team work and share their works among themselves. Students can learn programming from GitHub tutorials on their static websites.

Advertisements

In this post , we explore how to make a GitHub statics website so that you can showcase you projects to others. Building a software is not enough as you may want to present your work properly to the potential clients or employers.

Tools To Deploy The GitHub Static Site

There are many ways to publish GitHub pages where this article focus on web-based approach which does not involve downloading or installing any software tools. The following are the ways to deploy GitHub pages.

  • GitHub Website
  • GitHub Desktop Tool

The GitHub deskop tool for Windows and macOS is available for download. Now you will learn to create a repository and publish you first GitHub page in a step-by-step manner. Read each of the step carefully.

Step 1: Create GitHub Account

This step is applicable to only those who do not have a GitHub account. You need to sign up for an account on the GitHub site with an email address. If you have already signed up and have an existing account skip to step 2.

Now sign in to your account and you should see a page given in following figure.

Figure 1 - Sign in to GitHub Account
Figure 1 – Sign in to GitHub Account

Right now, you don’t have a repository and also note you account name or username. You must create a repository which is nothing but a place to store your project files. In our case, we must store web pages.

Step 2: Creating a repository

You must be extremely cautious while creating the repository because choosing a wrong name for your repository will break the web site. Our account name is Notesformsc; therefore, we are going to create a repository with the same name.

Figure 2 - Create a repository with same name as your account name.
Figure 2 – Create a repository with same name as your account name.

If the account name is “demo”, then the repository name would be “demo.github.io”. Also, select whether you want to make this repository pubic or private which does not affect the web site except that you must be a owner of the repository to visit the pages.

Advertisements

Watch the figure carefully and see how we made a mistake in typing the name. These type of typing mistake should not happen, else the website will not work.

Figure 3 - Choose the licence and README file and Create repository
Figure 3 – Choose the licence and README file and Create repository

Step 3 : Create files inside repository

The new repository is empty or it may have two files namely – README and Licence file. We must create new files for our web site. The very first file we need is “index.html”. An index.html file is the main page of any web site.

Figure 4 - Under Code select Add file and Click Create new file
Figure 4 – Under Code select Add file and Click Create new file

Under the Code section, select Add file drop-down, and select Create new file.

Figure 5 - Type the name of the file and copy the content
Figure 5 – Type the name of the file and copy the content

There are number of ways to create files. If the file is ready, then simply upload them from “Upload files “ option under “Add files”. The second way is to create a new file and open the existing index.html file on your computer, copy the content and paste it in the new file you created. Finally, commit your changes.

Suppose you have a folder on your computer called “mywebsite” that contains “index.html”. Open the “index.html” file from the folder to a notepad, then copy all the codes. Go to GitHub , paste your content under “Index.html” as shown in the figure above.

Figure 6 - Commit your file index.html
Figure 6 – Commit your file index.html

To save your changes, commit the file at the bottom. In the similar manner, you must create style.css . The style document will contain all the style information for index page and other pages if any.

Figure 7 - Create a style.css in the repository
Figure 7 – Create a style.css in the repository

Step 4: Verify and test your static site

If you have done everything correctly, then look for the active GitHub page in the bottom right corner of the website . You should see your GitHub site active as shown in the following figure.

Figure 8- The GitHub pages will be active after following all steps correctly.
Figure 8- The GitHub pages will be active after following all steps correctly.

Now it is time to test your page.Open up the repository url – https://notesformsc.github.io and you should see your page published successfully. See the image below.

Figure 9 - You index page should show correctly.
Figure 9 – You index page should show correctly.

If you do not see the page correctly, the most common problem is your account name and repository name must match. Recheck all the above steps to diagnose the issue.

Advertisements

Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.