Using GitHub to host a free static website

In this tutorial, we are going to learn about using the 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.

HTML Building 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.
CSS A style sheet language used to set style for the HTML elements.
JavaScript Commonly used to create interactive effects within web browsers.
Jekyll Jekyll 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”.
GitHub The 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 as “<your-GitHub-username>.github.io” (without double quotes).

For example:- If my username is hemangsk, my new repository’s name should be Hemangsk.github.io

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 make sure you make the Repository – “public“.

Step 3 Dealing with the repository page

repository page

NOTE: Once you click on Create Repository, you land up on the repository page. Here’s where all the action takes place

Now the repository page comes and here’s what you have to do,

  • Get all your HTML and CSS files ready in a folder, let’s name it WEB, in your computer.webfolder
  • Push(Upload) it on that repository. Now there are several ways to do it, like using Git, or the GitHub client on Windows, or manually.
  • What you have to do is to manually copy paste each of your HTML and CSS files to that repository, suppose you have a index.html file in WEB folder in your computer.
    1. Open the repository page
    2. Click on New File button on that GitHub’s repository page.
    3. Name your file as “index.html”.
    4. Minimize the repository page and open the index.html file in your computer.
    5. Copy its contents.
    6. Maximize the repository page
    7. Paste the copied contents
    8. Click on “commit changes”
    9. index.html file is now pushed/uploaded to your repository.
    10. Repeat these steps for all the rest of the files in your “WEB” folder.New File Creation

    Once you’re done, you can easily observe that the repository page now looks populated.populated

Step 4 Once all the files are now up and ready in your repository. It’s time to open your beautiful website.Open new browser tab and visit “<your-GitHub-username>.github.io”.upandrunning

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

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 plus one user site. “User” site is what we just created. Repository sites are created in exactly the same way.

You can put all your doubts in comments section, and I’ll get back to you.

Have a great day!

About the Author: Hemang Kumar is n open source developer and a sophomore at USICT, hkNew Delhi pursing BTech CSE, loves to design code, web and user interfaces.He can be reached at https://www.linkedin.com/in/hemangkumar

If you also wish to showcase your blog here,please see GBlog for guest blog writing on GeeksforGeeks.



My Personal Notes arrow_drop_up


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.