GitHub provides hosting for software projects and version control using Git. To host your website on GitHub you need to create an account. After your account is setup follow the following steps to host your website.

1. Create a new repository

Once you are logged in to your account in the upper-right corner, click + and then New repository. Now in the Repository name type  where username is the username of your account. Replace username with your GitHub username. Make sure that this repository is set to Public and then select Create repository.

Create a new repository

2. Adding files to your website.

Congratulations! You have created your repository which points to your website which is If you navigate to it will show an 404 error – file not found error. This is because your repository doesn’t have any html file. So, let”s get started by creating a index.html file. To create a file in GitHub select New file in the repository  name your file index.html and include the following content in index.html file and click Commit new file.

<!DOCTYPE html>
        <title>My website</title>
        <h1>Welcome to my website</h1>
        <p id="para">This is paragraph</p>

Now your index.html is set and let’s give it a try. Navigate to and it should display the following result:

3. Linking CSS file with index file

We have created our index.html file now we will link this HTML file with CSS file to add some style to our index page. Create a new file named style.css in the repository by including the following CSS:

    background: black;
    color: yellow;
    color: white;

Once you have created your file and included all the above CSS we need to link this style.css to index. To do this select the index.html file in the repository it will view the contents of index.html file. On the top right section of this file you will find Pencil icon select this then add the following <link> tag to your index.html file in the <head> tag and click Commit changes.

<link rel="stylesheet" href="style.css">

Now navigate to and you will see the change as seen in the following image:

4. Playing with some JavaScript

Now you have successfully created your index file and added some style to it. It’s time to play with some JavaScript. Create a file and name it script.js in the repository and add the following code to it and Commit changes.

window.onload = function(){
    var para = document.querySelector("#para");
    para.onclick = function(){ = "red"; 

Point this script.js file to your index.html as the same way as style.css. Add the following <script> tag to your index file.

<script src="script.js"></script>

Congratulations! your website is up and running you can make changes to the HTML, CSS and JavaScript files and build a better website.


Hosting your web pages on GitHub pages has the following limitations:

  1. The web-page is static.
  2. You can’t use server-side scripting languages such as PHP, Python, ASP.NET, Ruby..etc
  3. You don’t have access to any Databases.

Leave a Reply

Your email address will not be published. Required fields are marked *