Assuming that you already know little about Html, Css and GitHub. Since We are going to work with these languages directly by no means we don’t need any expertise in these languages. Idea here is to learn by doing.
Let Us Understand First These 3 Terms Git, GitHub and GitPages!
All these 3 terms at first glance looks similar to you there is Git in all these terms. To simply put it Git is what you do locally do in your computer and GitHub is the place everything gets stored on server publicly. Projects which depend on Git are stored publicly in GitHub and GitHub Pages.
Git
Git is a version control system. Version Control System nice name to describe Git Perfectly. What it does is it tracks changes to files to project overtime. It typically records everything like who removed the file, what changes are made to the file(by commenting) by whom. This tool is often used in software development projects to work in collaboration.
GitHub
GitHub is a web hosting service system for the projects which uses git. In git most of the code is publicly available, helping developers to easily understand, collaborate, use and improve, the code. The container of the particular project is called a repository.
Most of the front end projects uses
1. Twitter Bootstrap.
2. HTML5 Boiler Plate.
3. Ruby on Rails.
GitHub Pages
Github Pages are hosted publicly for free in GitHUb. In GitHub You can create and host your personal website or any software development site in which you are working on.
Let’s Get Started with GitHub Pages
Let’s host the GitHub Pages publicly.
1. Login to your GitHub account go to repositories and click on new repository.
2. Name of the repository should be yourrepositoryname.github.io and make sure that it is public, also include README file. In the next step create a new file by clicking plus icon next to your repository,
3. Create an index.html page
on the page put html markup code
<!DOCTYPE html>
<html>
<head>
<title>Hank Quinlan, Horrible Cop</title>
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/cv">CV</a></li>
<li><a href="/blog">Blog</a></li>
</ul>
</nav>
<div class="container">
<div class="blurb">
<h1>Hi there, I'm Hank Quinlan!</h1>
<p>I'm best known as the horrible cop from <em>A Touch of Evil</em> Don't trust me. <a href="/about">Read more about my life...</a></p>
</div><!-- /.blurb -->
</div><!-- /.container -->
<footer>
<ul>
<li><a href="mailto:hankquinlanhub@gmail.com">email</a></li>
<li><a href="https://github.com/hankquinlan">github.com/hankquinlan</a></li>
</ul>
</footer>
</body>
</html>
4. Commit the index.html page with comments. Congratulations! you just now hosted your first static html page to the public. It should be live immediately. You can check the site by you giving URL yourrepository.github.io in the browser.
You can add css to your html file.
You can even use Jekyll(static site generator to build your website).
