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 username.github.io  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 username.github.io. If you navigate to username.github.io 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 username.github.io  name your file index.html and include the following content in index.html file and click Commit new file.

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

Now your index.html is set and let’s give it a try. Navigate to http://username.github.io 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 username.github.io repository by including the following CSS:

body{
    background: black;
}
h1{
    color: yellow;
}
p{
    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 http://username.github.io 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  username.github.io repository and add the following code to it and Commit changes.

window.onload = function(){
    var para = document.querySelector("#para");
    para.onclick = function(){
        para.style.color = "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.

Limitations

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 *