Skip to content
Related Articles

Related Articles

Using GitHub to host a free static website

View Discussion
Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 02 May, 2022
View Discussion
Improve Article
Save Article

In this tutorial, we are going to learn about using GitHub to host our website, without paying anything at all, using GitHub Pages.

It’s important that you follow this link as a prerequisite to this tutorial.

A beginner may not be sure of whether to invest in buying server space, and GitHub gets their work done, for free, in a much clean and elegant manner, using a feature provided by GitHub called “GitHub Pages”.

Firstly, let us ask all the technologies we are going to use give their quick and sweet introduction.

HTMLBuilding block of all websites, a standard markup language which along with CSS and JAVASCRIPT is used by web developers to create websites, mobile user interfaces and applications.
CSSA style sheet language used to set style for the HTML elements.
JavaScriptCommonly used to create interactive effects within web browsers.
JekyllJekyll is a parsing engine bundled as a ruby gem used to build static websites from dynamic components such as templates, partials, liquid code, markdown etc. and helps transform your plain text into static websites and blogs. Jekyll is known as “a simple, blog aware, static site generator”.
GitHubThe famous web based GIT Repository Hosting Service, and in this case, it will help us host our website.

Let’s Begin!!

 Step 1:  Create/ Sign into your GitHub account. 

 Step 2  Create a new GitHub Repository Go into your dashboard and find a “New Repository” button. Click on it to create a new repository and name it whatever you want let say I named my repo to “first-repo-gfg” and in description you can give some information about your repository.

While creating a new repository, GitHub asks for a variety of details to be filled about the new repository, You need not worry about it at all, just write the name of repo and check Add a README file, it will create a file in your root folder, if you want to know about what is read me file you can check it out here. There will 2 more options there one is for adding  .gitignore and choose a license  you can ignore these two options for now. Make sure your repo is public and just click on create Repository.

 

After You have created your Repository it will look something like this you can edit your read me file by clicking on the pencil icon and commit the changes in master branch.

 

step 3: Now we firstly have to clone this repo on our local system, so for that click on the code and copy the url of this repository.

 

step 4: Now open git bash or any terminal in system, make sure that git is already installed and configured properly. Now write the command for cloning the repository this will create a folder on your local system with the same name as of your Github Repository.

git clone “url of repo that you have copied

 

Here we go! Your website is now up and running.

Now go inside this folder it will contain only a single file read.md, here you have to create your webpage or a whole website , lets make a simple webpage here and host it on Github.

Make a index.html file and write “Hello World this is my first web page.” like this 

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GFG</title>
</head>
<body>
    <h1>Hello World this is my first web page.</h1>
</body>
</html>

 

 

step 5: Now run some basic commands and push this file to Github.

git add -A

git commit -a -m “first commit”

git push origin master

 

Now the webpage is pushed to Github you can see this index.html file in your repository, now your repository will contain 2 files (readme.md and index.html),now we are good to go to host our webpage.

 

step 6: Now just follow these steps carefully.

  1. Go to setting and scroll down to Github pages
  2. Click on “check it out here”
  3. Click on the dropdown currently showing none and select your branch in our case it is master.
  4. Click on save, you can see a url on the top of it in the format of https://<username>.github.io/<repo name>. This is url of your hosted webpage.

 

 

Congratulations you have hosted your first web page successfully for free.

 

Now you can use GitHub to test your HTML5 & CSS3 projects, showcase them to real world, on a real and beautiful website!

So that’s how GitHub pages work, really easy! You can make unlimited repository sites.

 

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!