Tadaa…!

If you are wondering how to create and host your website on Github and you need some quick insights on it, to get you started!.

Click! Click! Click!

You are on right post. :)

A quick draft how I got my things done.‌

‌To begin with basic knowledge of HTML, CSS and its folder structure for creating a website on your local environment will give you a better picture of working here on Github. Add on to that, Static and Dynamic website differences will get you started!‌

‌‌

‌1. Create Github account and start exploring.

Git, Github and Github pages are quite different from each other.

>Git: It's nothing but a workflow to get  things done by tracking all the changes made while working on the project. It records what changes were made, when it was made, what was added and so on, along with maintaining its versions. So that one can go back anytime and use/refer  the oldest file without worries. Hence maintaining multiple versions of your file.

>Github: Its a web hosting service which is dependent on Git.

>GitHub pages: Its a webpages publicly hosted with the help of GitHub for free.There you go… Can work on your website for learning and get things done. Moreover to do so, GitHub repositories are named in a certain way which ought to be followed, It just makes you more organized while coding.‌

‌Now the differences are known, let's get started with GitHub pages.

2. Create project’s repository by clicking on New repository icon.

>Repository is complete collection of files and folders associated with the project along with the each file's updated history.

3.Name the repository with the required name in the format “username.github.io”.  Make it public and at the end create “Readme” file.

4.Under “username.github.io” create  “index.html” file and write out the basic code.Then Commit the file by adding a description. Now thats your first Github page go ahead and look at “http://username.github.io

5.Index.html is just a plain text, to fashion it up! Add-on some CSS. Create CSS folder and css code file under it , something like this- “css/main.css”. Write the desired code, link your CSS by defining it under the index.html file and Commit.And now Fashioned  index.html is all set to go!

Till here was just warm up to get use to its workflow and structure.

Now, will be using Jekyll- it does wonders for beginners.

Jekyll, manages the website in much easier way, all it requires is,  markup defining the look of pages  and just call it out in other files whenever needed. It’s a time savior. This thing is called Layout in Jekyll that will be used in all the required pages.‌


Setting Jekyll on Github.com

‌1.Create  “_config.yml”  file to tell some basic information about the website. Such as name of the website and the Markdown to be used.

2.Create “_layouts” directory and a file under it “default.html”. Write the code containing the basic look of header and footer. This Markup need not to be rewritten in another file just call it out. Liquid tags that jekyll uses to call: {{ page.title }} and {{ content }}

3.Re-edit the “index.html” and call the default layout, by just mentioning

>Layout: default (name of the layout file created to be used everywhere )

>Title: Website name

><div> Content to be written </div>

Here what happens is, it  uses “default.html” file where it just inserts the content from “index.html”  by replacing the Liquid tags and keeping the basic markup which was set already!

There you go all set and done !‌


Blog

That was just the first basic layout, same can be done for the blog as well.

Again, all you need to understand is workflow, structure and some basic coding knowledge. Here is the further idea of setting up blog using jekyll!.

‌1. Create a “post.html” file under the Layouts directory and write up basic look of the post which would be called like previous layouts.

2.Create a directory posts and store all the independent post.html files under it - “_posts/post1.html” . Here you can write all the posts just like the “index.html” and save it in the jekyll format- “YYYY-MM-DD-title-of-my-post.md”

3.Once all set and done view the page at

http://username.github.io/YYYY/MM/DD/name-of-your-post

4. Now list all the post under one page with hyperlink, as readers won't know independently your post’s name. Thus, Create a directory “blog/” and file under it “index.html” which would list all the posts.

5.Edit the “_config.yml” by adding permalinks. A quicker way to see all the random posts.Go ahead and explore there is more to do, it was fun when I did, am sure you would too. I have written in more generalized way for quick understanding, had referred this site - http://jmcglone.com/guides/github-pages/ .  It helped me to get started ! ;)